These are chat archives for FreeCodeCamp/HelpFrontEnd

10th
May 2017
Matt
@mdmpdx
May 10 2017 00:01
hello, I'm working on the Wikipedia API search... I'm getting the data correctly from JSON and I'm able to concatenate a string of HTML markup using content from JSON results. I have that happening in a forloop and it displayed everything (all 20 results) in the console. However, when I'm trying to use insertAdjacentHTML to get it rendered in the actual page, it doesn't display anything and also causes the for loop to only log one result in Console instead of all 20. I'm wondering what I'm doing wrong, is this even the right approach/thinking to use? https://codepen.io/mdmpdx/pen/GmyWLg
Gulsvi
@gulsvi
May 10 2017 00:01
@chocobrownie Yeah, no background image for me
Matt
@mdmpdx
May 10 2017 00:02
Browser console is saying that insertAdjacentHTML is not defined but I'm not sure why -- I've not used this method before so I'm finding my way
Gulsvi
@gulsvi
May 10 2017 00:03
@mdmpdx You aren't telling it what element to insert the adjacent HTML next to. For example: document.body.insertAdjacentHTML(...)
You could use jQuery's .append() instead, however. It's perfectly fine to do, but I've been discouraged from mixing vanilla JS methods with jQuery when it isn't necessary.
Matt
@mdmpdx
May 10 2017 00:05
@SkyCoder01 I thought that declaring var displayResults = document.getElementById."displayResults"); atop the JS would do that
John Edwards
@javajohnHub
May 10 2017 00:05
anyone here familar with jquery smooth scroll....any example i try to implement goes haywire
Gulsvi
@gulsvi
May 10 2017 00:06
@mdmpdx You're reassigning that value with the = equal sign. Do this instead: displayResults.insertAdjacentHTML('beforeend', entryHTML);
The syntax is element.insertAdjacentHTML()
Matt
@mdmpdx
May 10 2017 00:07
@SkyCoder01 ah! the syntax always seems to trip me up :) thanks for your continued help and suggestions!
CamperBot
@camperbot
May 10 2017 00:07
mdmpdx sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1340 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 10 2017 00:07
No problem, glad that helped
@mdmpdx The jQuery way to do it would be: $('#displayResults').append(entryHTML);
Or, nice and clean with a template literal:
        $('#displayResults').append(
          `<div>
            <a href="${entryHREF}" target="_blank"><h1>${entryTitle}</h1></a>
            <p>${entrySummary}</p>
           </div>`
        );
