These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Sep 2016
Nicketa
@nicketa96
Sep 06 2016 00:13

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}
.smaller-image {
width: 100px;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

does anyone know what I did wrong?
gs-developer
@gs-developer
Sep 06 2016 00:30
@kat-mag Hi there, The image is nested inside the label. The whole label is nested because of margin: 0 90px; in the label1 class. It was already centered before you put the display:block; inside the img1 class. Try doing it by putting the display:block; in the label1 class.
Greg Duncan
@GregatGit
Sep 06 2016 00:30
@nicketa96 what part of it is not working?
Nathan Christensen
@nateac1
Sep 06 2016 00:42
@nicketa96 make sure everything on the checklist is done
sometimes the code may not be bad but if it doesn't follow the parameters, then you won't pass.
Coy Sanders
@coymeetsworld
Sep 06 2016 00:44
@nicketa96 you need to apply the smaller image class to your image
like you did with red-text to your p and h2 tags, need to do same thing here
KIMoFyTheDev
@KIMoFyTheDev
Sep 06 2016 01:10
This message was deleted
This message was deleted
Sorry, wrong chat room
Michael Gee
@michaelgee22
Sep 06 2016 01:18
blob
blob
can anyone help to why I keep getting this error when I make a $.getJSON call to the open weather app api
Stephen James
@sjames1958gm
Sep 06 2016 01:21
@michaelgee22 MIssing the http:// on the front of your URL so it tries local to codepen
Michael Gee
@michaelgee22
Sep 06 2016 01:23
Oh that worked! thanks a lot @sjames1958gm
CamperBot
@camperbot
Sep 06 2016 01:23
:star2: 3113 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
michaelgee22 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
Stephen James
@sjames1958gm
Sep 06 2016 01:23
@michaelgee22 :+1:
Michael Kuang
@kuangmichael07
Sep 06 2016 01:24
Hey guys I have a simple question but it took me a couple hours already: so if I have a container div with fixed height 400px; And two divs nested inside this container div. How can I make them horizontally fill the container div?
I tried to give the second nested div with height:100% and it overflows
I know that overflow: hidden would somehow make it look good but I don't want to make them overflow
gs-developer
@gs-developer
Sep 06 2016 01:48
@kuangmichael07 <div class="row> <div style="width:50%">a</div><div style="width:50%">b</div></div>
Michael Kuang
@kuangmichael07
Sep 06 2016 01:48
@gs-developer the width is fine, I wonder how the height can be perfectly filled
gs-developer
@gs-developer
Sep 06 2016 01:49
@kuangmichael07 did you notice width:50%
%
sorry
height:100%
does that work
Michael Kuang
@kuangmichael07
Sep 06 2016 01:50
let me shoot the link
Nathan Christensen
@nateac1
Sep 06 2016 01:51
@kuangmichael07 set the height of the container to auto
Michael Kuang
@kuangmichael07
Sep 06 2016 01:51
so please scroll down to the bottom
Nathan Christensen
@nateac1
Sep 06 2016 01:51
i'll check it out
Michael Kuang
@kuangmichael07
Sep 06 2016 01:51
and look at map-container class
gs-developer
@gs-developer
Sep 06 2016 01:52
You might try display:block;
Michael Kuang
@kuangmichael07
Sep 06 2016 01:52
The google-map div is actaully too big
gs-developer
@gs-developer
Sep 06 2016 01:52
k
Michael Kuang
@kuangmichael07
Sep 06 2016 01:52
it is in there
@nateac1 I tried auto; but it somehow does not work
@nateac1 it pushes the first nest div up,
Nathan Christensen
@nateac1
Sep 06 2016 01:53
try adding a line in css for the container :: clear: both;
Michael Kuang
@kuangmichael07
Sep 06 2016 01:54
@nateac1 you mean use clear: both with auto?
Nathan Christensen
@nateac1
Sep 06 2016 01:54
yeah, I might be crazy though.
are you floating your divs?
Michael Kuang
@kuangmichael07
Sep 06 2016 01:57
@gs-developer no
@gs-developer I use position:relative; and display: inline-blockl
Nathan Christensen
@nateac1
Sep 06 2016 01:58
try converting the container to flexbox if anything.
Michael Kuang
@kuangmichael07
Sep 06 2016 01:59
@gs-developer That is my last option I guess. I thought there might be a way out other than that.
@gs-developer the clear both with auto does not work
@gs-developer thanks anyway
CamperBot
@camperbot
Sep 06 2016 02:02
kuangmichael07 sends brownie points to @gs-developer :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @gs-developer |http://www.freecodecamp.com/gs-developer
thetechbohemian
@thetechbohemian
Sep 06 2016 03:11
hey guys, ive created this simple tribute page for freecodecamp challenge, ill appreciate some constructive criticism. http://codepen.io/thetechbohemian/full/QKwAoq/ i
thetechbohemian
@thetechbohemian
Sep 06 2016 03:20
just noticed that on small screens looks out of whack
i was able to make the pictures responsive, how do i make the rest of the page responsive, like the text, margins, etc..?
Henry Cabello
@hacu9
Sep 06 2016 03:56
https://codepen.io/cabello986/pen/ALjOqL?editors=1100 why wont my .results color change?
Pritesh
@pritc
Sep 06 2016 04:14
@hacu9 you have few mistakes in code insted of <ul id=result> you should write <ul id="result"> and to add in css you should declare as #result {}
Henry Cabello
@hacu9
Sep 06 2016 04:53
its more clear now,i was adding the class="result" to my <li>'s changed it to rest but still cant change the color
Pritesh
@pritc
Sep 06 2016 05:01
@hacu9 i have no idea what you want to say i am seeing your code but can't find any <li> element with class="result"
Henry Cabello
@hacu9
Sep 06 2016 05:07
in the js part,im creating em in line 35-45 i believe
Tracey Bushman
@tbushman
Sep 06 2016 05:32
@thetechbohemian did u try wrapping all in <div class="container-fluid"> ?
@thetechbohemian ah yes nvm
@thetechbohemian Check out tutorials on CSS media queries to put conditional styles in for different screen sizes .
Pritesh
@pritc
Sep 06 2016 05:53
@hacu9 add it in css on line no.37
.rest a {
  color: #DDEEEE;
}
Nagireddy Srichakradhar Reddy
@srichakradhar
Sep 06 2016 06:16
.container{height: 100%} in bootstrap won't work in codepen?
Tracey Bushman
@tbushman
Sep 06 2016 06:19
@srichakradhar it should if you add position: absolute
Nagireddy Srichakradhar Reddy
@srichakradhar
Sep 06 2016 06:22
@tbushman in http://codepen.io/srichakradhar/pen/ORJkbN?editors=0100 I'm trying to make #page1 to occupy the whole screen
and adding .container{position:absolute; height:100%} didn't work
Tracey Bushman
@tbushman
Sep 06 2016 06:32
ok .. I just played w/ it a bit and looks like adding width: 100% AND position: relative gets it a little closer to what you'd want I think. But it still doesn't fill the whole page .. one moment
Nagireddy Srichakradhar Reddy
@srichakradhar
Sep 06 2016 06:33
oh
I don't see any change, though
kirbyedy
@kirbyedy
Sep 06 2016 06:38
can you explain what are you trying to do ?
Nagireddy Srichakradhar Reddy
@srichakradhar
Sep 06 2016 06:39
I want to display the container div (with id page1) in a whole page to the viewer
and then when he clicks on about me, I'd like to show the div with id 'social' in the whole page
centered vertically
kirbyedy
@kirbyedy
Sep 06 2016 06:45
oh right
well you can make the height of that div for example 600px;
personally I would make that About Me text much bigger, reduce the margins of your social icons and text, and maybe add some graphics
also I hope you are aware of the fact that you did not link the jquery and bootstrap library to your codepen
your page wont be responsive
Tracey Bushman
@tbushman
Sep 06 2016 06:49
^
Henry Cabello
@hacu9
Sep 06 2016 07:13
http://codepen.io/cabello986/pen/zKxayx?editors=0010 why is 'user[i]' undefined when it reaches line 30 "if" ?
Brandon Porter
@Octoprism
Sep 06 2016 07:22
Any feedback for my tribute page? (The cause of the misalignment issue is unknown to me)
Tracey Bushman
@tbushman
Sep 06 2016 07:29

@hacu9 try

var thisuser = user[i];
    twitch = 'https://api.twitch.tv/kraken/streams/'+thisuser;

then use that variable for append

kirbyedy
@kirbyedy
Sep 06 2016 07:30
@Octoprism you might want to reduce the size of the image so it will fit into the box
Henry Cabello
@hacu9
Sep 06 2016 07:31
i fixed it adding an extra variable "x" D:
Tracey Bushman
@tbushman
Sep 06 2016 07:31
oh word?
Gerard Hart
@GerardHart
Sep 06 2016 07:32
Hello could some lend me a hand please Im trying to change the color of my BS Nav Bar but my colors not applying
kirbyedy
@kirbyedy
Sep 06 2016 07:33
how about you show us your code, since we cant see your monitor from here :)
Gerard Hart
@GerardHart
Sep 06 2016 07:35
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

