These are chat archives for FreeCodeCamp/HelpFrontEnd

13th
Dec 2017
Gaurav
@gauravmagan
Dec 13 2017 00:28
Screen Shot 2017-12-12 at 7.28.20 PM.png
hi @envincebal @DanLaff @Rogue00
can we put the div below the nav bar its in the back
div containing image
hi can anyone?
Dan Lafferty
@DanLaff
Dec 13 2017 00:31
@gauravmagan ???
Gaurav
@gauravmagan
Dec 13 2017 00:32
whats problem with you man ?
@DanLaff take it easy buddy if you know you can help
Chi
@chiyc
Dec 13 2017 00:34
Hahahah
Gaurav
@gauravmagan
Dec 13 2017 00:34
lol
Chi
@chiyc
Dec 13 2017 00:34
@gauravmagan I think instead of putting the div below the navbar, you want to focus on putting the navbar over everything else
Otherwise, any other element might give you issues with covering the navbar
Gaurav
@gauravmagan
Dec 13 2017 00:38
@chiyc thank you it helped me
CamperBot
@camperbot
Dec 13 2017 00:38
gauravmagan sends brownie points to @chiyc :sparkles: :thumbsup: :sparkles:
:cookie: 349 | @chiyc |http://www.freecodecamp.org/chiyc
Chi
@chiyc
Dec 13 2017 00:39
You're welcome! Feel free to @ me if you ever need help
Ghost
@ghost~56bd2077e610378809c105cd
Dec 13 2017 00:40
Awesome thanks @chiyc :+1:
CamperBot
@camperbot
Dec 13 2017 00:40
rogue00 sends brownie points to @chiyc :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @chiyc |http://www.freecodecamp.org/chiyc
Yingjie (Iris) Hu
@huyingjie
Dec 13 2017 00:55
https://codepen.io/yingjiehu/pen/JMjVVE I am doing the weather app. The last line is not center in the screen. Could anyone help me?
Chi
@chiyc
Dec 13 2017 01:00
@huyingjie Sure!
It looks like you're using Bootstrap and its .row class for each row
You're also using .text-center to center the inline elements in your HTML. The reason your weather elements are not being centered is because div elements don't respond the same way to .text-center
If you inspect the .row div element, you'll see that its display property is set to display: flex
You can center the content of a flex container by giving the parent element the property justify-content: center
And luckily, it looks like Bootstrap provide you a class to do this through their framework
Yingjie (Iris) Hu
@huyingjie
Dec 13 2017 01:04
@Chi Thank you!!. I used bootstrap justify-content-center and it works
CamperBot
@camperbot
Dec 13 2017 01:04
huyingjie sends brownie points to @chi :sparkles: :thumbsup: :sparkles:
api offline
Chi
@chiyc
Dec 13 2017 01:04
Cool, you found it!
(by the way, for anyone looking to get a better understanding of how to position flex items, I highly recommend playing http://flexboxfroggy.com/)
Sorin Ruse
@sorinr
Dec 13 2017 03:05
@huyingjie add also in css background-repeat: no-repeat; to the body selector
@huyingjie and also background-attachment: fixed; to make the img full width/height even when you resize the screen
Sorin Ruse
@sorinr
Dec 13 2017 03:12
@huyingjie you may also look into positioning the background and apply the one that fits your needs
Riddos
@Riddos
Dec 13 2017 03:31
could anyone give me a hand with a tribute page
linkin-park
@linkin-park
Dec 13 2017 03:54
is anyone interested in pair programming
Isaiah Trembley
@IsaiahCT
Dec 13 2017 03:56
does anyione have a challenge I can do
linkin-park
@linkin-park
Dec 13 2017 03:58
?
linkin-park
@linkin-park
Dec 13 2017 04:06
there any many challenges in codewars.com @IsaiahCT
still havent cleared the 7 kyu
Isaiah Trembley
@IsaiahCT
Dec 13 2017 04:07
I meant more like cool canvas or CSS
linkin-park
@linkin-park
Dec 13 2017 04:07
well you can transform into cool canvas/css
and host it for more fun :)
Isaiah Trembley
@IsaiahCT
Dec 13 2017 04:21
.
and I tried signing up for a 100 css challenge
havent'g gotten an emial back
danielgkang
@danielgkang
Dec 13 2017 04:28
hi im working on the portfolio page and i was wondering if when creating your sections (rows) it is good practice to hard code the height of your rows
Yingjie (Iris) Hu
@huyingjie
Dec 13 2017 04:33
@sorinr Thank you
CamperBot
@camperbot
Dec 13 2017 04:33
huyingjie sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1374 | @sorinr |http://www.freecodecamp.org/sorinr
linkin-park
@linkin-park
Dec 13 2017 04:35
is anyone interested in pair programming
?
Isaiah Trembley
@IsaiahCT
Dec 13 2017 04:35
sure
though,i need to ask.... what is your age?
linkin-park
@linkin-park
Dec 13 2017 04:36
are you pointing to me ?
@IsaiahCT
Isaiah Trembley
@IsaiahCT
Dec 13 2017 04:36
yes
I wouldn't mind pair programming
TheRedstoneTaco
@TheRedstoneTaco
Dec 13 2017 04:36
Go to #LetsPair
Isaiah Trembley
@IsaiahCT
Dec 13 2017 04:36
?
TheRedstoneTaco
@TheRedstoneTaco
Dec 13 2017 04:36
For pairing
linkin-park
@linkin-park
Dec 13 2017 04:37
thanks @TheRedstoneTaco
CamperBot
@camperbot
Dec 13 2017 04:37
linkin-park sends brownie points to @theredstonetaco :sparkles: :thumbsup: :sparkles:
:cookie: 210 | @theredstonetaco |http://www.freecodecamp.org/theredstonetaco
linkin-park
@linkin-park
Dec 13 2017 05:18
@IsaiahCT do you know js ?
well the project requires you to know JS
kerafyrm02
@kerafyrm02
Dec 13 2017 05:50
Anyone need help?
linkin-park
@linkin-park
Dec 13 2017 06:10
yes @kerafyrm02
kerafyrm02
@kerafyrm02
Dec 13 2017 06:11
What's up? Whata re you stuck on?
linkin-park
@linkin-park
Dec 13 2017 07:26
hi @kerafyrm02
are you still around?
@GitHub-Henry yes
i want to do couple of projects via pair programming is anyone interested let me know
Henry
@GitHub-Henry
Dec 13 2017 07:38
@linkin-park this room is dedicated to those that want to work with others on projects
linkin-park
@linkin-park
Dec 13 2017 07:40
yes the room a sleep
kerafyrm02
@kerafyrm02
Dec 13 2017 07:59
who is stuck?
im here for a lil longer
linkin-park
@linkin-park
Dec 13 2017 08:32
hi @kerafyrm02
Abhishek Saini
@sainiabhi
Dec 13 2017 08:42
hello
Yannick Wiley
@ywiley94
Dec 13 2017 10:04
Sup everybody.
Anybody got any group projects they would like to work on together. I would love to get together. I'm working on finishing up my Simon game. So I want to start solidifying my skills so I can't start applying to places.
primuscovenant
@primuscovenant
Dec 13 2017 11:15
@heroiczero tx
CamperBot
@camperbot
Dec 13 2017 11:15
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2104 | @heroiczero |http://www.freecodecamp.org/heroiczero
GabriRa
@GabriRa
Dec 13 2017 11:21
Hey, has anyone worked with clementine boilerplate?
Brijrajsinh Gohil
@brijrajgohil
Dec 13 2017 11:47
Can anybody help me with Random Quote Generator?
I can share the codepen link.
A-J Roos
@Asjas
Dec 13 2017 11:58
@brijrajgohil You post a codepen link and your problem. Someone will help if they have time
It doesn't help if you sit and wait for someone
Brijrajsinh Gohil
@brijrajgohil
Dec 13 2017 11:59
@Asjas Sure!
Yossi Fisch
@yoizfefisch
Dec 13 2017 12:00
Hi, I am working on the Product Landing Page (FreeCodeCamp Beta project) and tried to use vh units with display: flex; for the fixed header and a few more objects that I want to always show up when a user lands at the page before scrolling. Basically to achieve a full screen view.
I realized that by using vh units I am causing a problem with zooming because the object's size does not scale with the text within it. I was searching around and found so many writings about it but sobody seems to attempt to make it work.
So I was wondering if there really is no way for using vh units that still looks fine when zoomed.
Otherwise, is there an alternative to vh units if you want to achieve a full screen experience?
https://codepen.io/yoizfefisch/full/XebKOw/
A-J Roos
@Asjas
Dec 13 2017 12:02
@brijrajgohil Open Chrome Dev tools and check the error you have. That is why your site isn't working
Stephen James
@sjames1958gm
Dec 13 2017 12:04
@brijrajgohil You are having a CORS error as can be seen in the devtools console.
For this API you need to replace
jsonp=parseQuote
with
jsonp=?
which tells jquery to handle the jsonp callback for you
BuntyBru
@BuntyBru
Dec 13 2017 12:50
has anyone faced this issue
instead of "submit" "Submit Query"
appears on
<input type="submit">
as i am aware a button forms with the label "submit"
but has anybody faced an issue where the label was "Submit Query"
@planigan
whenever i post a message this person sees it,
whether its day/night or anything
How??? :smile:
A-J Roos
@Asjas
Dec 13 2017 12:53
Most likely his gitter is constantly open in this room?
BuntyBru
@BuntyBru
Dec 13 2017 12:54
24x7 ?
A-J Roos
@Asjas
Dec 13 2017 12:54
If he forgets it maybe
BuntyBru
@BuntyBru
Dec 13 2017 12:54
@Asjas
have you faced the input issue ever?
A-J Roos
@Asjas
Dec 13 2017 12:55
no
And most likely if you want someone to help you with your problem I'd suggest posting code in jsfiddle and codepen and then linking here. Asking a vague question that is split over multiple lines won't get much of a response.
Markus Kiili
@Masd925
Dec 13 2017 13:00
@BuntyBru If you don't specify a value, the button will have a default label, chosen by the user agent. This label is likely to be something along the lines of "Submit" or "Submit Query." https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit
You can change it by for example <input type="submit" value="Send Request">
BuntyBru
@BuntyBru
Dec 13 2017 13:07
@Masd925
Aware of that, I just wanted to know whether anyone has faced similar issue
i mean "Submit Query" issue
Markus Kiili
@Masd925
Dec 13 2017 13:11
@BuntyBru If you don't specify the submit button text, it defaults to something that the browser thinks is suitable.
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 14:14
Hey guys, I'm looking to get help on centering am responsive button with a min width and min height. Right now my problem is that once the screen is small enough for the min-width to kick in, my left 50% ( for centering) is pushing it too far to the right
dinesh
@1532j0004kg
Dec 13 2017 14:20
please post the code @DecisiveIndecisive
Stephen James
@sjames1958gm
Dec 13 2017 14:20
@DecisiveIndecisive Consider using flexbox for centering
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 14:21