Matt
@mdmpdx
May 10 2017 00:12
@SkyCoder01 I'm using jquery already anyway for getJSON so that method is likely a cleaner solution
Garo
@Garabed96
May 10 2017 00:16
somewhat of an information overload for the twitchTv json api, can anyone direct me to what we actually need from twitch docs
do we need to do authentication
Garo
@Garabed96
May 10 2017 00:28
https://codepen.io/CapGaro/pen/aWVZyJ that's what I got so far
Long Nguyen
@longnt80
May 10 2017 00:48
@Garabed96
i got stuck with getting the API too
Gaston Vargas
@goldcoin93
May 10 2017 01:08
is anyone available for a private chat? I am building my portfolio and Im stuck in several points. Thank you very much
Augusto
@hackedWifi
May 10 2017 01:08
I am usint .ajax on my wiki viewer but how in the world I reload the content on every search
I have tried $.getJSON() but nothing works. It only appends the content
TayCodes
@TayCodes
May 10 2017 01:10
https://codepen.io/dev999/pen/zwRoKL Why is my function not returning name please?
Sam
@Samwise12
May 10 2017 01:11
Does anyone know how to get the req.body array from an xhr into mongodb or mongoose??
Augusto
@hackedWifi
May 10 2017 01:11
@TayCodes return ret, name
the + adding those?
Thayanne Luiza
@thayannevls
May 10 2017 01:13
@TayCodes you need to declare variable ret out of your function
TayCodes
@TayCodes
May 10 2017 01:15
@hackedWifi Thanks but it still throws an error I dont know why https://codepen.io/dev999/pen/zwRoKL
CamperBot
@camperbot
May 10 2017 01:15
taycodes sends brownie points to @hackedwifi :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @hackedwifi |http://www.freecodecamp.com/hackedwifi
Augusto
@hackedWifi
May 10 2017 01:17
@TayCodes it says ret is undefined;
Thayanne Luiza
@thayannevls
May 10 2017 01:18
@TayCodes If you declare a variable inside of a function, any code inside that function can access this variable, but any code outside it can't. That's why ret is undefined when you are trying to print
Jim Tryon
@jimtryon
May 10 2017 01:18
What line @hackedWifi?
I’m looking at your codepen
@TayCodes What line?
TayCodes
@TayCodes
May 10 2017 01:19
@thayannevls I know but when you return a variable I'm pretty sure you make it available outside
Jim Tryon
@jimtryon
May 10 2017 01:19
and also, what does it say in the console?
TayCodes
@TayCodes
May 10 2017 01:20
@jimtryon first function defines age then ret is age of retirement. Name is one param yob the other (year of birth). I call the age function once to calculate age w/ year of birth then I try to get both name and ret to the global scope not just local variable scope and failing
@jimtryon console says nothing :(
Jim Tryon
@jimtryon
May 10 2017 01:22
What is bp?
I can’t follow all of your variable names, lol
Gulsvi
@gulsvi
May 10 2017 01:28
@Garabed96 @longnt80 No need for authentication - just use the endpoints that Free Code Camp provides at: https://wind-bow.glitch.me
Long Nguyen
@longnt80
May 10 2017 01:29
thanks @SkyCoder01 :+1:
CamperBot
@camperbot
May 10 2017 01:29
longnt80 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1341 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 10 2017 01:37
@TayCodes You'll need to define retname, this should be the last two days of your code:
var retname = ytir(name, yob);
document.write(retname[1] + " retires in " + retname[0]);
Sara
@skd726
May 10 2017 02:01
hello, I need with my quote machine. can anyone help?
nothing happens when I press the buttom
Vibhaas
@vibhaas
May 10 2017 02:13
@skd726 one - you are missing jquery include it...
Sara
@skd726
May 10 2017 02:14
@vibhaas thanks!
CamperBot
@camperbot
May 10 2017 02:14
skd726 sends brownie points to @vibhaas :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @vibhaas |http://www.freecodecamp.com/vibhaas
Sara
@skd726
May 10 2017 02:14
just did
Vibhaas
@vibhaas
May 10 2017 02:15
@skd726 there is another problem...
Sara
@skd726
May 10 2017 02:15
I'm sure
Vibhaas
@vibhaas
May 10 2017 02:16
@skd726
Mixed Content: The page at 'https://codepen.io/vibhaas/pen/pPaNXZ?editors=1010' was loaded over HTTPS, but requested an insecure script 'http://api.forismatic.com/api/1.0/method=getQuote&key=457653&format=xml&lang=en&jsonp=jQuery311011842123522877923_1494382534749?_=1494382534750'. This request has been blocked; the content must be served over HTTPS.
send @ jquery.min.js:4
ajax @ jquery.min.js:4
r.(anonymous function) @ jquery.min.js:4
getJSON @ jquery.min.js:4
(anonymous) @ pen.js:12
j @ jquery.min.js:2
k @ jquery.min.js:2
in the console..

https://codepen.io/dting/pen/PqrZgb <-

Forismatic does not offer their api over HTTPS. See Mixed Content.

Sara
@skd726
May 10 2017 02:18
so I can't use forismatic?
or I have to change it?
Vibhaas
@vibhaas
May 10 2017 02:18
and since codepen uses https, you have to change its link to http
Sara
@skd726
May 10 2017 02:19
ah, okay, thank you so much
Rashaun Ellison
@rellison27
May 10 2017 02:19
I need some help with some code. I'm trying to get this program to run and print in the box when I click the button but I keep getting an error in the console that says "Uncaught ReferenceError: cntUP is not defined
at HTMLButtonElement.onclick" https://jsfiddle.net/n2h9w6d7/135/
Chris Cullen
@123xylem
May 10 2017 02:25
Can anyone tell me why a 90 or 70% zoom on this site makes a margin under the border of the heros image?
Tough question ^^
Jim Tryon
@jimtryon
May 10 2017 02:27
@123xylem Can you put your code in a codepen?
Thayanne Luiza
@thayannevls
May 10 2017 02:29
@rellison27 You don't need to call your function in the end of js file, remove the last line cntUP(); and will work
its a problem of js fiddle
Thayanne Luiza
@thayannevls
May 10 2017 02:33
@rellison27 And change the load type of your js file to <head>
Vibhaas
@vibhaas
May 10 2017 02:36

@rellison27 so you have to add this in the end-

window.cntUP = cntUP;

SO YOUR JS WILL BE:

function cntUP() {
  var i = 1;
  var params = function() {
    if (i === 11) clearInterval(this);
    else
      console.log(i++);
  };
  setInterval(params, 1000);
  params();
}
window.cntUP = cntUP;
Rashaun Ellison
@rellison27
May 10 2017 02:40
Thank you that works! how to I get it to count in the box though?
Jim Tryon
@jimtryon
May 10 2017 02:42
@rellison27 You need to add an event handler to the box
Rashaun Ellison
@rellison27
May 10 2017 02:49
@jimtryon so instead of putting it on the console i need to add the even handler there?
Vibhaas
@vibhaas
May 10 2017 02:51

@rellison27
use

document.getElementsByClassName("box")[0].innerHTML = "(number here)"

https://www.w3schools.com/jsref/met_element_getelementsbyclassname.asp

But i suggest you add an id to your box and use Innerhtml..
https://www.w3schools.com/jsref/prop_html_innerhtml.asp

@rellison27
image.png
Rashaun Ellison
@rellison27
May 10 2017 02:57
I see, @vibhaas . I wasn't making it an index. I had to do that because it was a count?
thank you @vibhaas thank you everybody. I really appreciate you guys help!
CamperBot
@camperbot
May 10 2017 02:57
rellison27 sends brownie points to @vibhaas :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @vibhaas |http://www.freecodecamp.com/vibhaas
Vibhaas
@vibhaas
May 10 2017 02:58
@rellison27 :+1:
Rashaun Ellison
@rellison27
May 10 2017 02:59
thnks for your patience guys..I'm new to this
Vibhaas
@vibhaas
May 10 2017 02:59
@rellison27 no problem
Konrad Bosak
@konradbosak
May 10 2017 03:17
Hi guys! I finished my first project on freecodecamp. I would like to ask for your opinion. The text is in Polish. http://codepen.io/konradbosak/full/pPpxJW/ :)
Vibhaas
@vibhaas
May 10 2017 03:21
@konradbosak cant understans the lang so cant comment... :grinning:
Thayanne Luiza
@thayannevls
May 10 2017 03:22
@konradbosak Its very good! I would just try to customize it more with css
Vibhaas
@vibhaas
May 10 2017 03:23
@thayannevls plus your using quincys desgin
Design by Quincy Larson. Modified by Konrad Bosak
Konrad Bosak
@konradbosak
May 10 2017 03:23
@vibhaas OK :) Thanks. @thayannevls :) I will try do something more ;)
CamperBot
@camperbot
May 10 2017 03:23
konradbosak sends brownie points to @vibhaas and @thayannevls :sparkles: :thumbsup: :sparkles:
:cookie: 110 | @thayannevls |http://www.freecodecamp.com/thayannevls
:cookie: 311 | @vibhaas |http://www.freecodecamp.com/vibhaas
h1tag
@h1tag
May 10 2017 03:45
Hey, anyone knows why here the square in the center (with the class small-screen) isn't horizontally centered?
Gulsvi
@gulsvi
May 10 2017 03:47
@h1tag Because it is not an inline-block like the other elements.
.small-screen{
  display: inline-block;
  margin: 10px;
  height: 50px;
  width: 50px;
  border: 1px solid black;
}
OR:
.small-screen{
  margin: 10px auto;
  height: 50px;
  width: 50px;
  border: 1px solid black;
}
auto left/right margins will center a block element
Hoang Thanh Tu
@hoangthanhtu
May 10 2017 03:49
@h1tag just add display: inline-block; into small-screen
h1tag
@h1tag
May 10 2017 03:50
Hey @SkyCoder01 yea, I think I forgot about that becasue the class row1 was using inline-block, then I changed it to block
@hoangthanhtu :+1:
but why it doesn't center without inline-block? (I used inline-block with the class square just to make every 2 squares align in the same line)
Gulsvi
@gulsvi
May 10 2017 03:54
@h1tag That's how inline and block elements work. :)
h1tag
@h1tag
May 10 2017 03:55
@SkyCoder01 so text-align: center; doesn't work with block elements
Gulsvi
@gulsvi
May 10 2017 03:55
@h1tag Correct. You have to use auto left/right margins to center block elements
Inline elements use text-align: center
h1tag
@h1tag
May 10 2017 03:56
I see, thank you @SkyCoder01 and @hoangthanhtu for taking the time
CamperBot
@camperbot
May 10 2017 03:56
h1tag sends brownie points to @skycoder01 and @hoangthanhtu :sparkles: :thumbsup: :sparkles:
:cookie: 255 | @hoangthanhtu |http://www.freecodecamp.com/hoangthanhtu
:star2: 1343 | @skycoder01 |http://www.freecodecamp.com/skycoder01
h1tag
@h1tag
May 10 2017 03:57
@SkyCoder01 I started learning css in this project :smile: I wasn't using much css before
Gulsvi
@gulsvi
May 10 2017 03:58
@h1tag CSS can be complicated :)
I just learned keyframes today, so much to learn!
Chris Cullen
@123xylem
May 10 2017 04:06
Cannot GET /temp/styles/app/assets/images/sprites/svg/sprite.css-0f9283b3.svg
Im getting this error when i load my page online from local host.. I dont know why its looking in temp/styles though
Any idea?
Ken Haduch
@khaduch
May 10 2017 04:08
@123xylem - sometimes (or all the time) the page is looking relative to something - some folder or directory where it is loading something else from. Hard to say exactly what you have and why you are getting that, but that's the kind of thing that happens
Anurag Lahon
@anuraglahon16
May 10 2017 04:08
https://codepen.io/anuraglahon1/pen/zwRZoZ what is going wrong here?
Chris Cullen
@123xylem
May 10 2017 04:08
@khaduch temp/styles is my main css file
i dont know why it would start there or why my image is making a get req to there
Thayanne Luiza
@thayannevls
May 10 2017 04:09
@anuraglahon16 whats the problem?
Anurag Lahon
@anuraglahon16
May 10 2017 04:10
@thayannevls it is overlaping the letters in the pricing section
Ken Haduch
@khaduch
May 10 2017 04:11
@123xylem - is the image being loaded from within the CSS file?
Chris Cullen
@123xylem
May 10 2017 04:12
@khaduch <h2 class="section-title"> <span class="icon icon--star section-title__icon"></span>
Thats my html... the icon--star refers to
/*with all shapes(svgs)*/
{{#shapes}} 

/* first for each one the url dir will be in the same place 
*/  {{#first}}
    .icon {
      background-image: url('/assets/images/sprisxtes/{{{sprite}}}');
    }
  {{/first}}

/*  the icon will refer to itself
*/  
.icon--{{base}} {      
    width: {{width.outer}}px;
    height: {{height.outer}}px; /*the width and height will take it from .outer*/

    background-position: {{position.relative.xy}}; /*position will be relative to xy axis on browser*/
  }
{{/shapes}}
Thayanne Luiza
@thayannevls
May 10 2017 04:13
@anuraglahon16 The problem is in your css, right here:
li{
  float:left;
}
Konrad Bosak
@konradbosak
May 10 2017 04:13

try this:

li{
float:left;
width: 100%
}

Anurag Lahon
@anuraglahon16
May 10 2017 04:13
@thayannevls what shoul i do
Thayanne Luiza
@thayannevls
May 10 2017 04:13
@anuraglahon16 If you do like this, all the li elements will go to the left and will overlap each other
Anurag Lahon
@anuraglahon16
May 10 2017 04:14
yeah i have to use the id
Thayanne Luiza
@thayannevls
May 10 2017 04:14
just like @konradbosak said
Ken Haduch
@khaduch
May 10 2017 04:14
@123xylem - I think that if it's being loaded from within the CSS, then it is probably using the path for the CSS file as the base. Maybe you can try ../../assets/images/sprisxtes/{{{sprite}}} and redirect it up a couple levels, if that is the correct path? Or however many relative levels you need to traverse up the tree?+
Chris Cullen
@123xylem
May 10 2017 04:16
@khaduch BTW
That was an intentional mistake
sprisxtes.. but the error doesnt show that word
so
How can i see where the request is coming from?
@khaduch
Anurag Lahon
@anuraglahon16
May 10 2017 04:17
@thayannevls thnx i have use a class
CamperBot
@camperbot
May 10 2017 04:17
anuraglahon16 sends brownie points to @thayannevls :sparkles: :thumbsup: :sparkles:
:cookie: 128 | @thayannevls |http://www.freecodecamp.com/thayannevls
Ken Haduch
@khaduch
May 10 2017 04:18
@123xylem - is this SASS code or something? I'm not familiar with it... I'm wondering if you can look at the compiled code and see what URL is being generated?
Chris Cullen
@123xylem
May 10 2017 04:19
@khaduch yes some sass and moustache...
Anurag Lahon
@anuraglahon16
May 10 2017 04:19
https://codepen.io/anuraglahon1/pen/zwRZoZ @thayannevls how can i make the three pricing in a horizontal mannar
heroiczero
@heroiczero
May 10 2017 04:23
@anuraglahon16 you could either use a bootstrap with row and col
Anurag Lahon
@anuraglahon16
May 10 2017 04:23
how?
@heroiczero
heroiczero
@heroiczero
May 10 2017 04:24
Ken Haduch
@khaduch
May 10 2017 04:26
@123xylem - well, how about looking at the "View Page Source" in the browser and see if you can find that path somewhere, maybe you can zero in on it? This stackoverflow link http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to says that it is relative to the source of the style sheet. It definitely looks like that's what's happening in your case?
I have to bug out - too late for me... I hope that gives you some hints or at least partial explanation to go on?
Thayanne Luiza
@thayannevls
May 10 2017 04:26
@anuraglahon16 did you completed the bootstrap lessons? Do just like in the lessons, create a div with class row and size elements with col class
Chris Cullen
@123xylem
May 10 2017 04:26
@khaduch thanks
CamperBot
@camperbot
May 10 2017 04:26
123xylem sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2854 | @khaduch |http://www.freecodecamp.com/khaduch
Anurag Lahon
@anuraglahon16
May 10 2017 04:27
@thayannevls oh yeah thanx....that one
CamperBot
@camperbot
May 10 2017 04:27
anuraglahon16 sends brownie points to @thayannevls :sparkles: :thumbsup: :sparkles:
:warning: anuraglahon16 already gave thayannevls points
Elvis Knapman
@mksoftworks
May 10 2017 04:40
I'm on codepen and it wont center my text, im using the class "text-center" in my h1 tag
I added bootstrap as a resource too
I did this <h1 class="text-center">Test text</h1> and it's left aligned
Hoang Thanh Tu
@hoangthanhtu
May 10 2017 04:43
@mksoftworks can you give your codepen link?
Elvis Knapman
@mksoftworks
May 10 2017 04:44
@hoangthanhtu how do i do that? I'm new to codepen
Hoang Thanh Tu
@hoangthanhtu
May 10 2017 04:44
just copy url of your codepen and paste it into here
Elvis Knapman
@mksoftworks
May 10 2017 04:45
Konrad Bosak
@konradbosak
May 10 2017 04:45
@mksoftworks Try use this link to bootstrap. : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
I had that same problem, becouse codepen have the new bootstrap version (4).
Hoang Thanh Tu
@hoangthanhtu
May 10 2017 04:46
@mksoftworks follow @konradbosak 's instruction
text-center is not have in bootstrap v4
shivam gupta
@shivamg11000
May 10 2017 04:47
Hoy much far you can get
UP arrowkey for playing
Elvis Knapman
@mksoftworks
May 10 2017 04:48
@hoangthanhtu @konradbosak How do i add it in? freecodecamp has always already had it behind the scenes
Elvis Knapman
@mksoftworks
May 10 2017 04:49
Thanks @hoangthanhtu @konradbosak
CamperBot
@camperbot
May 10 2017 04:49
mksoftworks sends brownie points to @hoangthanhtu and @konradbosak :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @konradbosak |http://www.freecodecamp.com/konradbosak
:cookie: 267 | @hoangthanhtu |http://www.freecodecamp.com/hoangthanhtu
Konrad Bosak
@konradbosak
May 10 2017 04:50
@mksoftworks look at this screen :) https://ibb.co/dp0jD5
Mojammel
@MojammelW
May 10 2017 05:19
Hi guys new to programming any idea where to start learning java for dummies and kids cos I don't understand the jargon? I want to make android apps.
Also I didn't know where to ask this question so I just asked here.
Jim Tryon
@jimtryon
May 10 2017 05:20
@MojammelW Check out the Head First Series on Java
Mojammel
@MojammelW
May 10 2017 05:22
Jim where will I find the head first series?
And do I have to learn all of java or only a little of it because I intend to use Android studio not eclipse
Jim Tryon
@jimtryon
May 10 2017 05:23
You can find the Head First Series on Amazon or there might be an online pdf floating around somewhere
Mojammel
@MojammelW
May 10 2017 05:25
Is android app development particularly difficult compared to html and css cos that's all I know?
Are there any videos cos I learn better through videos
Jim Tryon
@jimtryon
May 10 2017 05:33
Android app development is using the Java programming language
It’s considerably more difficult than HTML and CSS, yes
Allan Pooley
@AllanPooley
May 10 2017 05:35
Howdy everyone, currently working on my React FCC Leaderboard. I'm trying to make one of the table headers clickable. When I do attach a handler the onClick function, once the page has loaded it just continuously calls the handler (without a click occuring). Would appreciate it if anyone has any ideas.
<th>
  <span onClick={this.handleFilterChange(false)}>Recent Points (In The Last 30 Days)</span>
</th>
^ Can't see what could be wrong with this code?
Jim Tryon
@jimtryon
May 10 2017 05:37
@AllanPooley I’d love to help, but I don’t know React
Shubham Sharma
@shubham1604
May 10 2017 06:05
Can anyone here help me a bit with the front end right now
?
Sorin Ruse
@sorinr
May 10 2017 06:10
@AllanPooley onClick="myFunctionCallInHere"
Allan Pooley
@AllanPooley
May 10 2017 06:11
Hey @sorinr this is written in JSX buddy, so I have to enclose any JavaScript in { } curly braces
Sorin Ruse
@sorinr
May 10 2017 06:12
@AllanPooley sorry. i've only seen the last part :)
Allan Pooley
@AllanPooley
May 10 2017 06:15
No problem ;)
Jim Tryon
@jimtryon
May 10 2017 06:16
@AllanPooley Is basically the handler stuck in an infinite loop?
From the way you describe the problem
Allan Pooley
@AllanPooley
May 10 2017 06:17
The function specified in onClick just just continuously fires as soon as the page loads
Yeah, in an infinite loop until it sort of crashes
Sorin Ruse
@sorinr
May 10 2017 06:17
@AllanPooley why not trying to use the .on("click:, function()....
prashant12121
@prashant12121
May 10 2017 06:18
hi i am having some problem with my portfolio project here is the link http://codepen.io/prashant85/pen/oWoeqV?editors=1000
Allan Pooley
@AllanPooley
May 10 2017 06:18
Well, it's worth a try, I just wanted to avoid mixing jQuery with my React code, for page load times and neatness sake
prashant12121
@prashant12121
May 10 2017 06:19
one of the problem is that i wanted the about section to be below the background
second thing ws that the text this is my portfolio project should not move below when scrolled
Jim Tryon
@jimtryon
May 10 2017 06:20
Your about section disappears when I scroll the page
Sorin Ruse
@sorinr
May 10 2017 06:21
@prashant12121 use z-index in your css to layer your content as u wish
h1tag
@h1tag
May 10 2017 06:23
@prashant12121 "second thing ws that the text this is my portfolio project should not move below when scrolled"
This is because you're using position: fixed
@sorinr WB
@sorinr I'm fortMaximus
Sorin Ruse
@sorinr
May 10 2017 06:24
@h1tag hi. glad to be back
prashant12121
@prashant12121
May 10 2017 06:27
i didnt used fixed
h1tag
@h1tag
May 10 2017 06:29
.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-40%, -50%);
}
<h1 class="centered lead" style="color:black">hey this is my portfolio page </h1>
@prashant12121 ?
Harry Lam
@ngochoalam
May 10 2017 06:31
hi
i wrote jquery to add active class
like thí

$(document).ready(function() {
$('ul li a').click(function(e) {
$('li a').removeClass("active");
$(this).addClass("active");

});
});

but it don't work
can any help me?
prashant12121
@prashant12121
May 10 2017 06:38
thanks @h1tag
CamperBot
@camperbot
May 10 2017 06:38
prashant12121 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 767 | @h1tag |http://www.freecodecamp.com/h1tag
Tyler
@nmbrgts
May 10 2017 06:39

@AllanPooley I'm pretty sure the issue is caused by passing false as a parameter to handleFilterChange. onClick should be passed a function without any arguments that takes an event object and does something with it.
If I edit your span to look like this:

<span onClick={ this.handleFilterChange }> Recent Points... </span>

And change handleFilterChange to someting like this:

handleFilterChange(event) {
  this.setState({
    allTimeFilter: this.state.allTimeFilter? false : true
  });

  console.log("allTimeFilter === " + this.state.allTimeFilter);
}

I can get a useable toggle -- which might not be what you are going for but, will hopefully point you in the right direction.

h1tag
@h1tag
May 10 2017 06:40
@ngochoalam do you have the full code in a pen?
h1tag
@h1tag
May 10 2017 06:44
@ngochoalam you didn't import jQuery -_-
Allan Pooley
@AllanPooley
May 10 2017 06:45
Hey @nmbrgts Tyler, thanks for this, I'll give it a go now
CamperBot
@camperbot
May 10 2017 06:45
allanpooley sends brownie points to @nmbrgts :sparkles: :thumbsup: :sparkles:
:cookie: 194 | @nmbrgts |http://www.freecodecamp.com/nmbrgts
Harry Lam
@ngochoalam
May 10 2017 06:46
@h1tag oh
my mistake@@
Shiyas Vp
@shiyasvp92
May 10 2017 06:47
hello world
h1tag
@h1tag
May 10 2017 06:47
@ngochoalam when something goes wrong, check the browser console, it was saying that $ is undefined, that means that jQuery isnt imported
Harry Lam
@ngochoalam
May 10 2017 06:51
@h1tag it still not work
h1tag
@h1tag
May 10 2017 06:54
@ngochoalam why did you change the js preprocessor to Livescript?
Harry Lam
@ngochoalam
May 10 2017 06:56
@h1tag because it still not work, so i try to change
h1tag
@h1tag
May 10 2017 06:56
@ngochoalam change it back to none
Allan Pooley
@AllanPooley
May 10 2017 06:56
@nmbrgts Thank you mate, you were spot on - it was trying to pass a bool where an event parameter was meant to be.
Tyler
@nmbrgts
May 10 2017 06:57
@AllanPooley Glad I could help!
h1tag
@h1tag
May 10 2017 07:00
Screenshot.png
@ngochoalam isnt this what you're trying to achieve?
Harry Lam
@ngochoalam
May 10 2017 07:01
oh, why om my browser don't show it
h1tag
@h1tag
May 10 2017 07:03
@ngochoalam which browser?
I tried it on firefox and chrome
Harry Lam
@ngochoalam
May 10 2017 07:06
i using chrome
Anurag Lahon
@anuraglahon16
May 10 2017 07:10
https://codepen.io/anuraglahon1/pen/zwRZoZ how to make the pricing horizontal using css bootstrap i am able to do it
Bogdan Gatej
@Bogdan2992
May 10 2017 07:46
hello
I have a question how I asign the answers of an weather api to the HTML ?
iso
@iso1048
May 10 2017 07:56
@Bogdan2992 the api gives a JSON, whose data you can access with dot notation, since it is an object
Bogdan Gatej
@Bogdan2992
May 10 2017 08:00
@gothamknight yes but how can i link them to the html
h1tag
@h1tag
May 10 2017 08:01
@Bogdan2992 you have to select the html element u want, then use .html(data) method with it
Bogdan Gatej
@Bogdan2992
May 10 2017 08:03
@h1tag like I did for the quote generator
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
h1tag
@h1tag
May 10 2017 08:04
@Bogdan2992 yes
Bogdan Gatej
@Bogdan2992
May 10 2017 08:05
@h1tag and it must be targeted each of the things that I whant to be affected,and it need to be inside of the function ?
or It can be outside
h1tag
@h1tag
May 10 2017 08:06

@Bogdan2992

and it must be targeted each of the things that I whant to be affected

You mean the elements?

nd it need to be inside of the function ?
or It can be outside

I didn't understand this one

Harry Lam
@ngochoalam
May 10 2017 08:09
@h1tag thank!
h1tag
@h1tag
May 10 2017 08:10
@ngochoalam did it work?
Harry Lam
@ngochoalam
May 10 2017 08:18
yes, i brow on Egde
ahmedabdulqader
@ahmedabdulqader
May 10 2017 08:55
Hey guys, I need help in Random quote machine example, where is the API and how to deal with it?
h1tag
@h1tag
May 10 2017 08:56
@ahmedabdulqader you can google for a random quote api
and you deal with it like u learned in the getJSON and ajax challenges
ahmedabdulqader
@ahmedabdulqader
May 10 2017 08:58
Aha thank you @h1tag
CamperBot
@camperbot
May 10 2017 08:58
ahmedabdulqader sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 768 | @h1tag |http://www.freecodecamp.com/h1tag
ahmedabdulqader
@ahmedabdulqader
May 10 2017 08:58
:)
h1tag
@h1tag
May 10 2017 08:58
YW
lazzlo
@lazzlo
May 10 2017 09:15
Am I missing something here? My col-xs-(number) classes aren't working. They have to be in a row class which has to be in a container class, right? I can't seem to get it right. I have other bootstrap classes working so it's not something wrong there.
Bogdan Gatej
@Bogdan2992
May 10 2017 09:32
@h1tag so can you take a look at my pen
?
@h1tag because I don't seem to get it how to link the javascript to the html
h1tag
@h1tag
May 10 2017 09:34
@Bogdan2992 ok
Bogdan Gatej
@Bogdan2992
May 10 2017 09:34
h1tag
@h1tag
May 10 2017 09:36
@Bogdan2992 why are you using quotes in the weather app
Bogdan Gatej
@Bogdan2992
May 10 2017 09:38
@h1tag because is copty from quote machine but i don't know what to write after the =
h1tag
@h1tag
May 10 2017 09:38
@Bogdan2992 it will not work here, because the quotes array isn't here
@Bogdan2992 what do you want to set the html element qual to?
Bogdan Gatej
@Bogdan2992
May 10 2017 09:39
@h1tag I know but how I link it to weather pressure humidity and all of that
@h1tag to the temperature wind speed and so on
Anonymish
@ashishkpa87
May 10 2017 09:39
Hi , I'm having a problem while working on portfolio.
I have a main <DIV>, Which has two elements within it. One element is <child DIV> and other is <IMG>.
Now I want to make the main <DIV> responsive. So that the <IMG> would be above the <childDIV>.
Thus I used @media Query.
But it's not working. After previewing the page, I went for "Right Click -> Inspect element" option in browser. reduced the screen width less than 700px. But The @media query I've written is not getting compiled. So, no @media query is getting exxcuted for the reduced screen width.
Any idea why this is happening? Following is my @media Query.
@media screen and (max-width: 767px){
img#div2 {
position: absolute !important;
top: 10% !important;
float:none !important;
left: 50%;
margin-left: -100px;
height: 200px !important;
width: 200px !important;
background: rgba(255,255,255,0.9) !important;
border-radius: 50% !important;
//display: block !important;
}
}
h1tag
@h1tag
May 10 2017 09:41
@Bogdan2992 well, you're storing them in a variables, you can use those variables. But you'll have to make those variables global or you can put this line document.getElementById('temperature').innerHTML = quotes[randomNumber]; inside your getJSON callback function
Bogdan Gatej
@Bogdan2992
May 10 2017 09:41
@h1tag ok so how can I make them global
@h1tag because I can't just put all of those in the callback
h1tag
@h1tag
May 10 2017 09:42
@Bogdan2992 what do you mean you cant?
you can make them global by declaring them outside any of the functions
in the global scope
Bogdan Gatej
@Bogdan2992
May 10 2017 09:44
@h1tag and link tghem to the html how
using that documeng.getElementById ?
h1tag
@h1tag
May 10 2017 09:44
yes
Jake
@NeelDVirus
May 10 2017 09:45
Is there any context where MouseEvent.which property ll come in rescue when MouseEvent.button property is not supported or associated with some quirks or anything which let us opt for MouseEvent.which?
Bogdan Gatej
@Bogdan2992
May 10 2017 09:51
I don't get it
h1tag
@h1tag
May 10 2017 09:52
@Bogdan2992 what u dont get exactly?
Bogdan Gatej
@Bogdan2992
May 10 2017 09:54
@h1tag how to link the js to the html the actual comand and how I'm supposed to get out those varíable that I declared inside the function,outside of it, and still work
h1tag
@h1tag
May 10 2017 09:57