.navbar-text > a {
color: inherit;
text-decoration: none
}

.navbar .navbar-default{

background-color:#2C3E50;
}

.navbar-default .navbar-brand{
color:#2C3E50;

}

Maris Lenss
@marislenss
Sep 06 2016 07:38
if you want to apply on whole navbar class then just do:
.navbar{
color: #2C3E50;
}
or add it where the background color is. Not sure which one you want to change
Henry Cabello
@hacu9
Sep 06 2016 07:40
http://codepen.io/cabello986/pen/zKxayx hows it looking? xD i kinda wanna make it fit in like the samples proyect...so it looks like a kind of chat but idk how to do so
Gerard Hart
@GerardHart
Sep 06 2016 07:41
@marislenss do I have to add a style sheet on codepen
my colors inherited my footer nav bar with no prob
Maris Lenss
@marislenss
Sep 06 2016 07:43
@GerardHart codepen has seperate input fields for HTML CSS and JS add everything about style in the CSS
Gerard Hart
@GerardHart
Sep 06 2016 07:43
ok
thank you @marislenss
CamperBot
@camperbot
Sep 06 2016 07:43
gerardhart sends brownie points to @marislenss :sparkles: :thumbsup: :sparkles:
:cookie: 206 | @marislenss |http://www.freecodecamp.com/marislenss
Maris Lenss
@marislenss
Sep 06 2016 07:43
That will keep the HTML part cleaner and you won't have to copy paste styles so much
Nagireddy Srichakradhar Reddy
@srichakradhar
Sep 06 2016 07:46
@kirbyedy thank you so much for the comments...
CamperBot
@camperbot
Sep 06 2016 07:46
srichakradhar sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1348 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Nazim Abdimomunov
@dm-nz
Sep 06 2016 08:50
Hello everyone. How to get weather id from this json? icon = json.weather['id’]; doesn’t work.
{
    "coord": {
        "lon": -0.13,
        "lat": 51.51
    },
    "weather": [
        {
            "id": 500,
            "main": "Rain",
            "description": "light rain",
            "icon": "10n"
        }
    ],
    "base": "cmc stations",
    "main": {
        "temp": 286.164,
        "pressure": 1017.58,
        "humidity": 96,
        "temp_min": 286.164,
        "temp_max": 286.164,
        "sea_level": 1027.69,
        "grnd_level": 1017.58
    },
    "wind": {
        "speed": 3.61,
        "deg": 165.001
    },
    "rain": {
        "3h": 0.185
    },
    "clouds": {
        "all": 80
    },
    "dt": 1446583128,
    "sys": {
        "message": 0.003,
        "country": "GB",
        "sunrise": 1446533902,
        "sunset": 1446568141
    },
    "id": 2643743,
    "name": "London",
    "cod": 200
}
PG2W
@PG2W
Sep 06 2016 08:55
Hey guys, I'm trying to make a rectangular div background behind my image but when I try to resize it, it changes the position of image and size of it too, what am I doing wrong?
Nazim Abdimomunov
@dm-nz
Sep 06 2016 09:00
@dm-nz I’ve got it. It’s icon = json.weather[0]['id’];.
Nazim Abdimomunov
@dm-nz
Sep 06 2016 09:08
@PG2W can you upload it to CodePen?
Abdur Rehman
@HQuser
Sep 06 2016 09:44
This message was deleted
njwda
@njwda
Sep 06 2016 10:53
This message was deleted
Jordi Vilagut Treserra
@jordivilagut
Sep 06 2016 11:07
hi guys! Question:
´´´
tvChannels+="<div class=\"row streamTab\"> <div class=\"col-md-2 streamAvatar\"><img class=\"profPic\" src=\"http://findicons.com/files/icons/1733/msn_messenger_aqua/256/msn_offline.png\"></div><div class=\"col-md-4 streamName\">"+JSON.stringify(twitchData._links.self).split("").splice(38,20).join("")+"</div></div>";
´´´
  tvChannels+="<div class=\"row streamTab\"> <div class=\"col-md-2 streamAvatar\"><img class=\"profPic\" src=\"http://findicons.com/files/icons/1733/msn_messenger_aqua/256/msn_offline.png\"></div><div class=\"col-md-4 streamName\">"+JSON.stringify(twitchData._links.self).split("").splice(38,20).join("")+"</div></div>";
i use the SPLICE method in my Twitch TV API project, but i get as an outcome the opposite that I want.
I want to splice a vector from position 0 to 38, but instead of removing all these positions, I get all the elements in positions 0 to 38 as a result.
someone has an idea why this happens?
thanks
Cormac Curtis
@curtiscormac
Sep 06 2016 11:17
Hi folks - I am trying to get my color change to transition slowly on the Random Quote Generator. Is this possible using the JS I have in this? https://codepen.io/Cormaccurtis/pen/GjRQyy
Andrea Rocca
@ilrock
Sep 06 2016 11:24
@curtiscormac - I’d personally use jquery ui
it make it fairly easy
Andrea Rocca
@ilrock
Sep 06 2016 11:37
Hey guys! Another question on the way

I'm trying to get my body background image to change every few seconds. I'm fetching the images from unsplash and I'm using their JS wrapper unsplash-source-js.

Here you have a quick example -> http://codepen.io/andrearocca/pen/GjgwRx

As you can see, although the setInterval is being executed, the image is not changing. I believe that this is due to the cache.

After every photo.fetch() the URL is always the same -> https://source.unsplash.com/all/random?rain/all/random?rain

hence I assume it goes into the cache. I tried adding the timestamp to the URL, yet unsplash does not return any image.

Any idea of what could be done?

Cormac Curtis
@curtiscormac
Sep 06 2016 11:39
@sfogo5 - many thanks for that!
CamperBot
@camperbot
Sep 06 2016 11:39
curtiscormac sends brownie points to @sfogo5 :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @sfogo5 |http://www.freecodecamp.com/sfogo5
Andrea Rocca
@ilrock
Sep 06 2016 11:43
Not a prob :)
texyh
@texyh
Sep 06 2016 11:43
please how do i make use of the data from the callback function,outside the getStream function
function getStream(name){
  $.getJSON('https://api.twitch.tv/kraken/streams/'+name+'?callback=?', function(data) {
  console.log(data);
}); 
}
Andrea Rocca
@ilrock
Sep 06 2016 11:44
Save them into a global variable
and then access the global variable from anywhere
texyh
@texyh
Sep 06 2016 11:45
@sfogo5 like result = data
where result is global variable
Andrea Rocca
@ilrock
Sep 06 2016 11:45
yeah exactly, that should work
texyh
@texyh
Sep 06 2016 11:48
not working
Andrea Rocca
@ilrock
Sep 06 2016 11:48
Do you have a codepen to share?
texyh
@texyh
Sep 06 2016 11:49
yea
Andrea Rocca
@ilrock
Sep 06 2016 12:08
I see - what about implementing a getter function? That basically returns the data?
texyh
@texyh
Sep 06 2016 12:09
how
Andrea Rocca
@ilrock
Sep 06 2016 12:10
Nope that didn’t make any sense, now that I think about it lol
texyh
@texyh
Sep 06 2016 12:10
lol
i tried returning the data but didnt work
Joël Poulin
@poulinjoel
Sep 06 2016 12:11
Hello, does anybody is familiar with google charts api? I am having problem trying to use it with AngularJs
texyh
@texyh
Sep 06 2016 12:13
yh i knw about this, just reluctant to use it
PG2W
@PG2W
Sep 06 2016 12:16
http://codepen.io/PG2W/pen/RGNqkJ testing if it looks better here
Lukasz
@CatTaker
Sep 06 2016 12:30
hey, any ideas how to change the color of bootstrap nav links?
i manage to do it with active link but how i cant find the normal links and their color
im using only nav and nav-pills class
Alexander Domikov
@AlexanderDom
Sep 06 2016 12:51
@CatTaker link us page with your code if you can, it gonna help us help you
LordYamanouchi
@LordYamanouchi
Sep 06 2016 12:54

@LordYamanouchi
Does anyone know how I can fix this?

$(".glass").click(function showBox(){
  document.getElementById("srch").display= "block";
});

'srch' is an input tag

Alexander Domikov
@AlexanderDom
Sep 06 2016 12:56
@LordYamanouchi document.getElementById("srch").style.display= "block";
or in jquery $("#srch").css("display","block");
LordYamanouchi
@LordYamanouchi
Sep 06 2016 12:59
@AlexanderDom Thanks !
CamperBot
@camperbot
Sep 06 2016 12:59
lordyamanouchi sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 378 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
Sep 06 2016 12:59
you're welcome :)
ahyewlue
@ahyewlue
Sep 06 2016 13:12
Build a Tribute Page
how to do ?
Lukasz
@CatTaker
Sep 06 2016 13:18
@AlexanderDom i manage to fix that so its ok now. Well i cant show my code becayse its on my PC right now :/ Anyway i have another problem i have created navbar-pills and now i want to make this navbar collapse after certain point into the icon with i can open and see menu there can u give me some advice how to start making this?
Alexander Domikov
@AlexanderDom
Sep 06 2016 13:27
@CatTaker you gonna need to add javascript to accomplish this
to see if you attempt to certain point
you attach an event on scroll, not exactly what you want but gonna help you
himanhsu
@Himanshu54
Sep 06 2016 14:09
my tribute page.......... looking for improvements
https://codepen.io/himanshu54/pen/akrPVL
Janina Pohorecki
@janepohorecka
Sep 06 2016 14:21
Hi guys!! I have a quick question! This website: http://projectseen.com/ has different information presented in a layered fashion.. How was this done? I would really like to apply something like this to my portfolio.
*interesting …not different
michele malagnini
@michelemalagnini
Sep 06 2016 14:24
This message was deleted
michele malagnini
@michelemalagnini
Sep 06 2016 14:30
This message was deleted
TrayBanks
@TrayBanks
Sep 06 2016 14:30
trying to set up placeholders and image links to my portfolio page for the projects that I have/will complete. can anyone guide me in the right direction on how to go about that?
http://codepen.io/TrayBanks/pen/NRKvGg
michele malagnini
@michelemalagnini
Sep 06 2016 14:32
i need help about the width of the my tribute page , how can i set a minimum width for my tribute page? http://codepen.io/michelemalagnini/pen/gwObYp
Dylan
@dhcodes
Sep 06 2016 14:35
@michelemalagnini
body {
min-width: 800px;
}
?
@michelemalagnini you might be better off with media-queries depending on what you'er trying to to
吴小每
@antstory
Sep 06 2016 14:37
I can't use the CodePen,why?
michele malagnini
@michelemalagnini
Sep 06 2016 14:40
@dhcodes thanks to the answer , i'm try to replicate this tribute page https://codepen.io/FreeCodeCamp/full/NNvBQW/
CamperBot
@camperbot
Sep 06 2016 14:40
michelemalagnini sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1391 | @dhcodes |http://www.freecodecamp.com/dhcodes
Dylan
@dhcodes
Sep 06 2016 14:42
@michelemalagnini is your project on codepen?
@michelemalagnini that project uses the bootstrap grid to be responsive so it doesn't set a min-width
michele malagnini
@michelemalagnini
Sep 06 2016 14:44
@dhcodes no is the first point of the exercise Build a Tribute Page
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/NNvBQW/.
Dylan
@dhcodes
Sep 06 2016 14:44
it uses a div class
@michelemalagnini I know. Many users build their projects in codepen because then you can share it with others
lol nvm
didn't realize you'd posted your codepen link above
my bad
@michelemalagnini anyway, you can use classes like col-lg-9 or col-md-9 for it to take up 9 of the 12 columns in a bootstrap grid on lg (large) and md (medium) size displays respectively
i gotta run, happy coding!
r2d2
@UsamaHameed
Sep 06 2016 14:49
How do I add audio in my project? (building the simon game)
michele malagnini
@michelemalagnini
Sep 06 2016 14:53
@dhcodes ok i'll try to do ;-) thanks
CamperBot
@camperbot
Sep 06 2016 14:53
michelemalagnini sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:warning: michelemalagnini already gave dhcodes points
TecnoTalk
@TecnoTalk
Sep 06 2016 14:54
This message was deleted
Alex S.
@aszwet1
Sep 06 2016 14:54
hey all, I've got a quick question. Anyone familiar with bootstrap navbar?
TecnoTalk
@TecnoTalk
Sep 06 2016 14:55
This message was deleted
Alex S.
@aszwet1
Sep 06 2016 14:55
I'm trying to get it so that I always have a navigation button fixed right not matter what the width of the page is
TecnoTalk
@TecnoTalk
Sep 06 2016 14:55
Alex S.
@aszwet1
Sep 06 2016 14:55
I'm utilizing the bootstrap navbar any help?
texyh
@texyh
Sep 06 2016 14:56
please why is my api not working http://codepen.io/texyh/pen/XjJmER
Stony Browder
@kalel2319
Sep 06 2016 15:09
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <title>jquery project</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
        </script>

</head>
<body>
<div class= "container"> 
        <div class= "row">
        <div class="col-md-12">
            <div id = "panel1" class= "panel panel-primary">
            <div class="panel-heading">
            <h1>panel1</h1>    
            </div>
            <div class= "panel-body">
            <p1> Content</p1>

            </div>

            </div>

        </div>

    </div>
    <div class= "row">
        <div class="col-md-12">
        <button id="btn1" class="btn btn-primary">click me</button>
        </div>
    </div>

</div>

<script>
    $("document").ready(function() {        

        $("#btn1").on('click', funtion() {
            $("#panel1").slideToggle(200);
        });
    });
    </script>

</body>
</html>
that's with the proper formating sorry for the confusion
Mokubao
@mokubao
Sep 06 2016 15:18
Hi, I just can't seem to make my random quote generator work. even if I followed exactly from a tutorial I found. Can anyone help me find the fault in my code? http://codepen.io/Mokubao/pen/xExxJz
greg
@wearenotgroot
Sep 06 2016 15:21
@mokubao need jquery. add it to the js settings
Dale
@dwhale84
Sep 06 2016 15:25
Hi everyone. I'm just getting started on the twitch viewer and I can't get the API call to work. Anyone know why not? http://codepen.io/dwhale84/pen/kkYVmO?editors=0011
texyh
@texyh
Sep 06 2016 15:26
@dwhale84 check ur console f12
greg
@wearenotgroot
Sep 06 2016 15:26

@texyh the problem is on the html that are trying to append. I re-wrote it

$('.list-group').append('<li class=\"list-group-item users\"><div class="row"><img src=\"' + logo +'\" alt="loading" class="img-circle img-responsive img col-md-2 col-xs-2\"><h3 class=\"col-md-2 col-xs-2 name text-center\">'+name+'</h3><h3 class=\"col-md-8 col-xs-8 watching text-center\">'+ game + status+'</h3></div></li>'
           );

the problem was probably on the quotes, cant pin-point where though

texyh
@texyh
Sep 06 2016 15:26
@wearenotgroot my man! u back
greg
@wearenotgroot
Sep 06 2016 15:27
@texyh :smile:
Dale
@dwhale84
Sep 06 2016 15:28
@texyh "$ is not defined" I don't know what this means.
Tyler Moeller
@TylerMoeller
Sep 06 2016 15:28
@dwhale84 Add jQuery to your app. You can just put this in your HTML: <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Dale
@dwhale84
Sep 06 2016 15:29
@TylerMoeller ahhhh, thank you, need to remember to do that. Thanks!
CamperBot
@camperbot
Sep 06 2016 15:29
dwhale84 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 789 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Mokubao
@mokubao
Sep 06 2016 15:29
@wearenotgroot oh no wonder nothing was running for the past week. Thanks man saved my life!
CamperBot
@camperbot
Sep 06 2016 15:29
mokubao sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1583 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Sep 06 2016 15:29
@mokubao :+1:
texyh
@texyh
Sep 06 2016 15:30
@dwhale84 u should add jquery to ur external javascript
@wearenotgroot i think am having variable declaration issue, the append is not seeing the variables
greg
@wearenotgroot
Sep 06 2016 15:35

@texyh remember $.getJSON are asynchronous. also study the object you get from /stream and /channel. you need to access data differently.

example on /stream to access display_name you need

data.stream.channel.display_name

vs
on /channel

info.display_name;
im trying to get my image with my nav bar
but i have no idea what im not doing right to get it in there
D0tM
@D0tM
Sep 06 2016 15:39
good afternoon guys
Ken Haduch
@khaduch
Sep 06 2016 15:40
@WesSchulte - do you mean that you want the picture contained in the navbar? Right now you have it coded to be after your "About" statement?
D0tM
@D0tM
Sep 06 2016 15:40
i am trying to build an html theme and i am struggling with some css hover effects, i have got these online http://tympanus.net/Development/HoverEffectIdeas/index.html
the core of the theme is written with bootstrap so the classes of the effects and bootstrap's classes are having a conflict
what i can do to use these hovers with bootstrap?
Wesley Schulte
@WesSchulte
Sep 06 2016 15:41
@khaduch sorry I meant to say I want my image next to my first paragraph
Ken Haduch
@khaduch
Sep 06 2016 15:47
@WesSchulte - are you trying to use bootstrap? If you set up a row using the bootstrap grid, you can easily set them side-by-side and then have it do something different on a mobile device?
Wesley Schulte
@WesSchulte
Sep 06 2016 15:48
@khaduch do you know where I can find the proper bootstrap code to use?
Ken Haduch
@khaduch
Sep 06 2016 15:51

@WesSchulte - first, you have to load bootstrap.css, which has a quick access link on the CSS config tab. Then you would just set up a row, something like this within your container div:

<div class="row">
    <div class="col-md-6">
        <img ...
    </div>
      <div class="col-md-6">
        About text
    </div>
</div>

That would give you two evenly sized columns. You can adjust accordingly after you see what it looks like.

The important thing is that you have to make sure you account for 12 columns in the row, so if you change from 6 and 6, make it 4 and 8, etc. You can also fill some columns with nothing to make it just fill the space, so you compact your content toward the center of the page, etc. Lots of options, including ways to shift the columns over, etc.

Wesley Schulte
@WesSchulte
Sep 06 2016 15:52
@khaduch I'll get to work, thank you!!
CamperBot
@camperbot
Sep 06 2016 15:52
wesschulte sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1633 | @khaduch |http://www.freecodecamp.com/khaduch
Collage5678
@Collage5678
Sep 06 2016 15:52
@D0tM try getting on CodePen and looking at some portfolio pages, or anything that has a hover like you're looking for. Then look at their code. I personally am not sure how to d that, so that is my best option
DumeD
@DumeD
Sep 06 2016 15:55
why the main is going so up on this page? http://codepen.io/emud/pen/rraRdx
Ken Haduch
@khaduch
Sep 06 2016 15:56
@D0tM - what is not happening on your page with the hover effects that you are expecting to see? It looks like lots of nice hovering stuff going on?
Collage5678
@Collage5678
Sep 06 2016 15:58
@khaduch I think he left this room, but that was a page he was basing what he wanted to do off of. I think. He wanted to create something like that.
Ken Haduch
@khaduch
Sep 06 2016 15:59
@DumeD - all of that positioning and transforming is moving your content around, so I think that's what's happening - you are shifting it out of the normal position. What are you trying to achieve with that positioning, and the html width and height setting?
DumeD
@DumeD
Sep 06 2016 16:02
@khaduch i'm copying a template from bootstrap and doing it by myself, i had hard time with a cover image and i have tried some positioning
bu no-one didn't work
Ken Haduch
@khaduch
Sep 06 2016 16:02
@DumeD - I just removed the translateY setting after a bit of investigation, and it brings the content back down to the normal position.
billpzt
@billpzt
Sep 06 2016 16:03
Hello! I'm almost done with the Random Quote Machine but my Twitter button only shares the page URL and not the quote. I don't know what I should modify in my script to make that happen, can anyone help?
$(document).ready(function() {
  var cont=0;
  $('#newQuoteButton').on('click', function() {
    var url="http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]="+cont+"&callback=";

    $.getJSON(url, function(data){
    var quote = data[0].content; 
    var author = data[0].title; 

    cont += 1;  

    $("#blockquote").html(quote); 
    $("#author").html("- " + author);
      $('#btn-twitter').attr('href','https://twitter.com/intent/tweet?text=' + quote);

    console.log(JSON.stringify(data));
    });
  });
});

window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  $('#btn-twitter').attr('href','https://twitter.com/intent/tweet?text=' + quote);

  return t;
}(document, "script", "twitter-wjs"));
DumeD
@DumeD
Sep 06 2016 16:03
@khaduch yeha but it brings down just the text, how do i make the .main cover all the body?
so when you enter the page you see just the .main
Ken Haduch
@khaduch
Sep 06 2016 16:07
@DumeD - how about if you set the bg-primary section to be hidden? Set it to display: none; and then you can use the jQuery .toggle() method or other code to expose it?
billpzt
@billpzt
Sep 06 2016 16:12
Ok, will try the JavaScript forum!
DumeD
@DumeD
Sep 06 2016 16:14
@khaduch i'd like to use just css
i tried giving .main a height of 100
%
@khaduch with an height of 600 px it works
but is there any other way to do it without setting a fixed heigth?
Moisés Man
@moigithub
Sep 06 2016 16:20
@billpzt remove the last part from window.twttr = (function(d, s, id) {
and i suppose ur #btn-twitter is an a(anchor) element ?
billpzt
@billpzt
Sep 06 2016 16:32
@moigithub Ok, will try that, but if I remove that part won't it also stop producing a popup window? I 'd still prefer to have the window...
Moisés Man
@moigithub
Sep 06 2016 16:33
@billpzt r u doing on codepen ?? share a link ?
popup ?? not sure :P
Tyler Moeller
@TylerMoeller
Sep 06 2016 16:33
@DumeD If you're trying to get the orange part to stick to the bottom, do this with your CSS:
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.main {
  margin-top: 0;
  flex: 1 0 auto;
}
I couldn't find anyone to explain to me how to make the share button, I didn't understand the documentation, and when I analyzed the random design quotes page the <a> anchor tag already had the quote inside. I don't know how to do that. So I just copied code from Twitter, and after some help here from the forum it worked, but I don't know how, so I don't know how to modify it...
Ken Haduch
@khaduch
Sep 06 2016 16:56
@DumeD - are you planning to have something similar to a "tabbed" effect on the page? Click on another link and bring that portion of the site into view? I don't know if there is a way to do that with just CSS - to have a single div fill the entire viewport and have the others just be nowhere, other than by hiding them?
@billpzt - I found that the information in this stackoverflow article: http://stackoverflow.com/questions/10486354/dynamically-change-tweet-button-data-text-contents was helpful. I don't know if it is the best way? Or if it is the only way?
DumeD
@DumeD
Sep 06 2016 16:59
@khaduch my css was a mess :worried: , i deleted it all and i'll start it all over again. i'll try put more attention on what i'm doing.
@khaduch thanks anyway for your help :smile: :+1:
CamperBot
@camperbot
Sep 06 2016 16:59
dumed sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1634 | @khaduch |http://www.freecodecamp.com/khaduch
Darren
@evilfrenchguy
Sep 06 2016 17:00

could someone explain why my window.onload doesn't seem to read my global object literal's properties?

https://codepen.io/evilfrenchguy/pen/mAyxwj?editors=1011

kirbyedy
@kirbyedy
Sep 06 2016 17:04
@billpzt no idea why so much code for the twitter quote, I used a very simple solution, check the code I think its not hard to understand:
 $("#tweet").on("click", function() {
    window.open("http://twitter.com/home/?status=" + $("#quote").text());
  });
Stephen James
@sjames1958gm
Sep 06 2016 17:07
@evilfrenchguy The this inside the function that sets weather data is not the correct this.
You can do something like this (add variable that)
    init: function() {
      var that = this;
   . . .
  that.weatherData = JSON.parse(data);
Darren
@evilfrenchguy
Sep 06 2016 17:08
oh? what is this equal to in processData, the response object?
Stephen James
@sjames1958gm
Sep 06 2016 17:09
@evilfrenchguy Probably the global object (window) since you don't call that function on any object.
billpzt
@billpzt
Sep 06 2016 17:09
@khaduch Thanks, I'll read it!
@kirbyedy I asked a lot and looked around a lot for help or a solution and couldn't find any, finally I copied and pasted code from Twitter! Thanks for the tip!
@moigithub Thank you also for taking interest in my question!
CamperBot
@camperbot
Sep 06 2016 17:09
billpzt sends brownie points to @khaduch and @kirbyedy and @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2120 | @moigithub |http://www.freecodecamp.com/moigithub
:star2: 1635 | @khaduch |http://www.freecodecamp.com/khaduch
:star2: 1355 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Moisés Man
@moigithub
Sep 06 2016 17:11
@billpzt without using the twitter widget (script) adding an anchor element without any classes
<a href="#" id ="twiter" target="_blank">tweetme</a>
and from ur script changin the href like u doing
$('#btn-twitter').attr('href','https://twitter.com/intent/tweet?text=' + quote); works..
but.. no popup.. but instead it opens in a new tab
Darren
@evilfrenchguy
Sep 06 2016 17:11
@sjames1958gm i see that makes sense. thank you!
CamperBot
@camperbot
Sep 06 2016 17:11
evilfrenchguy sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3118 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Moisés Man
@moigithub
Sep 06 2016 17:12

@billpzt if u still wanna the small popup window .. using the twitter widget u need to use createShareButton function https://dev.twitter.com/web/tweet-button/javascript-create
basicly u need to keep the code u have below... (the one i told u to remove) OR.. just include this https://platform.twitter.com/widgets.js on ur JS settings
add a placeHolder on ur html..where the button will be located
<div id="theTwitterButton"></div> <-- no <a> needed
and finally on ur js code

twttr.widgets.createShareButton(
  '',
  document.getElementById('theTwitterButton'),
  {
    text: quote  // ur variable
  }
);

the widget/twitter script will create the link for u

billpzt
@billpzt
Sep 06 2016 17:15
@moigithub Wow, that's a lot of info. Give me a moment to digest this :smile:
billpzt
@billpzt
Sep 06 2016 17:25
@moigithub So where do I include the create Share Button function?
Inside all that Twitter code I already have or outside of it?
Moisés Man
@moigithub
Sep 06 2016 17:25
inside ur getJSON callback..
replace $('#btn-twitter').attr('href','https://twitter.com/intent/tweet?text=' + quote);
billpzt
@billpzt
Sep 06 2016 17:26
@moigithub :+1:
@moigithub got an "unexpected end of input" error
Moisés Man
@moigithub
Sep 06 2016 17:30
u have some missplaced closing } )
billpzt
@billpzt
Sep 06 2016 17:31
@moigithub Don't know where, all I did was remove that line and paste yours!
Moisés Man
@moigithub
Sep 06 2016 17:32
ah.. actually are missing some at the end
BUT...
since u including the https://platform.twitter.com/widgets.js on the codepen JS setting.. u no need the last part
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
}); // was missing..
but u can remove all that
that code creates a <script src="https://platform.twitter.com/widgets.js"></script> on ur code...
if u include on the JS section codepen will do the same
Daniel
@DanielMW34
Sep 06 2016 17:37
Hey all, has anybody completed the TwitchTV exercise? I have some trouble testing if the stream value is null and I cannot figure out what is going wrong? http://codepen.io/Daniel_Widrich/pen/YGzokv
Tyler Moeller
@TylerMoeller
Sep 06 2016 17:41
@DanielMW34 remove the quotes around "null": data.stream === null or do if(!data.stream)
if (data.stream === null) $("#test1").html("stream is not active");
if (!data.stream) $("#test1").html("stream is not active");
Daniel
@DanielMW34
Sep 06 2016 17:45
@TylerMoeller THANK YOU
CamperBot
@camperbot
Sep 06 2016 17:45
danielmw34 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 791 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Daniel
@DanielMW34
Sep 06 2016 17:45
You are the man!
I've been struggling with that for a while now and I knew it was something really simple.
Tyler Moeller
@TylerMoeller
Sep 06 2016 17:46
Happy to help!
Daniel
@DanielMW34
Sep 06 2016 17:46
What is it about the quotes around "null" does that make it a string value vs. a pure null ?
Tyler Moeller
@TylerMoeller
Sep 06 2016 17:46
Exactly - it thinks it's a string instead of an actual false/missing value
Dale
@dwhale84
Sep 06 2016 17:47
Hi all, I've got a problem with my Twitch viewer I can't figure out. I'm able to sort the online/offline streamers fine, but I can't get it to register the disabled accounts. http://codepen.io/dwhale84/pen/kkYVmO?editors=1011
wait nevermind
figured it out on my own
live long and prosper, y'all
Daniel
@DanielMW34
Sep 06 2016 17:48
@TylerMoeller Gotcha. What about the if (!data.stream) --- I assume that syntax implies something like "if data.stream is not returning a value, then..."
I've never come across that syntax format before
Tyler Moeller
@TylerMoeller
Sep 06 2016 17:49
@DanielMW34 Yes, it's a simplified way to check whether or not data.stream exists.
Also useful for checking whether or not a variable has a value:
  var b;
  if (!b) console.log('b does not have a value');