.startButton {
width: 15%;
height: 10%;
min-width: 100px;
min-height: 40x;

border: 2px solid blue;
position: absolute;
top: 56%;
left: 42.5%;

background-color: rgb(200,200,255);
}

dinesh
@1532j0004kg
Dec 13 2017 14:23
r u using code pen?
if codepen please share the link
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 14:25

https://codepen.io/DecisiveIndecisive/pen/KXjXXd?editors=1100

The startButton is the object in question

DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 14:39
@sjames1958gm I'm looking at a flexbox tutorial now and it seems like this is most useful for distributing with between multiple inline elements. Would this be applicable for just one element in a responsive design?
elad ben aderet
@eladonline
Dec 13 2017 14:42
@DecisiveIndecisive you can start looking on grid its the future
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 14:43
I've got a medium article pulled up on grid, I just figured I'm close to done with this project, I'd like to maintain the integrity of the code and focus on better suited applications on my next one
Stephen James
@sjames1958gm
Dec 13 2017 14:44
@DecisiveIndecisive You can use flexbox for a single item on a row that you want to center.
If you wrap your button in a div with class container (odd that you have a <body> tag inside your body
.container {
  display:flex;
  justify-content: center;
}
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 14:46
I have all sorts of messy stuff going on haha, I put this project down for a while and am just getting back into it, excuse the superfluous code
oh wow that worked phenomenally
Marc
@MWBauer
Dec 13 2017 14:53
Morning everyone! Happy :coffee: to you!
Stephen James
@sjames1958gm
Dec 13 2017 14:55
@MWBauer :wave:
@DecisiveIndecisive :+1:
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 14:57
Thanks mate, I'm gonna mess around some more and get this thing off the ground
Marc
@MWBauer
Dec 13 2017 14:58
Fortune be with you.
@sjames1958gm I'm trying to remember how to use strong. Is it <h1 strong> or is that a class? Do I put that in the css .h1?
Stephen James
@sjames1958gm
Dec 13 2017 15:01
<h1><strong>Text</strong></h1>
Marc
@MWBauer
Dec 13 2017 15:01
OH. ok
thx
Stephen James
@sjames1958gm
Dec 13 2017 15:02
Of course h1 is already likely to be strong
@MWBauer Generally, I would recommend font-weight css property
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Marc
@MWBauer
Dec 13 2017 15:05
Thanks for that.
Marc
@MWBauer
Dec 13 2017 15:12
I'm not really watching but just noticed thru my weather app that it has warmed up 1 deg C.
The toggle button needs help.
It is a button...it does react when you click it, but it isn't doing anything.
It seems to me that the way it is currently setup it is just a button and when pressed it will look to see what the current display is (c or f) and then make the calculation to make it the other and post it.
Press it again and it will look to see which is displayed (f or c), do the calculation and post the other.
<div class "toggle" id="c">
     <button type="button" class="btn btn-danger btn-lg" id="celsius">Toggle C/F</button>
the id = celsius isn't doing anything useful, right?
Omar Tan
@wheelhot
Dec 13 2017 15:28
Hmm, the instructions for TwitchTV JSON API seems out of date?
I'm confused on what I need to do in getting Twitch API as it requires a key now. The instructions seems to point to a few alternatives, but which one should I use/most recent one?
Stephen James
@sjames1958gm
Dec 13 2017 15:32
@MWBauer If you aren't referencing the id celsius in your javascript then no
@wheelhot Use the one set up by FCC
https://wind-bow.glitch.me/
This does not require the API key.
Omar Tan
@wheelhot
Dec 13 2017 15:44
Thanks @sjames1958gm , so I just have to a regular JSON call and use that URL you just gave?
CamperBot
@camperbot
Dec 13 2017 15:44
wheelhot sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8776 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Dec 13 2017 15:56
@wheelhot sort of, you have to add to the end of that to get channels vs streams vs etc.
That page has some info
Marc
@MWBauer
Dec 13 2017 15:56
@sjames1958gm I think that this is what it's referencing
var celsius = result.main.temp;
                    $("#celsius").html(
                        "<h4> " +
                            celsius +
                            " " +
                            String.fromCharCode(176) +
                            "c" +
                            "<i class='fa fa-celsius'></i>" +
                            "</h4>"
                    );
                    $(".c").click(function() {
                        var celsius = result.main.temp;
                        $("#celsius").html(
                            "<h4>Celsius : " +
                                celsius +
                                " " +
                                String.fromCharCode(176) +
                                "c" +
                                "<i class='fa fa-celsius'></i>" +
                                "</h4>"
                        );
                    });

                    $(".f").click(function() {
                        var celsius = result.main.temp;
                        var fahrenheit = celsius * 9 / 5 + 32;
                        $("#celsius").html(
                            "<h5>Farenheit : " +
                                fahrenheit +
                                " " +
                                String.fromCharCode(176) +
                                "f" +
                                "</h5>"
                        );
Stephen James
@sjames1958gm
Dec 13 2017 15:57
@MWBauer Yes #celsius would reference the id="celsuis"
there has to be a class="c" and class="f" for the latter two "click" handlers
Marc
@MWBauer
Dec 13 2017 15:57
Right, ok. So it is getting the info from here. The info it is getting is temp in C.
Can you help me understand the rest of this chunk?
Like, why the string.fromcharcode?
Marc
@MWBauer
Dec 13 2017 16:03
trying to reaad up on click stuff to understand what to do with it.
the .f is a class?
I could class="f" and it would show up?
Marc
@MWBauer
Dec 13 2017 16:11
so I plugged them both into the toggle div and I can toggle once from C to F but not back. lol
It's a step in the right direction.
Henry
@GitHub-Henry
Dec 13 2017 16:11
@MWBauer this may help you out.
:shipit: :dizzy:
@MWBauer and perhaps this
:shipit: :sparkles:
Stephen James
@sjames1958gm
Dec 13 2017 16:22
@MWBauer There would be a problem if you had both, they would both fire and only the second one would matter.
You might need a boolean variable, say isCelsius, that indicates what is currently displayed and use
That to determine which to display on click
AbrisM
@AbrisM
Dec 13 2017 17:13
Hello all! Does anyone know what a "22" error in codepen means?
Henry
@GitHub-Henry
Dec 13 2017 17:36
@AbrisM perhaps show it in context
Isaiah Trembley
@IsaiahCT
Dec 13 2017 19:04
@linkin-park yesI know js
aRtoo
@artoodeeto
Dec 13 2017 19:19
hello masters. question how can i center both start and restart button? thanks. heres the codepen. https://codepen.io/artoo/pen/mpdvxv
Henry
@GitHub-Henry
Dec 13 2017 19:21
@artoodeeto looks like it's time to explore flexbox
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 19:21
I was going to mention the same, I've been messing it with today and it's actually very sueful
aRtoo
@artoodeeto
Dec 13 2017 19:22
@GitHub-Henry ikr? i was out for 2 months because I went to philippines and my laptop got broken over there. but no excuses. just asking for help
Henry
@GitHub-Henry
Dec 13 2017 19:23
what's ikr?
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 19:23
Speaking of which, can someone explain how to get the green outline box to sit on top of the blue outline box in a static location? Been screwing with flexbox and positions for an hour and I feel like Im getting nowhere -.-
https://codepen.io/DecisiveIndecisive/pen/KXjXXd?editors=1000
aRtoo
@artoodeeto
Dec 13 2017 19:24
@GitHub-Henry I Know Right. hehehe.
@DecisiveIndecisive hey bro can i copy the link for the API image?
Henry
@GitHub-Henry
Dec 13 2017 19:26
image.png
@DecisiveIndecisive i see blue and purple, no green.
aRtoo
@artoodeeto
Dec 13 2017 19:26
@GitHub-Henry press the begin
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 19:27

@artoodeeto I'm trying to edit your codepen but it's not letting me (maybe yo cant, but I feel like Ive edited someone elses before..)

Anyways, I think if you add btnPlay "display: flex" and you give both your START and RESET divs "flex: 1"

^ This may help put you on the right track

Yeah sorry, go ahead and hit the begin button
aRtoo
@artoodeeto
Dec 13 2017 19:28
@DecisiveIndecisive hmm aight im gonna try bro. thanks'
CamperBot
@camperbot
Dec 13 2017 19:28
artoodeeto sends brownie points to @decisiveindecisive :sparkles: :thumbsup: :sparkles:
api offline
Henry
@GitHub-Henry
Dec 13 2017 19:29
@DecisiveIndecisive the green box seems to 'stay' in the same location relative to the blue box.
image.png
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 19:29
Henry
@GitHub-Henry
Dec 13 2017 19:30
@DecisiveIndecisive weird, it stays in the same place on my screen, that's why i sent the screen shot
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 19:30
If you run it in full screen, whenever the blue box size changes the green box does not follow
I have the blue box set to a min window size, so if you're running on mobile it might not cause the problem
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 19:35
@GitHub-Henry I think I may have gotten
Yeah I did, took me a little bit to realize I'm doing exactly what I want it to do to the refresh button in the top right. Anyways, thanks for looking into it
Henry
@GitHub-Henry
Dec 13 2017 19:37
@DecisiveIndecisive yes, i see the change, the box stays inside the top left corner, congrats on finding the solution. :+1:
@DecisiveIndecisive btw, if you copy an image and paste it into the gitter chat box, the image will display
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 19:42
Ah, thanks for the tip
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 20:12
I've got another for you @GitHub-Henry , this one is stumping me -.-

https://codepen.io/DecisiveIndecisive/pen/KXjXXd?editors=0100

Trying to make it so when the infoButton is hovered on, another element is affected. I can get the infoButton along to do something, but when trying to make another element, nothing happens. Thoughts..?

Henry
@GitHub-Henry
Dec 13 2017 20:16
@DecisiveIndecisive perhaps this will help
the first one from stackoverflow looks interesting
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 20:19
Lmao, thanks, I already went to that stackoverflow answer. If you had tried the code would you have seen it wasn't working the same way
Henry
@GitHub-Henry
Dec 13 2017 20:22
@DecisiveIndecisive what about onmouseover
DecisiveIndecisive
@DecisiveIndecisive
Dec 13 2017 21:00
/sigh it's defeating me I'll have to look back later
Henry
@GitHub-Henry
Dec 13 2017 21:08
@DecisiveIndecisive quick thought, look at bind()
Rishabh Gupta
@RishabhGupta22
Dec 13 2017 21:48
How to copy the quote so that when i click on twitter's logo it prints that quote there itself.
thanks in advance.
https://codepen.io/rishabhgupta/full/qPYNyZ
Linus Phan
@linusphan
Dec 13 2017 22:49
Hey does anybody have some time
who can offer some help with the wikipedia viewer?
Lisa Copeland
@lisacopeland
Dec 13 2017 22:51
@linusphan what do you need
Lisa Copeland
@lisacopeland
Dec 13 2017 22:57
@linusphan did you figure it out?
Linus Phan
@linusphan
Dec 13 2017 22:58
@lisacopeland Hi, thanks for your reply. I am still stuck
CamperBot
@camperbot
Dec 13 2017 22:58
linusphan sends brownie points to @lisacopeland :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @lisacopeland |http://www.freecodecamp.org/lisacopeland
Lisa Copeland
@lisacopeland
Dec 13 2017 22:59
what help do you need?
It's just not working the way I wanted it
Lisa Copeland
@lisacopeland
Dec 13 2017 22:59
can you be more specific
Linus Phan
@linusphan
Dec 13 2017 23:00
Okay, let me try. So I created a title variable that contains a new title with each iteration. Then I have a template variable that clones each list element. Then, I should be including the title in the list item. Then I'm trying to append the new list items to the unordered list
But, when I try to run the code, It seems to be make way more list items than 10
also, the titles are not displaying
var api = "https://en.wikipedia.org/w/api.php?origin=*&action=query&titles=";

$(document).ready(function() {
  $("#search-entry").on("input", function() {
    var searchEntry = $("#search-entry").val().replace(/\s/g, "%20");
    var urlString = api + searchEntry + "&prop=revisions&rvprop=content&format=json&generator=allpages&gaplimit=10&gapfrom=" + $("#search-entry").val();
    console.log(urlString);
    $.ajax({
      url: urlString,
      dataType: 'json',
      type: 'GET',
      success: function(data) {
        console.log(data);
        $.each(data.query.pages, function(){
          var title = $(this).title;
          var template = $("#results-wrapper ul").find("li").clone();
          template.html(title);
          $("#results-wrapper").find("ul").append(template);
        }); // end anonymous function on $.each
      } // end success function
    }); // end ajax call
  }); // end on input function
}); // end document ready function
That's my JS code
Lisa Copeland
@lisacopeland
Dec 13 2017 23:04
I don't see a click function for the search button
how are you supposed to limit the entries? Is it that gaplimit thing?
Linus Phan
@linusphan
Dec 13 2017 23:05
yeah gaplimit was supposed to limit the entries to 10
im on this page right now tring to figure it out
Lisa Copeland
@lisacopeland
Dec 13 2017 23:06
It looks like it limits it to 10 by default, so I don't think you need to specify a parameter
Linus Phan
@linusphan
Dec 13 2017 23:06
it was supposed to update starting when user inputs some text
Lisa Copeland
@lisacopeland
Dec 13 2017 23:08
It looks like the function ".on" fires whenever the input in the box changes, so for each key stroke it is going to be run, so if you type a three letter word into the box it is going to show you 30 entries
Why don't you start by creating a click handler for your "search entry" button and just have it do the search when the user clicks it?
Also, I don't think you are correctly accessing the data in the "success" callback for the ajax call
Linus Phan
@linusphan
Dec 13 2017 23:11
@lisacopeland okay I'll try that
Lisa Copeland
@lisacopeland
Dec 13 2017 23:11
Good Luck!
Linus Phan
@linusphan
Dec 13 2017 23:11
@lisacopeland thanks
CamperBot
@camperbot
Dec 13 2017 23:11
linusphan sends brownie points to @lisacopeland :sparkles: :thumbsup: :sparkles:
api offline
Dan Lafferty
@DanLaff
Dec 13 2017 23:13

@linusphan You will need to work on that query some more, it only returns a page id and a title. You can get your success function kind of working with something like:

      success: function(data) {
        $("#results-wrapper").empty();
        for(let id of Object.keys(data.query.pages)) {
          $("#results-wrapper").append(`<li>${data.query.pages[id].title}</li>`)
        }
      } // end success function

Just as Lisa recommends though, you're making way too many ajax calls by searching on input. It's best to use the built in autocomplete functionality in jQuery or simply let people use the search button.

amiega
@amiega
Dec 13 2017 23:15
Hi all, how to insert circle in rectangle right or left side with css or bootstrap? i want two rectangle and inside of them circle in the same line. if someone has a response, you welcome
Linus Phan
@linusphan
Dec 13 2017 23:16
@amiega you can use floats?
there is also grid and flexbox
you can have borders around a div, use border-radius to turn it into a circle too
@DanLaff thanks for your help too. Ok I'll work on that query some more
CamperBot
@camperbot
Dec 13 2017 23:17
linusphan sends brownie points to @danlaff :sparkles: :thumbsup: :sparkles:
api offline
Linus Phan
@linusphan
Dec 13 2017 23:18
it's a little daunting to get trhough the documentaiton
and confusing and not clear
Manon
@manonja
Dec 13 2017 23:21

Hi guys, I am trying to make toggle work but for some reason it only work if write my code in the console (google chrome).Nothing happens otherwise. I am using Atom. Any idea...? Thanks!!

JS code:

$("#X").click(function(){
        playerTurn = "X";
        computersTurn="O";
        $(".playerX").toggle()
    });

CSS:

.playerX, .playerO{
    color:#ffff00;
    display:none;
    text-align:left;
}

HTML:

<div class="container text-center">
            <h1> Would you like to play <span> <a class="btn btn-secondary" id="X">X</a> </span> or
             <span> <a class="btn btn-secondary" id="O">O</a> </span> ? </h1>
        </div>

        <div class="board">
            <div class="row">
                <div class="col-md-6">
                    <div class="playerX"> You play X!</div>
                    <div class="playerO"> You play O!</div>
                </div>
            </div>
Kaz Baig
@kbaig
Dec 13 2017 23:24
@manonja what functionality are you trying to achieve
make <div class="playerX"> You play X!</div> appear?
Manon
@manonja
Dec 13 2017 23:25
@kbaig I want the class playerX to appear on my screen when the player click “X”.
Kaz Baig
@kbaig
Dec 13 2017 23:25
what happens when you remove display: none
does it disappear?
Manon
@manonja
Dec 13 2017 23:27
@kbaig no it appears. I want to do a basic toggle: when I click on X the class player X appears. I don’t want it to appear at first, just when we click on X.
It does work when I type $("#X").click(function(){ playerTurn = "X"; computersTurn="O"; $(".playerX").toggle() });
directly in the console
Kaz Baig
@kbaig
Dec 13 2017 23:28
@manonja I understand. I just wanted to know if it works in the opposite direction
would be helpful if you put it in a pen
not immediately clear what the problem could be
Manon
@manonja
Dec 13 2017 23:29
Yeah.. I know
you mean codepen?
Linus Phan
@linusphan
Dec 13 2017 23:31
Hey thanks for all the hints btw you guys
I'll try to get the query right so I can see the content next
and URL
also the list thing is working now, I see what the problem was before
Kaz Baig
@kbaig
Dec 13 2017 23:32
@manonja yes
ADIL KARMOUZI
@mradil16
Dec 13 2017 23:33
Guys I built recently a website (modern IMDB movie template ) with HTML / SASS / vanilla JS : http://adilk.sgedu.site/IMDB/index.html - what do you think ?
Linus Phan
@linusphan
Dec 13 2017 23:47
hey does anybody know what prop=revisions does?
I've been trying to understand the wiki api but it's not clicking so well
The API docs make some assumptions about knowledge of MediaWiki...and can be fairly terse. You shouldn't need to worry about that property unless you want revision history for a specific topic
Linus Phan
@linusphan
Dec 13 2017 23:56
@DanLaff i will get better at this over time right?
the more i try to read it the better i should get i hope
var api = "https://en.wikipedia.org/w/api.php?origin=*&action=query&titles=";

$(document).ready(function() {
  $("#search-btn").on("click", function() {
    var searchEntry = $("#search-entry").val().replace(/\s/g, "%20");
    var urlString = api + searchEntry + "&prop=revisions&rvprop=content&rvsection=0&format=json&generator=allpages&gaplimit=10&gapfrom=" + $("#search-entry").val();
    console.log(urlString);
    $.ajax({
      url: urlString,
      dataType: 'json',
      type: 'GET',
      success: function(data) {
        console.log(data);
        $("#results-wrapper").empty();
        for(let id of Object.keys(data.query.pages)) {
          $("#results-wrapper").append(`<li>${data.query.pages[id].title}</li>`)
        }
      } // end success function
    }); // end ajax call
  }); // end on input function
}); // end document ready function
I'm not sure how to get the right query..