@Bogdan2992 here's another way:

function changeHTML() {
  document.getElementById("temperature").innerHTML = weatherTime;
}

declare this function and call it inside ur getWeather function

Bogdan Gatej
@Bogdan2992
May 10 2017 10:02
@h1tag so with this statement document.getElementById I linke it the temperature from the HTML to the weatherTime var created up
no ?
h1tag
@h1tag
May 10 2017 10:03
@Bogdan2992 not link, you set its content to weatherTime
or u can think of it like linking and setting its content
Bogdan Gatej
@Bogdan2992
May 10 2017 10:04
@h1tag and normaly after I push the button weather I get the weather show
ni ?
h1tag
@h1tag
May 10 2017 10:05
@Bogdan2992 yes, if evrything is set correctly
h1tag
@h1tag
May 10 2017 10:14
Hey, is there a way to make a button look like it has been clicked without actually clicking it?
Bogdan Gatej
@Bogdan2992
May 10 2017 10:14
any1 knowing
why is no't showing me anything
is saying something like
stats.g.doubleclick.net/r/collect?v=1&aip=1&t=dc&_r=3&tid=UA-30102653-2&cid…1&uid=859920&_gid=1635317007.1494411008&gjid=757516598&_v=j54&z=1706557370 Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR
this error
Bogdan Gatej
@Bogdan2992
May 10 2017 10:23
any1 having any clue
?
shivam gupta
@shivamg11000
May 10 2017 10:24
@Bogdan2992 post you question also on stackoverflow
whats the problem
Bogdan Gatej
@Bogdan2992
May 10 2017 10:26
@shivamg11000
this is my pen https://codepen.io/Bogdan2992/pen/KaxOgx?editors=1111
somehow is no't working and I got this ugly error
stats.g.doubleclick.net/r/collect?v=1&aip=1&t=dc&_r=3&tid=UA-30102653-2&cid…7&uid=859920&_gid=469757175.1494411312&gjid=920174408&_v=j54&z=725910387:1 GET https://stats.g.doubleclick.net/r/collect?v=1&aip=1&t=dc&_r=3&tid=UA-301026…487&uid=859920&_gid=469757175.1494411312&gjid=920174408&_v=j54&z=725910387 net::ERR_SSL_PROTOCOL_ERROR
shivam gupta
@shivamg11000
May 10 2017 10:27
Sorry, I don't know the backend stuff but I will surely learn in future.
alpox
@alpox
May 10 2017 10:31
@Bogdan2992 You don't call your changeHTML function ever
h1tag
@h1tag
May 10 2017 10:31
@Bogdan2992 this should work. I forked it and commented out the getlocation function, you can remove the comments around it and put it back as the value for the onclick, I also used a random coordinates so change thos back too
alpox
@alpox
May 10 2017 10:31
@Bogdan2992 That error you get from some advertisement thingys. Nothing to worry about
Mo.
@mokyox
May 10 2017 10:32