Daniel
@DanielMW34
Sep 06 2016 17:51
@TylerMoeller so that is checking to see if it exists or if it returns a value that is not null... I'm a bit confused on what exactly that is checking for... existence vs. value / value vs. null ?
Stephen James
@sjames1958gm
Sep 06 2016 17:53
@DanielMW34 !x is true if x is falsy (null, 0, "", NaN, false, undefined) (in this case it is null if offline)
Flashards
@Flashards
Sep 06 2016 17:55
What am I doing wrong if my browser shows <br/> tags in text?
Daniel
@DanielMW34
Sep 06 2016 17:56
</br>
<br>
syntax
Flashards
@Flashards
Sep 06 2016 17:56
Tried them as well
Daniel
@DanielMW34
Sep 06 2016 17:57
link?
Tyler Moeller
@TylerMoeller
Sep 06 2016 17:57
@DanielMW34 what @sjames1958gm said :) it's about truthy/falsy values.
Flashards
@Flashards
Sep 06 2016 17:57
@DanielMW34 <div id="nav">
Dr House < br>
True Detective < br>
Breaking Bad < br>
big Bang Theory < br>
Z Archiwum X < br>
    </div>
Daniel
@DanielMW34
Sep 06 2016 17:57
there are spaces there between < and br
Flashards
@Flashards
Sep 06 2016 17:58
@DanielMW34 wow, now it works.
@DanielMW34 thanks
CamperBot
@camperbot
Sep 06 2016 17:58
flashards sends brownie points to @danielmw34 :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @danielmw34 |http://www.freecodecamp.com/danielmw34
Daniel
@DanielMW34
Sep 06 2016 17:58
@Flashards you're welcome
Flashards
@Flashards
Sep 06 2016 17:59
@DanielMW34 I was pretty sure all the tags in HTML work even if u make some spaces between < >
Daniel
@DanielMW34
Sep 06 2016 18:01
@Flashards don't make the spaces... in that case (a line break) there is no id, class, etc. and that element may not support such things (although perhaps it would support a class that allows the size of the line break to be adjusted)
regardless, don't make the space
Josh
@72undead
Sep 06 2016 18:02
Greetings everyone
would someone be able to message me, I have a couple front end questions for a personal project.
never mind fixed it
George Mamar
@georgem3
Sep 06 2016 18:04
@72undead not exactly an expert, but feel free to message me
melisa pettaway
@mpettaw2
Sep 06 2016 18:49
hello i am working on the pomodoro clock challenge
can anyone tell me why my controls are not working before i start the clock
you have to click the circle for the clock to start
sentedelviento
@sentedelviento
Sep 06 2016 18:53
So I set two divs to have the same viewport width and height, however they are not the same size.
There's a small gap in height between .circle and .wrapper-box
I tried to simplify the problem as much as possible
but I'm not sure what is causing the gap
Tyler Moeller
@TylerMoeller
Sep 06 2016 18:55

