Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Jun 19 2020 20:09
    @krisb1220 banned @Gastony
  • May 14 2020 22:39
    @bjorno43 banned @minitechtips_twitter
  • May 14 2020 22:38
    @bjorno43 banned @real-action
  • Feb 01 2020 00:27
    @bjorno43 banned @Ndoua
  • Jan 07 2020 03:10
    @bjorno43 banned @doctor-sam
  • Aug 17 2019 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 2019 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 2019 17:13
    @mstellaluna banned @cmal
  • Jan 08 2019 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
WiseKodama
@WiseKodama
they have display:table-cell and the container has display:table
Marco Mazzeo
@Doko85
you gave 20 px of padding to every side
WiseKodama
@WiseKodama
and still they don't adjust to the size
Marco Mazzeo
@Doko85
that's probably why
WiseKodama
@WiseKodama
No twitchInfo has padding
btnContainer does not
Gulsvi
@gulsvi
@WiseKodama Remove the height for your .btnContainer. It's set to 40px
@pshiwakoti1 Step 6 of the challenge tells you which API to use: https://www.freecodecamp.com/challenges/build-a-wikipedia-viewer
WiseKodama
@WiseKodama
vertically its fine, but I want the edge of the left button to reach the left edge of the twitch info and vice versa @SkyCoder01
Gulsvi
@gulsvi
Hmmmmm, I would have started with a different approach. Let me see if I can adjust your HTML/CSS in an easy way
WiseKodama
@WiseKodama
Thanks for taking the time @SkyCoder01
CamperBot
@camperbot
:cookie: 286 | @skycoder01 |http://www.freecodecamp.com/skycoder01
wisekodama sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Annetta Ives
@IvesNoIdea

Guys, I'm getting desperate. I'm just about ready to give up on this stupid Wikipedia Viewer. I'm so frustrated. I can't see what I'm doing wrong.

I decided to set up a separate CodePen just to work on the $.getJSON(); call to the API. Here's my script:

$(document).ready(function() {
  $("#button").click(function() {
    $("#greeting").html("Hello World");

    $.getJSON("https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json", function(json) {
      $("#output").html(JSON.stringify(json));
    });

    });
  });

I've just stuck the 'Hello World' in so I can check the event handler is working, which it is. The URL I'm using is lifted directly from the Wikipedia API documentation, and works perfectly when pasted into my browser. The 'stringify' bit is copied directly from the FreeCodeCamp tutorial, just amended to target the relevant element in my HTML. But it isn't doing anything.
Link to the CodePen.
Can you see where I'm going wrong?

Gulsvi
@gulsvi
@WiseKodama I think if you do this, it will look the way you want:
  • Change the .btnContainer width to 40vw (the same width as your #twitchInfo)
  • Change the .butn width to 25% (to fill up the .btnContainer, which is the same width as #twitchInfo)
I think that's what you want? But not 100% sure xD
WiseKodama
@WiseKodama
No for some reason it doesn't work
since if i change the butns to 25%
they take up 25% of the entire html
instead of the div container they are in...
Gulsvi
@gulsvi
@WiseKodama Also change .btnContainer's width too. This is what I see:
image.png
.btnContainer{
  width:40vw;
  height:40px;
  display:table;
  margin:0 auto;
}
.butn{
  width: 25%;
  display:table-cell;
  text-decoration:underline;
}
@IvesNoIdea Have you learned how to read your browser's console yet?
WiseKodama
@WiseKodama
Ahhh, now it works!
Thanks again! @SkyCoder01
CamperBot
@camperbot
wisekodama sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: wisekodama already gave skycoder01 points
WiseKodama
@WiseKodama
!
Gulsvi
@gulsvi
@WiseKodama :)
@WiseKodama I think you change #twitchInfo's width with a media query - you'll have to do the same for the .btnContainer
Annetta Ives
@IvesNoIdea
@SkyCoder01 No, I've got the console enabled on CodePen, but it isn't showing anything. I don't know how to view my browser's console. I'm using Firefox.
Gulsvi
@gulsvi
@IvesNoIdea If you press Ctrl+Shift+J it will give you a different console than the one in codepen. It gives more errors and information.
Annetta Ives
@IvesNoIdea
Cool, I'll have a look...BRB...
Gulsvi
@gulsvi
At least on my computer, if you're using Mac or Linux, I'm not sure what the command is...
Annetta Ives
@IvesNoIdea

It worked (I'm on Linux). I got this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json. (Reason: CORS header 'Access-Control-Allow-Origin' missing).  (unknown)

It looks like it's the API blocking my request, but I don't understand why :worried:

I wonder if I need a key...
Gulsvi
@gulsvi
@IvesNoIdea Perfect, This will help you in the future :) you can use google to search for that error. For now, I'll save you the search. Add &origin=* to the end of your wikipedia URL
That will allow requests from any origin
It's a security error
Annetta Ives
@IvesNoIdea
@SkyCoder01 Cool, thanks :-)
CamperBot
@camperbot
ivesnoidea sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
$(document).ready(function() {
  $("#button").click(function() {
    $("#greeting").html("Hello World");
    $.getJSON("https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&origin=*", function(json) {
      $("#output").html(JSON.stringify(json));
    });
  });
});
Annetta Ives
@IvesNoIdea
And it's working! I would never have figured that out without your help! You're a superstar :smile:
Gulsvi
@gulsvi
Nah, I had to learn it the same as you :)
Annetta Ives
@IvesNoIdea
Well yeah, but that doesn't mean it isn't valuable to me! Three flipping days I've been bashing my head against that particular brick wall...
Ghost
@ghost~589bb2dad73408ce4f490e7b
Hey! anyone uses Brackets here?
Simon Cordova
@gbsimon87
@aftabparvez I have before yes