Hey folks. I'm finishing up the Quote Machine project and I'm having issues with my Tweet button. I can't seem to get it to work with my HTML. My code is here.

Any hints? I'm stumped.

https://codepen.io/mokkyun/pen/WjdvXd

alpox
@alpox
May 10 2017 10:35
@mokkyun You close your a tag too early. Close it after </i>
@mokkyun Or even better: wrap the whole a around the div
@mokkyun And better better:
<a href="https://twitter.com/intent/tweet?text=#showQuote" class="btn btn-primary tweetQuote" id="tweetQuote">
    <i class="fa fa-twitter" aria-hidden="true"></i>
</a>
Mo.
@mokyox
May 10 2017 10:40

@alpox Awesome, thanks a bunch alpox! I just the div is redundant :D

Just wondering, is there any way to get the tweet popup to display the current quote without using javascript?

CamperBot
@camperbot
May 10 2017 10:40
mokkyun sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1028 | @alpox |http://www.freecodecamp.com/alpox
Mo.
@mokyox
May 10 2017 10:41
I guess my #showQuote won't work for HTML, right?
alpox
@alpox
May 10 2017 10:44
@mokkyun Not without javascript, no
Mo.
@mokyox
May 10 2017 10:47
Okay, thanks! I'll try and figure out how to do it with javascript. From what I gather, I just need some simple jQuery, right?
$("#showQuote").text(randomQuote);
alpox
@alpox
May 10 2017 10:53
@mokkyun You have to set a new href on the link - not inner text
Mo.
@mokyox
May 10 2017 10:58
Gotcha, I thought something like this but it doesn't seem to work...
$("#showQuote").attr('href',"https://twitter.com/intent/tweet?text=randomQuote");
alpox
@alpox
May 10 2017 11:36
@mokkyun Looks okay except that you should either interpolate the variable or add it to the string
$("#showQuote").attr('href',"https://twitter.com/intent/tweet?text=" + randomQuote);
As example
@mokkyun In your code, randomQuote is only a number. so you should get the real quote from the quotes:
$("#tweetQuote").attr('href',"https://twitter.com/intent/tweet?text="+quotes[randomQuote]);
@mokkyun Also, put this code into the getQuote method - since you have to set a new twitter link each time you change the quote
Nicolas Reboredo
@nicolasmdf
May 10 2017 12:16
Hey guys, any d3 wizards out there? I have a slight problem with my bar chart that is kind of driving me nuts
rjsumthin
@rjsumthin
May 10 2017 12:18
Hey all, in building my tribute page i'm trying to center the image as they did and then I have 4 words that I want spaced evenly nested from border left to border right no matter what screen size. I've tried putting the image in a container then the lines of text in a container with col xs3 and a few other variations and I can't quite figure it out using ONLY Bootstrap as the assignment requires
And kind of just jumping in here so if i'm breaking chat room etiquette please let me know :D
shivam gupta
@shivamg11000
May 10 2017 12:20
@rjsumthin you have to set the width of container in which the image is, then set margin: 0 auto;
give the container border: 1px solid black;
to see its width
on the screen
Sorin Ruse
@sorinr
May 10 2017 12:22
@mokkyun i would add this to the css:
#getQuote:hover {
  cursor: pointer;
}
rjsumthin
@rjsumthin
May 10 2017 12:25
ohhh nice is that a bootstrap command so would look something like <div class="container container-border width-xyz"> or something along those lines to define a container with set paramaters in bootstrap?
Or would I have to set that up underneath the container div with additional tags and bootstrap classes?
prashant12121
@prashant12121
May 10 2017 12:36
there is small gap in the left how can i fix it . when i apply container-fluid it just removes the white jumbotron http://codepen.io/prashant85/pen/oWoeqV?editors=1100
sorry riight
on the right there is the ggap
h1tag
@h1tag
May 10 2017 12:40
@prashant12121 I don't see it
Sorin Ruse
@sorinr
May 10 2017 12:41
@prashant12121 try to add this to css:
body{
  overflow-x: hidden;
}
prashant12121
@prashant12121
May 10 2017 12:41
on the right there is gap due to not using container fluid
Loris Hanck
@Pouletcoq
May 10 2017 12:43
Why don't my buttons show up :worried: https://codepen.io/Pouletcoq/pen/KmZjMr/
prashant12121
@prashant12121
May 10 2017 12:43
thanks @sorinr it worked . if any further suggestion please tell thanks
CamperBot
@camperbot
May 10 2017 12:43
prashant12121 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1276 | @sorinr |http://www.freecodecamp.com/sorinr
prashant12121
@prashant12121
May 10 2017 12:46
@Pouletcoq you didnt gave any button class
Alexander Domikov
@AlexanderDom
May 10 2017 12:47
he has #buttons
Loris Hanck
@Pouletcoq
May 10 2017 12:47
No it's a div called search_button but the transition doesn't work :/
Alexander Domikov
@AlexanderDom
May 10 2017 12:47
but because of his position relative + top they either hidden by big white one either too high in the container or just opacity 0 ;)
prashant12121
@prashant12121
May 10 2017 12:48
add instead class="container" use class="btn btn-primary" i could see circular button
Alexander Domikov
@AlexanderDom
May 10 2017 12:49
it works for me
Loris Hanck
@Pouletcoq
May 10 2017 12:49
It's not a problem of buttons :/ @prashant12121 How can i sove it @AlexanderDom :D
@AlexanderDom I have 2 buttons that need to come from the search bar but they don't come :/
Alexander Domikov
@AlexanderDom
May 10 2017 12:52
yes but your two buttons are outside your search bar ;)
not inside
so rules like #search_bar.clicked #search_button{ gonna never work
@Pouletcoq
Loris Hanck
@Pouletcoq
May 10 2017 12:53
Oh ok :/ I'm going to try something else :D Thanks :P @AlexanderDom
CamperBot
@camperbot
May 10 2017 12:53
pouletcoq sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 427 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
May 10 2017 12:53
move them inside
Loris Hanck
@Pouletcoq
May 10 2017 12:54
OKey :D
Alexander Domikov
@AlexanderDom
May 10 2017 12:54
<div id="search_bar" class="container">
      <div id="search_button" class="container">
     </div> 
      <div id="random_button" class="container">
     </div>
 </div>
:)
curacao2
@curacao2
May 10 2017 13:01
Hey all,. Anyone know how i can resize an image so it fills up the screen? I linked to an external image but it is very large.
Marianissimus
@Marianissimus
May 10 2017 13:05
@AlexanderDom large as in mb (500 mb) or large as in how it displays on screen?
curacao2
@curacao2
May 10 2017 13:06
Trying the tribute page, but the image is big and requires scrolling to the right
h1tag
@h1tag
May 10 2017 13:06
@curacao2 the article above should get u covered
Shiyas Vp
@shiyasvp92
May 10 2017 13:13
@curacao2 try max-width: 100%
curacao2
@curacao2
May 10 2017 13:19
@shiyasvp92 will give it a try, do I put it in the img tag?
Shiyas Vp
@shiyasvp92
May 10 2017 13:20
@curacao2 style="max-width:100%;"
or u cud giv it in a stylesheet using a class
curacao2
@curacao2
May 10 2017 13:21
@shiyasvp92 Perfect! thanks!
CamperBot
@camperbot
May 10 2017 13:21
curacao2 sends brownie points to @shiyasvp92 :sparkles: :thumbsup: :sparkles:
:cookie: 30 | @shiyasvp92 |http://www.freecodecamp.com/shiyasvp92
Shiyas Vp
@shiyasvp92
May 10 2017 13:21
@curacao2 always welcome
Robin Turner
@robint88
May 10 2017 13:26

i've just started my portfolio task. I'm having problems with keeping the navbar fixed at the top (so as you scroll down all content will move apart from the nav). Any help would be great