@mpettaw2 It's a scope issue, when you click the button it correctly updates the number as you can see in the console, but outside of that function, the value of breakNum is still 1.
for example, this will work:

var breakNum = 1;

fast.addEventListener('click', function() {
  breakNum = breakNum + 1;
  breakVal.innerHTML = breakNum;
  console.log(breakNum);
});

slow.addEventListener('click', function() {
  breakNum = breakNum - 1;
  breakVal.innerHTML = breakNum;
  console.log(breakNum);
});

But this won't:

var breakNum = 1;

fast.addEventListener('click', function() {
  breakNum = breakNum + 1;
  console.log(breakNum);
});

slow.addEventListener('click', function() {
  breakNum = breakNum - 1;
  console.log(breakNum);
});

breakVal.innerHTML = breakNum;
sentedelviento
@sentedelviento
Sep 06 2016 18:58
I simplified the problem even more
it seems like basic arithmetic
16vw - 1vw (for border) - 1vw (for additional border) = 14vw
yet when I set the child with 14vw, it doesn't fit properly
And yes, when you run the pen from desktop it might look like it is correct
but if you open the developer tools
you'll quickly realize that resizing it can easily cause a gap
melisa pettaway
@mpettaw2
Sep 06 2016 19:01
@TylerMoeller thank you!
CamperBot
@camperbot
Sep 06 2016 19:01
mpettaw2 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 792 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Utkarsh Bhimte
@Utkarshbhimte
Sep 06 2016 19:26
hey, this is my repo hosted via gh-pages, https://utkarshbhimte.github.io/Snazzy/ and for some reason it is not loading js/script.js
Tyler Moeller
@TylerMoeller
Sep 06 2016 19:41
@sentedelviento I can't really explain why, would have to study this some more...but this works :)
.container {
  width: 16vw; 
  height: auto;
  border: 1vw solid black;
  margin: 0 auto;
}

