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
25% each of the btnContainer
Not sure why they aren't parented to the btnContainer
WiseKodama
@WiseKodama
Any ideas what could be causing that? @SkyCoder01
Prakash Shiwakoti
@pshiwakoti1
hello @SkyCoder01 I finished my WEather app. Now I am working on a Wikipedia viewer. Can you please give me some hints how to start and which api to use?
Gulsvi
@gulsvi
@WiseKodama I'm sorry, I don't understand what you're hoping it to look like
:(
WiseKodama
@WiseKodama
@SkyCoder01 the buttons are supposed to take up the whole length of the top of the panel that contains the channel info
Gulsvi
@gulsvi
Oh, so you want them touching the top of the #twitchinfo div?
WiseKodama
@WiseKodama
Indeed :)
Gulsvi
@gulsvi
Ahhh, sorry maybe I need more coffee. I'll take a closer look now
WiseKodama
@WiseKodama
I've put them into a div called btnContainer and the width of that is the same as the width of twitchInfo
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;
}
WiseKodama
@WiseKodama
Ahhh, now it works!
Gulsvi
@gulsvi
@IvesNoIdea Have you learned how to read your browser's console yet?
WiseKodama
@WiseKodama
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