https://codepen.io/robint88/pen/PmQqwq

Marianissimus
@Marianissimus
May 10 2017 13:28
@robint88 you want the navbar fixed?
Robin Turner
@robint88
May 10 2017 13:28
@Marianissimus yeah that's right - I've used position: fixed; but it doesn't seem to work?
Marianissimus
@Marianissimus
May 10 2017 13:32
@robint88 there's a bootstrap class for that - fixed-top. try this: <nav class="navbar navbar-default navbar-static-top fixed-top">. then update the content - add some top margin or padding
Robin Turner
@robint88
May 10 2017 13:42
@Marianissimus brilliant - thanks for your help
CamperBot
@camperbot
May 10 2017 13:42
robint88 sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 399 | @marianissimus |http://www.freecodecamp.com/marianissimus
Marianissimus
@Marianissimus
May 10 2017 13:42
you're welcome
Mo.
@mokyox
May 10 2017 13:49
@sorinr Thanks Sorin! I forgot about pointer
CamperBot
@camperbot
May 10 2017 13:49
mokkyun sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1277 | @sorinr |http://www.freecodecamp.com/sorinr
Vismay Patil
@vismay02
May 10 2017 13:51
I am making a personal portfolio and here goes my code
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand navbar-left" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
The home and two link are coming one below the other
instead of coming beside each other and also website name is not aligned to left of the navbar
Aleksander Gębicki
@Takumar
May 10 2017 13:53
@vismay02 which Bootstrap version are you using? 3.3.7 or 4? Maybe this is a problem, that something changed in newer Bootstrap?
Maybe check every class you are using if it exists in newer Bootstrap.
Vismay Patil
@vismay02
May 10 2017 13:55
@Takumar it's 3.3.7
Muhammad Hussain
@ReactorboY
May 10 2017 13:56
text-primary isn't working anyone can help me
Vismay Patil
@vismay02
May 10 2017 13:56
'<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
'
Mo.
@mokyox
May 10 2017 13:57

@alpox Thanks alot alpox. I don't understand what you mean when you said add the code to the getQuote method - do you mean the function body? I added it to the function body but it crashes and I also made a new click method but both solutions don't seem to work.

https://codepen.io/mokkyun/pen/WjdvXd

CamperBot
@camperbot
May 10 2017 13:57
mokkyun sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1030 | @alpox |http://www.freecodecamp.com/alpox
Muhammad Hussain
@ReactorboY
May 10 2017 13:57
:(
none is here to help me..
Aleksander Gębicki
@Takumar
May 10 2017 13:58
@vismay02 hmm I've put your code in CodePen, and it looks okay I think:
https://codepen.io/anon/pen/BRYVXZ
@ReactorboY what is your problem? Give title of challenge and show your code, so somebody can check it.
cuylerconry
@cuylerconry
May 10 2017 14:01
I know this isnt what the challenge wants us to do exactly but can someone tell me why my image will not appear when i click the button.https://codepen.io/Cuyler_Conry/pen/XRVXez
Aleksander Gębicki
@Takumar
May 10 2017 14:02
@ReactorboY if you don't answer questions don't expect that others will help you ;-)
Muhammad Hussain
@ReactorboY
May 10 2017 14:02
@Takumar problem is, I want to check bootstrap offline on my desktop.. but isn't working
Mo.
@mokyox
May 10 2017 14:02
@ReactorboY Provide your code or extra information so we can help you
Aleksander Gębicki
@Takumar
May 10 2017 14:03
@ReactorboY try with simplest things first, maybe you attach Bootstrap in wrong way? We cannot guess without code.
Muhammad Hussain
@ReactorboY
May 10 2017 14:03
I have already dowloaded bootstrap zip and place the files according to that but yet no success
le me show you
Marianissimus
@Marianissimus
May 10 2017 14:04
@cuylerconry your js is actually targeting an image - document.getElementById('rainy'), while the only element with the id of rainy is a picture img id="rainy"
@cuylerconry and i can't really see that image in the preview...
Vismay Patil
@vismay02
May 10 2017 14:05
@Takumar thanks a lot ! the version in pen settings was 4 :smile:
CamperBot
@camperbot
May 10 2017 14:05
vismay02 sends brownie points to @takumar :sparkles: :thumbsup: :sparkles:
:star2: 3593 | @takumar |http://www.freecodecamp.com/takumar
Sorin Ruse
@sorinr
May 10 2017 14:06
@mokkyun welcome
Aleksander Gębicki
@Takumar
May 10 2017 14:06
@vismay02 yes, that's why I asked you to check classes from Bootstrap :-)
Muhammad Hussain
@ReactorboY
May 10 2017 14:08

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Responsive</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js" charset="utf-8"></script>
<script src="js/bootstrap.min.js" charset="utf-8"></script>
</head>
<body>
<h3 class="text-primary text-center">jQuery Playground</h3>
</body>
</html>
@Takumar

Vismay Patil
@vismay02
May 10 2017 14:08
@Takumar I totally forgot about the pen settings. Happens :sparkles:
Muhammad Hussain
@ReactorboY
May 10 2017 14:09
everything is loading, but color is not working and text is in center
cuylerconry
@cuylerconry
May 10 2017 14:09
@Marianissimus thanks. so an image is not an element? can i change that line to make it target the picture instead?
CamperBot
@camperbot
May 10 2017 14:09
cuylerconry sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 400 | @marianissimus |http://www.freecodecamp.com/marianissimus
Marianissimus
@Marianissimus
May 10 2017 14:10
@cuylerconry no, an image is an element, but it wasn't showing up - maybe it's a margin or something. yeah, just target the button or the element containing the image
cuylerconry
@cuylerconry
May 10 2017 14:15
@Marianissimus well i have the image display set to none initially because i dont want it to appear until i click the button.
Marianissimus
@Marianissimus
May 10 2017 14:16
@cuylerconry so... how can i click on it if it does not display?
remember, your javascript targets the image, meaning: when you click on this image, something happens
cuylerconry
@cuylerconry
May 10 2017 14:19
@Marianissimus oh ok. I get it now im targeting the image not the button. the button appears, i wanted the image to be hidden until the button is pressed but im targeting the wrong thing.
@Marianissimus thanks for the help i got it.
CamperBot
@camperbot
May 10 2017 14:20
cuylerconry sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:warning: cuylerconry already gave marianissimus points
Marianissimus
@Marianissimus
May 10 2017 14:21
you're welcome
quarkmonkey
@quarkmonkey
May 10 2017 14:41
Hi all, quick newbie question: I've started doing the tribute page exercise and am trying VERY hard not to look at the example code - but can anyone point me to a resource for finding the right Bootstrap classes for formatting the page?
Marianissimus
@Marianissimus
May 10 2017 14:43
@quarkmonkey bootstrap has good documentation on their site. also, this: https://www.w3schools.com/bootstrap/bootstrap_ref_all_classes.asp
quarkmonkey
@quarkmonkey
May 10 2017 14:43
Cheers will have a look.
Mo.
@mokyox
May 10 2017 14:55
@quarkmonkey Take a look especially about the columns and rows to get your content fitted nicely

So I've tried to sort get my tweet button to tweet out one of the quotes; tried a bunch of things but having no luck. Can anyone point out what's wrong with my code?

https://codepen.io/mokkyun/pen/WjdvXd