.child {
  width: auto; 
  height: 14vw;
  border: 1vw solid #654321;
}
codercooooder
@codercooooder
Sep 06 2016 20:05
hey guys I need some help with svg animation
if you are good with css and svg animation raise your hands! :)
Anukath
@Anukath
Sep 06 2016 20:07
Darren
@evilfrenchguy
Sep 06 2016 20:10
the layout is a bit strange. the header text tends to overlap the picture
Anukath
@Anukath
Sep 06 2016 20:11
try opening in another tab @evilfrenchguy
Darren
@evilfrenchguy
Sep 06 2016 20:12
that's what i did. it could use a bit more flexible layout
Anukath
@Anukath
Sep 06 2016 20:12
what do you suggest?
Kyle W Pilkinton
@tadake
Sep 06 2016 20:13
Hey guys is webGL a good thing to invest some time learning? What are some things i could learn to do with it within a few months? Does anyone know some of the things its well used for ?
codercooooder
@codercooooder
Sep 06 2016 20:17
where are my svg peeps?
Darren
@evilfrenchguy
Sep 06 2016 20:17
@Anukath it looks like bootstrap? im not super familar with that framework so im not sure. maybe text-align the image and auto margin it's parent?
codercooooder
@codercooooder
Sep 06 2016 20:17
I need help getting this to animate: http://codepen.io/ihatecoding/pen/LREOPW
I want the footer to have a css transition but the usual code isn't working (maybe because of my js):http://i.stack.imgur.com/mLM6m.gif
Darren
@evilfrenchguy
Sep 06 2016 20:19
@Anukath or just leave it's parent div at default width
Anukath
@Anukath
Sep 06 2016 20:20
@evilfrenchguy image will be too big
Darren
@evilfrenchguy
Sep 06 2016 20:24
no, keep it the same size. if you text-align an inline element it will center it in it's parent element
Anukath
@Anukath
Sep 06 2016 20:24
okay.. i will try that..
vincentwue
@vincentwue
Sep 06 2016 20:40
hey guys how can i import libraries like https://github.com/Caged/d3-tip/blob/master/docs/index.md in codepen? its a really basic question but i really just see bower or npm and no link to include it into html header
codercooooder
@codercooooder
Sep 06 2016 20:47
@VincentWue i can tell you
github hosts files now, but i forget what it is called
o you just wnated to know where to paste it
you go to settings on the upper right hand corner
what is filetype md?
codercooooder
@codercooooder
Sep 06 2016 20:56
ahh markdown ok
codercooooder
@codercooooder
Sep 06 2016 21:07
@VincentWue this is what I was thinking of -you can github files here: https://rawgit.com/, i doubt you want the md file though
Nick Irvine
@irvin3
Sep 06 2016 21:19
hey guys! would anyone be interested in taking a look at my Simon game code? im having a slight issue with getting the colors to display as a sequence instead of all at the same time (or thats what it looks like at least)
vincentwue
@vincentwue
Sep 06 2016 21:27
@codercooooder im really glad about your kind explanation :D i just keep laughing about my own imperfection and blindness, and hope it will get better sometimes near in the future :D
@codercooooder shit i mean the library, not the md file bro, maybe im too fucked up today to get it
codercooooder
@codercooooder
Sep 06 2016 21:33
@VincentWue he has example files on his main project page
the header looks like this @VincentWue :
  <title>d3.tip.js - Tooltips for D3</title>
  <meta charset="utf-8" />
  <title>Example styles</title>
  <script type="text/javascript" src="../bower_components/d3/d3.js"></script>
  <script type="text/javascript" src="../index.js"></script>
  <link rel="stylesheet" href="example-styles.css">
  <style type="text/css">