h1tag
@h1tag
May 10 2017 15:15
@mokkyun randomquote variable isn't reachable in your tweet onclick function
it'll be undefined there
Mo.
@mokyox
May 10 2017 15:18
@h1tag Ah, because the scope of randomquote is only available in getQuote() function right?
h1tag
@h1tag
May 10 2017 15:18
yes
Mo.
@mokyox
May 10 2017 15:19
@h1tag Thanks! I can't believe I messed that up. I put the tweetQuote click function into the function getQuote and it seems to qork. Thanks alot h1tag!
CamperBot
@camperbot
May 10 2017 15:19
mokkyun sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 769 | @h1tag |http://www.freecodecamp.com/h1tag
h1tag
@h1tag
May 10 2017 15:19
@mokkyun YW!
Mo.
@mokyox
May 10 2017 15:19
@h1tag @h1tag @h1tag
^^
h1tag
@h1tag
May 10 2017 15:20
lol
xyedabz
@xyedabz
May 10 2017 15:30
hello
can someone guide me to build my personal portfolio
?
Vibhaas
@vibhaas
May 10 2017 15:31
@xyedabz sure..
xyedabz
@xyedabz
May 10 2017 15:31
i dont know how to do it using bootstrap,i only learnt basics in the exercises
Vibhaas
@vibhaas
May 10 2017 15:32
@xyedabz chatting privately ok?
Alex Lopez
@AHL96
May 10 2017 15:32
Where could i get some creative ideas for the portfolio? I'm not the most artistic person :\
xyedabz
@xyedabz
May 10 2017 15:32
@vibhaas ok
Alex Lopez
@AHL96
May 10 2017 15:33
:+1:
Vibhaas
@vibhaas
May 10 2017 15:33
@xyedabz @AHL96 also check start bootstrap templates
xyedabz
@xyedabz
May 10 2017 15:34
ok @vibhaas thx
CamperBot
@camperbot
May 10 2017 15:34
xyedabz sends brownie points to @vibhaas :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @vibhaas |http://www.freecodecamp.com/vibhaas
Vibhaas
@vibhaas
May 10 2017 15:34
@AHL96 @xyedabz check mine at http://www.vibhaas.net
@xyedabz @AHL96 for the contact me you can use mail js.. like me
Daniel Falk
@D-Falk41417
May 10 2017 15:37
Would it be better to get used to CSS before Bootstrap?
xyedabz
@xyedabz
May 10 2017 15:37
its too advanced for me
Vibhaas
@vibhaas
May 10 2017 15:37
@D-Falk41417 yeah get used to css first
@D-Falk41417 check w3schools.com and tutorialspoint
Daniel Falk
@D-Falk41417
May 10 2017 15:38
Will do, thanks.
xyedabz
@xyedabz
May 10 2017 15:38
i dont know all the classes
of bootstrap
Vibhaas
@vibhaas
May 10 2017 15:39
@xyedabz https://v4-alpha.getbootstrap.com/components/ <-- bootstrap 4 components
Gulsvi
@gulsvi
May 10 2017 15:39
@AHL96 This is a great selection of portfolios for inspiration https://github.com/iRaul/awesome-portfolios :)
Vibhaas
@vibhaas
May 10 2017 15:40
@SkyCoder01 :+1:
Gulsvi
@gulsvi
May 10 2017 15:40
Good to see a new face here :)
about @vibhaas
CamperBot
@camperbot
May 10 2017 15:40
:cookie: 317 | @vibhaas |http://www.freecodecamp.com/vibhaas
Vibhaas
@vibhaas
May 10 2017 15:41
@SkyCoder01 :smile:
xyedabz
@xyedabz
May 10 2017 15:41
@vibhaas thx
CamperBot
@camperbot
May 10 2017 15:41
xyedabz sends brownie points to @vibhaas :sparkles: :thumbsup: :sparkles:
:warning: xyedabz already gave vibhaas points
xyedabz
@xyedabz
May 10 2017 15:43
is anyone building a social network ?
i saw a bootstrap template for social network :D
Vibhaas
@vibhaas
May 10 2017 15:43
@xyedabz there are too many already
xyedabz
@xyedabz
May 10 2017 15:44
are you seriously in 7th standard ?
Vibhaas
@vibhaas
May 10 2017 15:44
@xyedabz yep
xyedabz
@xyedabz
May 10 2017 15:44
WTF
what's your score ?
FCC score
two certs :smile:
Gulsvi
@gulsvi
May 10 2017 15:45
Pretty amazing, finished the entire dataviz course in one day :)
Vibhaas
@vibhaas
May 10 2017 15:45
@SkyCoder01 my dad put me on pressure
:smile:
JD Tadlock
@jdtdesigns
May 10 2017 15:45
@xyedabz a bootstrap template is .0000007% of what it would take to build a social network lol
Vibhaas
@vibhaas
May 10 2017 15:46
@SkyCoder01 though the back ends mongo db <-- i am not comfy here
@SkyCoder01 i like sql
xyedabz
@xyedabz
May 10 2017 15:47
have you got any work @vibhaas ?
Vibhaas
@vibhaas
May 10 2017 15:48
@xyedabz i am going to try next year.. once i am 13..
xyedabz
@xyedabz
May 10 2017 15:48
are you from South India ?
JD Tadlock
@jdtdesigns
May 10 2017 15:48
@vibhaas the more you deal with json data, the more nosql's will start becoming easier
xyedabz
@xyedabz
May 10 2017 15:48
oh yeah gotcha Bangalore
Vibhaas
@vibhaas
May 10 2017 15:48
@xyedabz yep
JD Tadlock
@jdtdesigns
May 10 2017 15:48
they're all kinda the same to me now
xyedabz
@xyedabz
May 10 2017 15:49
@vibhaas is your dad a web developer ?
Vibhaas
@vibhaas
May 10 2017 15:49
@jdtdesigns :+1:
@xyedabz he was pretty interested in it.. yeah
@xyedabz not 'web' dev...
xyedabz
@xyedabz
May 10 2017 15:50
engineer ?
Vibhaas
@vibhaas
May 10 2017 15:50
@jdtdesigns plus i also like python
@xyedabz yeah passes IIT
@xyedabz chemical engineer
xyedabz
@xyedabz
May 10 2017 15:50
ok gotcha
JD Tadlock
@jdtdesigns
May 10 2017 15:50
@vibhaas You're domain dns needs some tweaking. It's routing to your digitalocean ip but not masking.
xyedabz
@xyedabz
May 10 2017 15:51
does anyone watches Silicon Valley Tv series ?
Phuc Hoang
@spideyinf
May 10 2017 16:32
I wonder how should I start building the Tribute Page without looking at the code.
Any advice will be much appreciated!
Theodore P.
@Ierofantis
May 10 2017 16:34
@spideyinf draw with pen/pencil on a paper how you would imagine Tribute Page and for every element and the whole structure make a google research. So you will learn many things from every result of your search
Phuc Hoang
@spideyinf
May 10 2017 16:37
Yes @Ierofantis I can draw and somehow figure out the structure, how should I search for each of them. Please give me one example
Theodore P.
@Ierofantis
May 10 2017 16:43
@spideyinf I can give you a very simple example. Lets say that you will draw a page with a header where you will have a navigation bar to link on different places of this page, a main content where you will have some sections with different contet(ex. About me, Portfolio etc) and a footer where you will have your links(end of the page).
So you can make for every element a search. For example one of the searches will be how to make a navigation bar on the top of the page on right position. You will see many results to compare and you will take what fits on your needs. Also you will study the code of every technique and so on
Phuc Hoang
@spideyinf
May 10 2017 16:44
I think I have found something after finish the outline drawing thanks @Ierofantis As a quick glance at the editor mode, I am not sure how many div have been created right at the start.
CamperBot
@camperbot
May 10 2017 16:44
spideyinf sends brownie points to @ierofantis :sparkles: :thumbsup: :sparkles:
:cookie: 414 | @ierofantis |http://www.freecodecamp.com/ierofantis
Phuc Hoang
@spideyinf
May 10 2017 16:45
about @spideyinf
CamperBot
@camperbot
May 10 2017 16:45
:cookie: 117 | @spideyinf |http://www.freecodecamp.com/spideyinf
Phuc Hoang
@spideyinf
May 10 2017 17:28
Hi there,
I need a Double check, someone can give me a hand
Joshua
@jfc246
May 10 2017 17:32
@spideyinf i have no idea what that is
srry
Phuc Hoang
@spideyinf
May 10 2017 17:36
Aha I have finished the Tribute page, something is still not right. Can you please take a look at this and show me some mistakes: https://codepen.io/spideyinf/pen/MmQZwY
@jfc246 I am so confused with the <div></div>
odinolini
@odinolini
May 10 2017 17:44
Hello I have finished the weather site project and it works fine on my computer but not on my phone.
Can someone else please confirm if it appears to work correctly for you?
deaninous
@deaninous
May 10 2017 17:48
@odinolini It did not ouput any weather info on mine
odinolini
@odinolini
May 10 2017 17:49
just to be sure: you are on https?
Bob Herbst
@BDmanny
May 10 2017 17:52
I'm making a tribute page and I'm adding images. I can add a link to one but the second image will not show up...
can anyone give me general info on how images work using html?
Gulsvi
@gulsvi
May 10 2017 18:14
@spideyinf You're supposed to create a unique tribute page, not copy the example. :) It's a great start though. A lot of the HTML you are using is for Bootstrap 3, but you have Bootstrap 4 added to your codepen. Click "Settings", click "CSS" and then use this link to bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Anthony Santos
@QUINGARSLAN
May 10 2017 18:15
@BDmanny <img src="your image link">
odinolini
@odinolini
May 10 2017 18:16
That is a problem with the bootstrap stuff on freecodecamp... codepen quickadds bootstrap 4 and the fcc material is for bootstrap 3. had me super confused for like a day :P
Gulsvi
@gulsvi
May 10 2017 18:17

@odinolini You're either hitting a privacy/location blocking issue on your phone or a timeout because you are using a CORS proxy. You don't need to use a proxy. Add ?callback=? to the end of your URL instead:

$.getJSON("https://api.darksky.net/forecast/" + "<<api key>>" + "/" + lat + "," + long + '?callback=?',

I see the weather but the icon shown is incorrect and it shows a timezone instead of my city :)

odinolini
@odinolini
May 10 2017 18:18
@SkyCoder01 thanks. I couldn't get it to work without the proxy but I'll try again. I'm sure my phone is not location blocking or anything like that.
CamperBot
@camperbot
May 10 2017 18:18
odinolini sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1347 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 10 2017 18:20
@odinolini The ?callback=? at the end tells $.getJSON to use JSONP, this lets you work around CORS issues so you don't have to use a proxy. https://www.sitepoint.com/jsonp-examples/
Aquar1us
@Aquar1us
May 10 2017 18:20
ey I finished a codepen thing
odinolini
@odinolini
May 10 2017 18:21
@SkyCoder01 ah great I have read about that but don't understood it fully. I tried it now like you wrote and it appears to work :)
Aquar1us
@Aquar1us
May 10 2017 18:21
rip picture tho
Cookie419
@Cookie419
May 10 2017 18:21
Still on the silly Cat Photo App and got stuck on the font-family thing . Please help me.
Gulsvi
@gulsvi
May 10 2017 18:22
@Aquar1us Nice work. If you add img-fluid to your img classes, it will make it responsive.
<img class="mx-auto d-block img-fluid" src="http://res.cloudinary.com/dyq7rnxvx/image/upload/v1494434135/lewis-hamilton-2007-canadian-grand-prix-montreal_xdfphd.jpg" alt="Lewis Hamilton winning the 2007 Canadian Grand Prix">
Anonymish
@ashishkpa87
May 10 2017 18:23
@Cookie419 how may I help you?
BrianWilliams28
@BrianWilliams28
May 10 2017 18:23
good day gents. Could someone please take a look at the code in my quote machine and figure out why the quotes aren't displaying when the button is clicked?
https://codepen.io/BrianWilliams28/pen/QvavXB
Gulsvi
@gulsvi
May 10 2017 18:25
@BrianWilliams28 jQuery is not added to your project. You also have a function call generate(); but no function with that name exists in your code. Use your browser's developer tools to see the errors (Ctrl+Shift+J)
Cookie419
@Cookie419
May 10 2017 18:26
Stuck on the font family question Ashish Can't go on because no matter what I try it's not what they want. Do you remeber doing this challenge????
Anonymish
@ashishkpa87
May 10 2017 18:27
@Cookie419 please show me the code..
Aquar1us
@Aquar1us
May 10 2017 18:27
@SkyCoder01 sorry I had chat closed, I will try your suggestion out now
BrianWilliams28
@BrianWilliams28
May 10 2017 18:27
@SkyCoder01 what do you mean by the generate(); function call? i created a function called getQuote() but none exists called generate?
Gulsvi
@gulsvi
May 10 2017 18:28
@BrianWilliams28 Line 2 of your JavaScript
BrianWilliams28
@BrianWilliams28
May 10 2017 18:29
@SkyCoder01 ahh I see what you're referring to now, thank you!
CamperBot
@camperbot
May 10 2017 18:29
brianwilliams28 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1348 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Anonymish
@ashishkpa87
May 10 2017 18:29
@BrianWilliams28 as @SkyCoder01 mentioned, JQUERY is not added. Add the jQuery before the BOOTSTRAP's JS.
Aquar1us
@Aquar1us
May 10 2017 18:29
hm the pic still doesnt fit.
didnt update smh
Gulsvi
@gulsvi
May 10 2017 18:30
Did you click run?
Aquar1us
@Aquar1us
May 10 2017 18:30
forgot to save rip
Gulsvi
@gulsvi
May 10 2017 18:31
Looks good now :+1:
Aquar1us
@Aquar1us
May 10 2017 18:31
eyy thanks
looks like a BBC page lmao
Gulsvi
@gulsvi
May 10 2017 18:32
haha :) you can always go back later to touch it up. Mine is really boring still
Aquar1us
@Aquar1us
May 10 2017 18:32
may I see yours?
Edward Huang
@edwardGunawan
May 10 2017 18:35
Do we need any template engine for express if we want to use angular client routing with express?
like ejs or jade
Gulsvi
@gulsvi
May 10 2017 18:41
@Aquar1us Sorry, didn't see your question. My projects are at: https://codepen.io/skycoder/
John Edwards
@javajohnHub
May 10 2017 18:52
@SkyCoder01 nice job on twitch.....not sure about your portfolio nav...but pretty sweet stuff
Trevor Yilk
@tayilk
May 10 2017 18:53
can someone tell me why my getJSON request isn't working?
https://codepen.io/tayilk/pen/jmZKjz?editors=1111
or point me to a resource that explains how to use jquery with these web API's?
Moisés Man
@moigithub
May 10 2017 18:59
@tayilk open ur browser devtools (F12 on most browsers) and go to console
check for errors
(NOT codepen console)
Eric. R. Suárez
@ericsuarez
May 10 2017 18:59

hiii everybody, I am stuck with one function in javascript, I have a modal that appear when I click in a button, the effect that this produce is reduce the opacity of the background and change the visibility of the modal, translate it to appear from the left and change the opacity to 1 . I add the effect with Jquery and I want make a focus() in a input inside of the modal when the effect finish but I dont know how make it.

My function


    $("#reg").click(function () {
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target.id == "pantalla") {
                $("#fullregistro").removeClass("active");
                $("#pantalla").removeClass("active");
            }
        }


        $("#fullregistro").addClass("active");
        $("#pantalla").addClass("active");





        $(".cancelar").click(function () {
            $("#fullregistro").removeClass("active");
            $("#pantalla").removeClass("active");
        })

        $("#username").focus();


    });
the class active
@mixin active($size:100em){
  transform: translateX($size);
  visibility: visible;
  opacity: 1;
}
Trevor Yilk
@tayilk
May 10 2017 19:00
@moigithub will do, thanks
CamperBot
@camperbot
May 10 2017 19:00
tayilk sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3213 | @moigithub |http://www.freecodecamp.com/moigithub
Eric. R. Suárez
@ericsuarez
May 10 2017 19:01
the element
 #pantalla.allin
          #fullregistro
            h1.titlelog Registro
            form(action='../guardar', method='post')
              input#username.form-control.form-reg(placeholder="Username",required, name='username',autofocus)
              input.form-control.form-reg(type="text",placeholder="Email",required, name='email')
              input.form-control.form-reg(type="password",placeholder="Password",required, name='password')
              input.form-control.form-reg(type="password",placeholder="Rewrite Password",required, name='spassword')
JD Tadlock
@jdtdesigns
May 10 2017 19:07
@EricRSuarez So you just show the modal and want the input to be focused?
Eric. R. Suárez
@ericsuarez
May 10 2017 19:07
yes @jdtdesigns
Eric. R. Suárez
@ericsuarez
May 10 2017 19:14
the default css of the element
  border-radius: 25px;
  margin: 5% auto; /* 20% from the top and centered */
  width: 80%;
  max-width: $width;
  background-color: white;
  overflow: auto;
  z-index: 0;
  max-height: 600px;
  position: relative;



  visibility: hidden;
  opacity: 0;
  transition: all 1s ease-out;
  left: 100em;
can anyone help me put actual quotation marks around the quotes?
JD Tadlock
@jdtdesigns
May 10 2017 19:18
@EricRSuarez It's probably propagation causing the issue. Here's one way to approach it. You shouldn't add click events to DOM elements without first removing the previous event. Otherwise, you cause 'stacking' which will slow down the app and cause other errors. By creating a function that closes the modal, you can remove any click event that would stack inside of that function. https://codepen.io/jdtadlock/pen/KmQYdO?editors=0010
Eric. R. Suárez
@ericsuarez
May 10 2017 19:25
@jdtdesigns thanks! I love you
CamperBot
@camperbot
May 10 2017 19:25
ericrsuarez sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 926 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
May 10 2017 19:25
@EricRSuarez lol, you're welcome ;)
Ramesh
@rnallu
May 10 2017 19:34
Guys, whats wrong in this challenge? I'm unable to get result as undefined when using fearNotLetter("bcd"), but its working in missing letter series.
function fearNotLetter(str) {
  var res;
  for (var i=0; i<str.length; i++){  
    if ((str.charCodeAt(i))+1 !== str.charCodeAt(i+1))
      return String.fromCharCode(str.charCodeAt(i)+1);

  }
return undefined; 
}

fearNotLetter("abce");
Gulsvi
@gulsvi
May 10 2017 19:48
@javajohnHub Thanks! Is the nav broken for you? I don't know what I want to do for my portfolio...may never finish it lol. Right now it looks kind of bootstrappy...so will probably scrap it for something more uniqe. Anyway...thanks for taking a look!
CamperBot
@camperbot
May 10 2017 19:48
skycoder01 sends brownie points to @javajohnhub :sparkles: :thumbsup: :sparkles:
:cookie: 180 | @javajohnhub |http://www.freecodecamp.com/javajohnhub
JD Tadlock
@jdtdesigns
May 10 2017 20:00
@SkyCoder01 what's your portfolio link?
iso
@iso1048
May 10 2017 20:02
@SkyCoder01 some of the icons from the darksky api have day/night. So if it was like clear night, what icon did you set that to?
since the animated icons by that guys dont really have an ideal one to use for it.
Matt
@mdmpdx
May 10 2017 20:13
got the Wikipedia challenge working, for the most part: https://codepen.io/mdmpdx/full/GmyWLg/
Something I'm keen on learning is how to start with one layout (say, with the form in the center of the screen, as a splash) and then, upon executing the search, switch to this top navbar treatment with results. I'm unsure what the best way to describe that is to look up the best approach, if anyone has any pointers of a starting point...
Cookie419
@Cookie419
May 10 2017 20:15
Thanks B.Williams your suggestion finally got me out. Grateful.
Matt
@mdmpdx
May 10 2017 20:19
I've checked out the code of the sample project (from the FCC project details) and it is over my head currently as far as the layout changes that happen
dinosaurjude
@dinosaurjude
May 10 2017 20:28
if anyone has time, could someone critique my tribute page? it just needs more content on the list but other than that, i think its done. https://codepen.io/dinosaurjude/pen/VbrZrK?editors=1000
cuylerconry
@cuylerconry
May 10 2017 20:29
I've been working on the weather app but am really confused how I can get my position and weather info. Can someone give me a hint or point me to some helpful info. https://codepen.io/Cuyler_Conry/pen/XRVXez
rubio
@letteroidz
May 10 2017 20:30
so the tribute page wasn't as hard but the portfoilo is confusing me as hell because the example page i looked at the guy has all this complicated stuff. can i make my portfoilo page like my tribute page instead? or .. i'm kinda very confused
Roxroy
@roxroy
May 10 2017 20:31
@mdmpdx, the wikipedia app works great. You can optionally add some more styling if you want.
To achieve what you are looking for, you would show and hide <div> blocks. Let say you have <div id="one"> and <div id="two"> add display: none; or display: block; to show or hide that part as needed. Hope this helps and guide you in the right direction. But you have a done a good job so far.
Matt
@mdmpdx
May 10 2017 20:35
@roxroy thanks, that is a good nudge in the direction I want to go -- I will see how it goes :)
CamperBot
@camperbot
May 10 2017 20:35
mdmpdx sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 845 | @roxroy |http://www.freecodecamp.com/roxroy
Roxroy
@roxroy
May 10 2017 20:35
@dinosaurjude, You can move on if you wish. I see that you have covered all the user stories, have a good understanding of bootstrap, css and html. Good job.
dinosaurjude
@dinosaurjude
May 10 2017 20:37
thank you @roxroy . i really appreciate that!
CamperBot
@camperbot
May 10 2017 20:37
dinosaurjude sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 846 | @roxroy |http://www.freecodecamp.com/roxroy
Suhyun Pak
@searchforac
May 10 2017 21:27
Hey all, I'm working on the twitch challenge and have some unexpected behavior. I am using a loop to make api calls for each user. Inside of the loop I have a temp obj which I fill with some data from the api call and push to an array I created outside of the function. When I console log the array it shows an empty array. When I click on the little carrot next to the array in the console, my objects are there but I cannot access them. My codepen: http://codepen.io/searchforac/pen/qmxZLW
@cuylerconry try https://ipapi.co/json for position
cuylerconry
@cuylerconry
May 10 2017 21:37
I tried that it says there is an error? I may have done something wrong
Suhyun Pak
@searchforac
May 10 2017 21:46
Hmmm it worked for me. I did this:
function getCity() {
  fetch('https://ipapi.co/json')
    .then(function(response) { 
      response.json().then(function(data) {  
        weatherApi(data.postal, data.country)
      });  
    })  
    .catch(function(err) {  
      console.log(err);  
    });
}
Leonardo de Melo
@Leonardo-demeloweb
May 10 2017 22:11
hello guys, i am working o a challenge "Build a Personal Portfolio Webpage". Every thing is going ok, but I could not load a external resource image .png with the code as follows:
<img class="img-fluid" src="https://drive.google.com/open?id=0B75AwcHuaB-OR0tkTUUwTFdlUE0" alt="">
some one can help-me to understand why could not I load external source image like this? the codepen support that kind of external loading?
Suhyun Pak
@searchforac
May 10 2017 22:14
@Leonardo-demeloweb hey, are you sure that src is a png file?
@Leonardo-demeloweb I don't know google drive and images but could that be a link to a viewer and not the actual image file.
Leonardo de Melo
@Leonardo-demeloweb
May 10 2017 22:15
@searchforac yes it suppose to be. I upload a .png on googledrive to do this: https://drive.google.com/open?id=0B75AwcHuaB-OR0tkTUUwTFdlUE0
@searchforac i understood, i do not have sure. but i had used it before another projects and it works. any suggestion how to load a .png by external source on codepen?
@Leonardo-demeloweb also you should put dash at closing tag '/>'
@Leonardo-demeloweb This worked for me:
<img class="img-fluid" src="https://lh4.googleusercontent.com/o6UcQpflShjySG09Oy8QTViF1zagq68HMx8PAJ98TUBSx-yNosqV8E5bobIvLyAEngfhwx0Il_tWog4=w1920-h912" alt="" />
Pagnito
@Pagnito
May 10 2017 22:31
anyone here done 'exact change'?
Leonardo de Melo
@Leonardo-demeloweb
May 10 2017 22:32
@searchforac thanks so much! i was researching and i discovered that it was deprecated google drive's functionality , so i needed to make by different way. This video show me https://www.youtube.com/watch?v=fD7LGl3IBFw
CamperBot
@camperbot
May 10 2017 22:32
leonardo-demeloweb sends brownie points to @searchforac :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @searchforac |http://www.freecodecamp.com/searchforac
aRtoo
@artoodeeto
May 10 2017 22:32
hi guys quick quick question. the ".map" keyword is like a loop or different?? the the sample in fcc it says the it will iterate so meaning it will b repeated like a loop. heres the code. if someone could explain the code will be much help. thank you.

var oldArray = [1,2,3,4,5];

// Only change code below this line.

var newArray = oldArray.map(function(newVal){

    return newVal + 3;

});