@VincentWue that's just one example
but he has two .js files
you could upload those to @rawgit, then put those in your settings on your codepen
(you would use the rawgit url though, @VincentWue )
Do you understand why ?
vincentwue
@vincentwue
Sep 06 2016 21:37
so you need to look up the exact files you need for every library you want to use and import it with rawgit url
GitHub serves them with a Content-Type header set to text/plain. As a result, most modern browsers won't actually interpret these files as JavaScript, CSS, or HTML and will instead just display them as text.
thats the reason
Caleb Forbes
@aragothofdagobah
Sep 06 2016 21:39
This message was deleted
codercooooder
@codercooooder
Sep 06 2016 21:40
github can serve as .js @VincentWue
vincentwue
@vincentwue
Sep 06 2016 21:41
@codercooooder so whats the answer of your question ? :D (Do you understand why ?)
codercooooder
@codercooooder
Sep 06 2016 21:43
YOu need to import the files you will use @VincentWue
and I do think you need to know which ones you are using. @VincentWue
rawgit is a place you can host them if it is for private use, otherwise you can put them on your local server and call the files locally @VincentWue
if you are making a big public page with lots of traffic, rawgit will detect it and shut down access to the hosted js files
until you figure out which files you need specificall you can link them all @VincentWue
vincentwue
@vincentwue
Sep 06 2016 21:46
yeah i read about it, but its feels so impractial
all of them? :D and there is no folder like /bower_components/d3/d3.js :D
man, it cant be that awkward
thanks for the link
codercooooder
@codercooooder
Sep 06 2016 21:50
@VincentWue you can't make folders on rawgit
vincentwue
@vincentwue
Sep 06 2016 21:51
how can i get a url with rawgit when i cant find the file on github?
codercooooder
@codercooooder
Sep 06 2016 21:51
@VincentWue I think you would only use two files, most of his examples have only these two:
  <script type="text/javascript" src="../bower_components/d3/d3.js"></script>
  <script type="text/javascript" src="../index.js"></script>