console.log(oldArray);
console.log(newArray);
Leonardo de Melo
@Leonardo-demeloweb
May 10 2017 22:34
@searchforac i had done like this and the .png loads
<img class="img-fluid" src="http://gdurl.com/GLq6" alt="">
Suhyun Pak
@searchforac
May 10 2017 22:35
@Leonardo-demeloweb nice!
Leonardo de Melo
@Leonardo-demeloweb
May 10 2017 22:38
@searchforac here is an explaining possible why the <img> tags do not need necessarily be closed with '/', just with '>'. https://www.codecademy.com/pt-BR/forum_questions/51ffd01c80ff33d5ba007c7c
Suhyun Pak
@searchforac
May 10 2017 22:40
@Leonardo-demeloweb Ah, I never knew it was optional. Thanks for sharing!
CamperBot
@camperbot
May 10 2017 22:40
searchforac sends brownie points to @leonardo-demeloweb :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @leonardo-demeloweb |http://www.freecodecamp.com/leonardo-demeloweb
Mojammel
@MojammelW
May 10 2017 22:41
Hey in java, what's the difference between the reference and primitive data type? Can you explain what they both do I don't understand this part.
Jim Tryon
@jimtryon
May 10 2017 22:42
@artoodeeto I’m going to explain map to you, just a sec
aRtoo
@artoodeeto
May 10 2017 22:43
@jimtryon thanks
CamperBot
@camperbot
May 10 2017 22:43
artoodeeto sends brownie points to @jimtryon :sparkles: :thumbsup: :sparkles:
:cookie: 32 | @jimtryon |http://www.freecodecamp.com/jimtryon
Jim Tryon
@jimtryon
May 10 2017 22:43
@artoodeeto Map basically takes an existing array and creates a new array with the results of the calling function
aRtoo
@artoodeeto
May 10 2017 22:44
@jimtryon so its like passing the new values of arrays in a different variable??
Tyler
@nmbrgts
May 10 2017 22:45
Hey @searchforac I took a look at your codepen and I don't think anything is wrong with your api request. What is happening is console.log(userInfo); is resolving before getInfo();. So it prints an empty array. If you add console.log(userInfo) to the end of your callback function, you will see that everything is being returned correctly. This article does a good job of explaining how asynchronous execution in javascript http://www.sohamkamani.com/blog/2016/03/14/wrapping-your-head-around-async-programming/
Jim Tryon
@jimtryon
May 10 2017 22:45
So if I have an array values = [1, 5, 10] and I call array2 = array.map(function(x))
return x * 5
My new array will be values = [5, 25, 50]
aRtoo
@artoodeeto
May 10 2017 22:49
@jimtryon ohh. thanks. going to check a different sample.
CamperBot
@camperbot
May 10 2017 22:49
artoodeeto sends brownie points to @jimtryon :sparkles: :thumbsup: :sparkles:
:warning: artoodeeto already gave jimtryon points
Suhyun Pak
@searchforac
May 10 2017 22:51
@nmbrgts Ah I see, thanks. Thanks for the article too, will take a look.
CamperBot
@camperbot
May 10 2017 22:51
searchforac sends brownie points to @nmbrgts :sparkles: :thumbsup: :sparkles:
:cookie: 195 | @nmbrgts |http://www.freecodecamp.com/nmbrgts
Matt
@mdmpdx
May 10 2017 22:56
I have the Wikipedia app working in 2 views now, but because I've duped the form, the search results don't work properly. I'm wondering how to get the getNewResults function working the same way, whether using the initial form or the navbar form (after having gotten results once already): https://codepen.io/mdmpdx/pen/VbQOWO
if you search again after getting results, it will just display the same results, because it's using the input from the form on the other div
Tyler
@nmbrgts
May 10 2017 22:57
@searchforac Glad I could help. I think the article does a much better job explaining than I could but, if you have any questions after looking through the article. I can try to help.
Margarita A.
@1line-at-atime
May 10 2017 23:03
Hi there! For the "Build a Tribute Page" are we allowed to use CSS or is it better to use HTML style attributes for inline styling?
Suhyun Pak
@searchforac
May 10 2017 23:06
@nmbrgts Thanks, that article was great! I thought I had an ok grasp of async but that really breaks it down.
CamperBot
@camperbot
May 10 2017 23:06
searchforac sends brownie points to @nmbrgts :sparkles: :thumbsup: :sparkles:
:warning: searchforac already gave nmbrgts points
Vinicius T Pereira
@trovao1990
May 10 2017 23:08
Hi everyone! Someone could help me to understand why my anchor links isn't working (#contact , #about)
https://codepen.io/trovao1990/pen/ZKxzKa
Margarita A.
@1line-at-atime
May 10 2017 23:09
@trovao1990 Did you add target="_blank"?
Scott Daves
@astrogeek74
May 10 2017 23:10
@1line-at-atime I know the presenter said the he only used a small piece of css, but I did add some into my project as I created some sectional styling.
Margarita A.
@1line-at-atime
May 10 2017 23:10
@trovao1990 You need to use it in your href.
@astrogeek74 Thanks! I was wondering if it was implied that we have to use HTML. I really want to practice jQuery.
CamperBot
@camperbot
May 10 2017 23:11
1line-at-atime sends brownie points to @astrogeek74 :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @astrogeek74 |http://www.freecodecamp.com/astrogeek74
Vinicius T Pereira
@trovao1990
May 10 2017 23:16
@1line-at-atime the anchor links to the same page only in a different div. Is it not possible in this case without _blank?
@1line-at-atime it was some bug with Mozilla Firefox. It is working now! Thanks anyway
CamperBot
@camperbot
May 10 2017 23:18
trovao1990 sends brownie points to @1line-at-atime :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @1line-at-atime |http://www.freecodecamp.com/1line-at-atime
Margarita A.
@1line-at-atime
May 10 2017 23:19
@trovao1990 The tutorial says that CodePen will overwrite any anchor tags so they say to be sure to add blank in your href tag.
Sure, no problem! Glad you resolved it.
Jeppe Bertelsen
@jepski105
May 10 2017 23:21
Hey all. Can someone help me with the Random Quote Machine? I finally got it to .GET a random quote from quotesbydesign.com, but I have no idea how to reset it so the button can be pressed several times
Gulsvi
@gulsvi
May 10 2017 23:28
@gothamknight These are the Dark Sky Icons - they give you the icon code to use in the JSON returned from the Dark Sky API. https://darkskyapp.github.io/skycons/
@jdtdesigns My portfolio is just a work in progress. Never finished it or submitted it.
@txtsd Welcome back!
Ralderman081813
@Ralderman081813
May 10 2017 23:32
The following is not working for me for var c. What did I do wrong? It is telling me that c should not contain undefined and should have a value of "I am a string!", and it does, so I need help on where I went wrong
// Initialize these three variables
var a = 5;
var b = 10;
var c = "I am a String!";
// Do not change code below this line
a = a + 1;
b = b + 5;
c = c + " String!";
iso
@iso1048
May 10 2017 23:32
@SkyCoder01 Awesome. Thanks
CamperBot
@camperbot
May 10 2017 23:32
gothamknight sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1349 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
May 10 2017 23:33
@jepski105 Quotes On Design requests get cached. You can see that they add cache: false in the second code example here: https://quotesondesign.com/api-v4-0/
You'll need to research how to do that with getJSON. Happy to help if you get stuck figuring out a solution.
Josep Maria Salvia Hornos
@josalhor
May 10 2017 23:33
Hey guys! Is there a standard way to vertically align inside a div? I've been trying for hours, no results that actually work
vertical-align doesn't seem to work - or I'm not applying it properly-
align-items-center either
I should share the code shouldn't I?
Gulsvi
@gulsvi
May 10 2017 23:35
@JosepSalvia Yeah, share the code. Vertical alignment can depend on a lot of factors
I've been doing it with hand-made margins
I think it's time to do something more elegant with the top bar
yash5657
@yash5657
May 10 2017 23:38
Hey all I have seen a developer's CSS file is in Binary..... How does that work?
Scott Daves
@astrogeek74
May 10 2017 23:40
@yash5657 it's likely not "truly" in binary, but rather obfucated. This requres software to be installed ont he server for the css to be rendered properly. If you google, css obfuscator, you'll see how it works.
Gulsvi
@gulsvi
May 10 2017 23:41
@JosepSalvia are you just trying to vertically center the navbar buttons?
Josep Maria Salvia Hornos
@josalhor
May 10 2017 23:41
yes I am
Gulsvi
@gulsvi
May 10 2017 23:42
Since you're using Bootstrap, why not let bootstrap do it for you? https://v4-alpha.getbootstrap.com/components/navbar/
A <button> is not for linking to a part of the page, it's for submitting data. You would want to use <a> tags and style them like buttons if you want to build your navbar from scratch
yash5657
@yash5657
May 10 2017 23:42
@astrogeek74 there you go, thanks a lot :) I will check it out. I think I was looking for wrong thing till now. :+1:
CamperBot
@camperbot
May 10 2017 23:42
yash5657 sends brownie points to @astrogeek74 :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @astrogeek74 |http://www.freecodecamp.com/astrogeek74
Josep Maria Salvia Hornos
@josalhor
May 10 2017 23:43
Because:
1- I want to avoid using Bootstrap as much as posible, I want to create it from scratch
2- I was planning to do just that after I figured out how to vertically align them
Gulsvi
@gulsvi
May 10 2017 23:44
@JosepSalvia Your navbar is inside a bootstrap column right now
Josep Maria Salvia Hornos
@josalhor
May 10 2017 23:45
Keep in mind I don't only want to apply it to the navbar, there are other parts of the page where I want to apply it
Gulsvi
@gulsvi
May 10 2017 23:45
And that's inside a bootstrap container - my advice for now, is to start a new pen and build your navbar without adding bootstrap css.
Josep Maria Salvia Hornos
@josalhor
May 10 2017 23:45
Like at the end of the page, in the around the web buttons
Same thing, inside a bootstrap container if I recall correctly
Gulsvi
@gulsvi
May 10 2017 23:46
It's going to be easier to vertically align everything without bootstrap getting in the way if you want to avoid using bootstrap
For example, create a div, put a button in it, and vertically center it
Josep Maria Salvia Hornos
@josalhor
May 10 2017 23:48
How do I make it responsive then?
Bootstrap allows to keep everything in place at any resolution, how would I apply that without Bs?
yash5657
@yash5657
May 10 2017 23:50
@astrogeek74 hey I have checked how obfuscating code works, but its just minifying or making it unclear, but I was looking for file in 010101 format
Jeppe Bertelsen
@jepski105
May 10 2017 23:51
@SkyCoder01 Hurray! I did it. Thanks! :)
CamperBot
@camperbot
May 10 2017 23:51
jepski105 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1350 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Josep Maria Salvia Hornos
@josalhor
May 10 2017 23:53
@SkyCoder01 I should then learn to use @media in css, right?
Scott Daves
@astrogeek74
May 10 2017 23:53
@yash5657 Does the entire CSS file look like that? Even true binary files aren't uaually written as 010101, it's normally bytes of data (00-FF).
Gulsvi
@gulsvi
May 10 2017 23:54
@JosepSalvia You're going to want to study flexbox and media queries if you don't want to use bootstrap.
@jepski105 Congrats :)
Jacobo Gómez
@jacobogomez
May 10 2017 23:55
Hi, I'm working in the Random Quote Machine. In my computer works flawlessly, but when I put it in codepen, the code that loads the quote doesn't work. Using the CodePen built-in console to call the loading quotes function brings a ""Cannot read property 'childNodes' of undefined"". How would I solve this problem? Thanks in advance!
Forgot to put my codepen link https://codepen.io/jacobogomez/pen/vmRBbO
Matt
@mdmpdx
May 10 2017 23:57
@JosepSalvia I was just looking into this earlier today. This seemed to work for me http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers/34914203#34914203
@JosepSalvia however, that is from a couple of years ago and so I'm not sure if it's the best way -- I am still learning myself