@VincentWue go to raw git, I bet you'll be able to figure out - the page makes it super easy to figure it out - really clear
you can get the file on github
vincentwue
@vincentwue
Sep 06 2016 21:52
i know what to do, but try to find the file ../bower_components/d3/d3.js in github, there is just the index.js in the root folder
codercooooder
@codercooooder
Sep 06 2016 21:55
here, is this the same library: https://d3js.org/
there's a zip file and it has a file called d3.js, I have no idea if it iswhat you need
vincentwue
@vincentwue
Sep 06 2016 21:59
so the author of the library just saved his d3 lib there in this example, but how can i know that he did not write a new d3.js for his purposes
codercooooder
@codercooooder
Sep 06 2016 21:59
@VincentWue i don't know
to be honest, i dont' knwo what this bower component thing is, maybe you need someone else's help.
but that's how you can link individual js github files...now you know.
i don't understand this fancy compiling md stuff.
vincentwue
@vincentwue
Sep 06 2016 22:00
you know this little things confuse me :D thanks bro, you helped me a lot
codercooooder
@codercooooder
Sep 06 2016 22:00
im a girl. but ok
you are welcome
vincentwue
@vincentwue
Sep 06 2016 22:00
sorry :D
i thank you for your patience :)
Coy Sanders
@coymeetsworld
Sep 06 2016 22:02
you can also get d3 from cdn, that's what I use: https://cdnjs.com/libraries/d3
keep in mind the versioning, v4 has several differences to v3
vincentwue
@vincentwue
Sep 06 2016 22:04
thanks coy, i just ask myself why not all libraries provide something like this: <script src="https://d3js.org/d3.v4.min.js"></script>
or do this libraries just have their own cdn?
Coy Sanders
@coymeetsworld
Sep 06 2016 22:04
I would imagine because CDNs cost money
but can't say for certain, i'm sure the popular enough ones get on there but hard to cover every library as there are many
vincentwue
@vincentwue
Sep 06 2016 22:05
suree :D but know i understand why its missing sometimes :D
@coymeetsworld finally its just a server providing a some kb big file lol
to a lot of requesters
Coy Sanders
@coymeetsworld
Sep 06 2016 22:10
oh you mean CDN? yeah thats what it does
LordYamanouchi
@LordYamanouchi
Sep 06 2016 22:11
Hey, how can I make this work?
.cancel{
  display: none;
}
input[type=text]{
  display: block;
  position: fixed;
  left: 350px;
  top: 200px;
  width: 50px; 
  height: 30px;
  border-radius: 20px;
  background-color: transparent;
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus{
  display:block;
  width: 300px;
}
input.cancel:focus{
  display:inline-block;
}
Coy Sanders
@coymeetsworld
Sep 06 2016 22:11
also has high availablilty as the content is stored in multiple locations so its pretty close to being guaranteed
LordYamanouchi
@LordYamanouchi
Sep 06 2016 22:12
I want that the the cancel button is displayed when the textbox is being 'focused' on.
Coy Sanders
@coymeetsworld
Sep 06 2016 22:12
and I don't think anything hosted on another CDN would take away from your total bandwidth of your host which is also a cost saving measure
Coy Sanders
@coymeetsworld
Sep 06 2016 22:19
you might want to use JavaScript for that @LordYamanouchi
LordYamanouchi
@LordYamanouchi
Sep 06 2016 22:19
@coymeetsworld How would I do that ?
Coy Sanders
@coymeetsworld
Sep 06 2016 22:19
not sure if theres a way to change CSS on a different element than one you're acting on
melisa pettaway
@mpettaw2
Sep 06 2016 22:19
does anyone know of any sites where there are links to wav files
Coy Sanders
@coymeetsworld
Sep 06 2016 22:19
jQuery would be a place to start
melisa pettaway
@mpettaw2
Sep 06 2016 22:20
i don't want to download just a link to it
Coy Sanders
@coymeetsworld
Sep 06 2016 22:21
nothing that I can think of @mpettaw2, I would just do a google search for it depending on what sounds you want
why wav specifically instead of something like mp3?
Theo M.
@cnngraphics
Sep 06 2016 22:23
Format Factory is a free opensource software that converts any file to any format... enjoy _ Just be carefull when installing it to not install the junk they will suggest to you... "Free" means the want you to install other stuffs, but it is a clean software
vincentwue
@vincentwue
Sep 06 2016 22:23
@coymeetsworld i still dont get it working :( http://codepen.io/vinceeent/pen/BLyqAY?editors=1111
melisa pettaway
@mpettaw2
Sep 06 2016 22:24
@coymeetsworld doesn't really matter. i just need some type of alarm noise
Theo M.
@cnngraphics
Sep 06 2016 22:24
Google! :-)
melisa pettaway
@mpettaw2
Sep 06 2016 22:24
but all the sites i have been do ask for you to download.
Coy Sanders
@coymeetsworld
Sep 06 2016 22:24
what's not working @VincentWue ? i see the graph rendered
melisa pettaway
@mpettaw2
Sep 06 2016 22:24
ok
Coy Sanders
@coymeetsworld
Sep 06 2016 22:25
you could host the wav files on your own too @mpettaw2, I use dropbox for my external content in my codepens
I have used this for years... clean and no gommick... it;s from an university
vincentwue
@vincentwue
Sep 06 2016 22:26
haha @coymeetsworld the tooltip popup where (year and $ etc) appears when you mouseover a bar
melisa pettaway
@mpettaw2
Sep 06 2016 22:26
@coymeetsworld nice thank you. @cnngraphics i will look into it as well
CamperBot
@camperbot
Sep 06 2016 22:26
mpettaw2 sends brownie points to @coymeetsworld and @cnngraphics :sparkles: :thumbsup: :sparkles:
:cookie: 36 | @cnngraphics |http://www.freecodecamp.com/cnngraphics
:star2: 1358 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
vincentwue
@vincentwue
Sep 06 2016 22:26
(the library :D:D)
Coy Sanders
@coymeetsworld
Sep 06 2016 22:28
not sure @VincentWue, why do your rects have class mouseout?
vincentwue
@vincentwue
Sep 06 2016 22:29
assume doit() is a defined question which does not takes parameters. when can you call it with: doit, and when do you need to call it with parentheses: doit();
in this example code: https://github.com/Caged/d3-tip the methods tip.show is called without parentheses, and in my code its just working with ()
why?
Coy Sanders
@coymeetsworld
Sep 06 2016 22:30
hmm not sure, not familiar with that library. I only used jQuery and d3 for mine
vincentwue
@vincentwue
Sep 06 2016 22:31
i know why, found the answer, tip.show is referring to the whole function rather than the returning value
and its passed as a callback method within .on("mouseover", tip.show)
and i created my own and tried to call it without parentheses in my own :D okay, maybe someone interests it
rather than calling the function! it return the function, not call it :D
returns
calls
my english sucks
Coy Sanders
@coymeetsworld
Sep 06 2016 22:37
ah I see
interesting
yeah the tooltip stuff has been annoying for me, mine was crap didn't care :) maybe ill go back to it later
did a little better 2nd time around on scatterplot
vincentwue
@vincentwue
Sep 06 2016 22:40
starting to work with a new framework sucs
sucks
*lib
luis4flames
@luis4flames
Sep 06 2016 22:43
So i got to the section where i have to create a quote generator, but I am clueless about how to even start using an API. Ive searched online for tutorials, but they all just bombard you a load of info that seems like they expect you to know how to form it already. I honestly cant even manage to see where to attack this from. Any advice on how you guys first handled it?
vincentwue
@vincentwue
Sep 06 2016 22:45
read code write code @luis4flames
go through http://www.w3schools.com/ tutorials a bit superficial,
then go in deep with the things you need
you learn when you implement
somoking
@somoking
Sep 06 2016 23:02
hey guys i have a tribute page and have been running into some issues
never mind
Jason Luboff
@JLuboff
Sep 06 2016 23:12
@luis4flames In case you didn't see my response in the other chat...
@luis4flames I ended up creating an array of quotes for my quote generator as it didn't specify we had to use an API. However, if you do want to use an API, I found the .getJSON function to be fairly straight forward. .getJSON(API-URL, function(data){ console.log(data); } which be an easy way to see the data that is being returned from the API
Ken Haduch
@khaduch
Sep 06 2016 23:16
@luis4flames - definitely start with an array of quotes that you collect yourself - get the idea of how that works, how to style the page, etc. Then if you want to tackle an API (or come back to it later after you get more familiar with API and the various JSON and AJAX functions) and rework it. Don't get hung up on feeling like you don't know enough. As @VincentWue said - read code, write code - do some other tutorials. You'll learn as you go along.
Emmanuel Okoh
@jamesarry
Sep 06 2016 23:17
I need some help. I want to build tribute page. Do I need to build just like the example given?
Jason Luboff
@JLuboff
Sep 06 2016 23:19
@jamesarry No, you can make it your own
Just complete the necessary bullets
luis4flames
@luis4flames
Sep 06 2016 23:20
@khaduch Gotcha, Appreciate the input!
Emmanuel Okoh
@jamesarry
Sep 06 2016 23:26
Thanks
Ed Sztukowski
@Burgustu
Sep 06 2016 23:43
@luis4flames I found that the weather app is a better introduction to APIs anyway
I did an API for the quote generator and it was a definite learning curve
luis4flames
@luis4flames
Sep 06 2016 23:45
@Burgustu I would believe so because there arent too many open APIs for quote generators, where as something like a weather app is more common. I'll just come back to it and edit it later.
Ed Sztukowski
@Burgustu
Sep 06 2016 23:46
exactly, it was a pain finding a quote API in the first place
somoking
@somoking
Sep 06 2016 23:53
god damn i the z index is so perfect