I tried that but it didn't want to behave. I figured it out though, I was just using ".class" in the css, but it needed to be "element.class"
whats up everyone so trying to get my wiki viewer done and i need a pointer as to how to break up all the results i get into link headers and short previews. can anyone point me in correct direction : http://codepen.io/pawan92/pen/zqzWYB
Hello World!
welcome to FreeCodeCamp @jkid314159!
This button collapse not working?
<button type="button" id="collapse" class="btn btn-danger" data-toggle="collapse" data-target="#disclaimer">DISCLAIMER</button>
<div id="disclaimer" class="collapse">Activities for educational purposes. I am teaching my self to code Front End of Website.
</div>
@jkid314159
#disclaimer should have class collapsed not collapse
I think. lemme test
@random-x does not seem to work???
yeah I am wrong. haha.. 1 moment :)
@random-x my refernce: http://www.w3schools.com/bootstrap/bootstrap_collapse.asp
@random-x I'm wrong too
my reference
@random-x thank you anyway.
jkid314159 sends brownie points to @random-x :sparkles: :thumbsup: :sparkles:
:star: 115 | @random-x | http://www.freecodecamp.com/random-x
@jkid314159 it seems to require the bootstrap transitions.js and collapse.js plugins
@random-x do not know how to add???
@pawan92 check your console.log
your api call is returning as a nested array instead of an object
@ehekatlOf it is in codepne
try to mess around with the api call parameters
@jkid314159 in codepen, you need to include jquery and bootstrap.js (in that order)
@jkid314159 then the default test from Bootstrap should work:
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
Hey guys, I'm working on my portfolio and trying to figure out how to navigate to different sections of the webpage by clicking buttons in the navigation bar. How do I do that?
@random-x did not have bootstrap.js that did the trick
@random-x thank you.
jkid314159 sends brownie points to @random-x :sparkles: :thumbsup: :sparkles:
:warning: jkid314159 already gave random-x points
I'm trying to setup a localhost with Node to develop the Random Quote Machine (Not a fan of codepen).
Anyone have links on how to do this? I have node installed already .
Anyone have links on how to do this? I have node installed already .
hello
some here for help somle css
some one here for css help
Starting the wikipedia viewer project... can someone point me to a resource that explains what the "No 'Access-Control-Allow-Origin'" error is and how to get around it... thanks.
I've been trying to figure out what that means, but it's all over my head...
@ehekatlOf yea how do i fix that?
has anybody completed the twitchtv app using twitch-js-sdk instead of JSONP?
@thejasonfile unfortunately I think the only workaround there is to use JSONP. Those calls do a pre-flight call which checks the server to see if it has a specific header set.
@thejasonfile and it's not set on wikipedia's servers so for me, I couldn't figure out a way around it other than JSONP
@thejasonfile to learn more about the Access-Control-Allow-Origin error, google CORS or Cross Origin Resource Sharing
@erbastian okay, I'll start looking there. thanks!
thejasonfile sends brownie points to @erbastian :sparkles: :thumbsup: :sparkles:
:star: 283 | @erbastian | http://www.freecodecamp.com/erbastian
sure thing
Can anyone point me to or explain how to navigate/ scroll through the portfolio page challenge?
@igoramelichev what do you mean?
anybody have experience working with jquery mobile?
for page transitions I mean
guys maybe you can help just my own little project, can't seem to get a function to work, in short, when i click on a box (as seen from boxes event listener) all the notes play instead of just the corresponding index in the notes array...
var h1 = document.querySelector("h1");
var boxes = document.querySelectorAll(".box");
var notes = document.querySelectorAll(".audio");
function playBoxes(){
for(i=0; i<boxes.length; i++){
boxes[i].addEventListener("click", function(){
for(j = 0; j < notes.length; j++){
if(i = j){
notes[i].currentTime = 0;
notes[i].play();
}
}
});
}
}
playBoxes();
nobody?...
@sbarayev - there is a problem with doing things this way. You are declaring a number of different functions... wait, I see two problems at least, maybe one is more significant than the other.
- your test (or what looks like a test)
if ( i = j )is not correct. You want to do eitheri == jori === jif you are comparing values. That might be the problem? - the second thing that I think is the problem for real is that you are creating a number of anonymous functions for click handlers. Each of those functions references the variable
i. When you declare functions like this, the value ofiis a 'global' to each of them, and the problem is that after the for loop creates these functions, each function sees the same 'final' value of i. If you want to prove this, put a console.log statement in there and have it print the value ofiand see if that isn't the case?
@sbarayev - without having the full code to look at, those are my best guesses...
any html/jquery wizards here?
i need help with a search box
i want the user to be able to enter a zip code which i then feed to an api URL
@richao03 Which part do you need help with?
i have a search box set up
but i dont know how to get the value from the box once someone enters it
@richao03 You can use something like
var value = $('#mySearchBox').val();
hmmm i tried that
... i think its because i set it to clicking the icon but the clicking isnt working
alright, I think I'm done with this
any thoughts before I send it?
also what framework is normally used for page transition animations
@ehekatlOf looks great! also looks like you did this project after a lot of other FCC projects
I did haha
I wanted to do the portfolio last
because otherwise what would I put in the portfolio?
fill.style.height = 22; why does this stop all my functions from running?
@richao03 Can you share your code?
I used this
For mine i used this. http://jsbin.com/favubeyiki/5/edit?html,output
var headerHeight = $("div.navbar-header").height();
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - headerHeight
}, 500);
return false;
}
}
});
});:bulb: to format code use backticks! ``` more info
hey that one's new
pretty useful
any feed back ? (function wise)
http://codepen.io/Trip1666/pen/LNzMvX?editors=1111
http://codepen.io/Trip1666/pen/LNzMvX?editors=1111
Hey all, anyone have any luck with the Wikipedia viewer
@outsmart where are you at with it?
@trip16661 the most confusing part for me was that the arrows are "more from the same author" and since your default is "Me." there are no more from the same author
y
i guess i need to make it a random since start
@trip16661 functionality seems fine, but in your HTML you use a Bootstrap class, but you don't have bootstrap included in your CSS
might want to add Bootstrap
@trip16661 also.. I found a bug :(
what it is?
hey @MMux I have walked away from it so many times because I keep getting an error in codepen that I cannpot use an external API.
@MMux I am about to start again now from scratch
@trip16661 to recreate the bug:
- search for a name (e.g., Buddha)
- click Random
- hit > arrow
- the quote is still from the searched-for author, but it shows the Random author's name
s/original/searched-for/
@karpimpski y well the html is really temporal i just did it quicly and took some
@trip16661 oh i know. just for future reference when you design it, make sure you add bootstrap. it just seemed like you missed it, since you added a bootstrap class to your html div
oh y
i think that's because i wanted to make it simple but i guess thing mixed up a bit
@MMux this is the error that stopped me in my tracks and has made me thow my hands in the air ```XMLHttpRequest cannot load http://api.jquery.com/ajax/test.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access. The response had HTTP status code 404.
@outsmart here's a link to mine if this helps. I think you have to use JSONP json w/ padding; otherwise you won't get a response
http://codepen.io/MMux/pen/qZVyMa
try adding &callback=? to the end of your request
http://codepen.io/MMux/pen/qZVyMa
try adding &callback=? to the end of your request
ok, @MMux let me give that an attempt... thanks!
outsmart sends brownie points to @mmux :sparkles: :thumbsup: :sparkles:
:star: 2 | @mmux | http://www.freecodecamp.com/mmux
@random-x y i think that bug is kind of complicated since now i relise that arrows will only work with the people searched
how would I be able to use a database for random quotes and sources? in my random quote generator I made I just had a function to push quotes and sources to arrays.
@karpimpski did you try use a random quote api first?
@outsmart no, I didn't think about APIs until after I finished the project. is there any way to quickly make my own simple API for things like that? I'd like to have custom quotes
@trip16661 ahh..sorry :( didn't mean to cause more work :( but you can now either simplify it or change the way you implement it maybe. Maybe make a "Random" button and a "More from this Author" button? and program the "More from this Author" to do a new search...? not sure
the only whay to make it work
is to making them appear only when putting an input
and dissaper if random is clicked
that's the only way i can think of
is to making them appear only when putting an input
and dissaper if random is clicked
that's the only way i can think of
i just thought of that
@trip16661 that is a good idea, too!
i will just try to find how to do that first xD
i thought of it but I don't have the skills :P
you have the skill.. just not yet the knowledge :P
nah man it took me 2 days to do it was stuck so many times i really suck at this xDD hope some day i get decent though xDD
@trip16661 it's a bit of aptitude, a bit of skill, and a lot of persistence. :)
This message was deleted
@murtinha
Guys, whats missing here?
function telephoneCheck(str) {
// Good luck!
var regExp=/^1?[\s-]?[^\(]?([0-9]{3})[\)$]?[\s\-]?([0-9]{3})[\s-]?([0-9]{4})$/;
return regExp.test(str);
}
telephoneCheck("(275)76227382");its challenge Validate US Telephone Numbers
@murtinha before your first block of 3 digits, you have
[^\(]? which means "optionally match anything EXCEPT FOR ("
@random-x just changed that, thanks man! But its still not working
murtinha sends brownie points to @random-x :sparkles: :thumbsup: :sparkles:
:star: 118 | @random-x | http://www.freecodecamp.com/random-x
what's the updated regex?
@random-x /^1?[\s-]?^[(]?([0-9]{3})[)$]?[\s-]?([0-9]{3})[\s-]?([0-9]{4})$/;
@murtinha sooo.. there's a few problems here... you didn't actually fix that correctly exactly ;)
@random-x I still struggle with regxp
hmm.. you might want to try a site like http://www.regexr.com/ or http://www.regex101.com/
they will show you what you're matching, dynamically, and tell you what each character means
@murtinha one important thing to note in your testing: your test (telephoneCheck("(275)76227382");) should properly FAIL since it is too long
@random-x I did all steps already at regxr
@random-x its failing though
@random-x How can I not permit something like (555 ?
@murtinha not so easy a Q :) the best way is to do the following:
match
match
(555) OR 555
that way, you won't match
(555 or 555)
@random-x shiiiit when I fix something, I break other hahahaha omg
@murtinha ;)
I have to go to bed soon, but paste what you have and I'll give you a last couple hints
@random-x thanks man!!! just did it know!
murtinha sends brownie points to @random-x :sparkles: :thumbsup: :sparkles:
:warning: murtinha already gave random-x points
oh, gj :)
@random-x figure it out hahaha
This message was deleted
no wiki entry for:
please with the buttonclick to tweet the quote and not linkpre-defined text
how to add twitter icon through font awesome?
This message was deleted
no wiki entry for:
please with the buttonclick to tweet the quote and not linkpre-defined text p data-height268 data-theme-id0 data-slug-hashmyenmj data-default-tabresult data-userleah-h data-previewtrue classcodepensee the pen a hrefhttpcodepenioleah-hpenmyenmjrand quote gen v2a by leah h a hrefhttpcodepenioleah-h@leah-ha on a hrefhttpcodepeniocodepenapscript async srcassetscodepenioassetsembedeijsscript
plz sm1 help
a little help with the twitter button to tweet the quote generatedhere's my link: http://codepen.io/leah-h/pen/MyENmj
I have included fa fa-twitter class and also included font awesome library but its not working why?
@Zoher-ali it would help if you can show us your code
@leah-h you should target your tweet button with "on click" and then get the text from your quote
you might also open a new window if you want
@kirbyedy that's my problem. JS is throwing me for a loop.
@leah-h well I opened the console of your pen, and there are couple of errors
$("#yourtweetbutton").on("click", function() {
window.open("http://twitter.com/home/?status=" + $("#yourquote").text();
});
this is how your tweet should look like... its an example
Hi guys. I just finished until before the random quote generator project. I am going to start on it, so I wanted to ask if anybody has come across a good article/resource/tutorial to use APIs?
@kirbyedy thanks! i'll go ahead and try to make it work...errors?
and also a good API for random quotes
leah-h sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 807 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
@The-Seth there are plenty of them, you can choose whichever you want
@leah-h the first I see is getting $ undefined, which tells me jquery is not embedded, but I checked it, and its there
what you can do, is to put it as first end then, the others... like bootstrap and so on
@leah-h also your background image does not load, I guess this google link is not public for everyone
thanks @kirbyedy. any help on how to use them?
the-seth sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 808 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
@The-Seth on all those sites there is a documentation, and an example, so read through, and if you get stuck ask a question here
someone will help
hi everybody, which images stocker do you use in codepen ?
can you explain please, I dont understand
I use zup-image, i already try google drive but even if i change settings of rights to put it public it doesn't work. @kirbyedy i mean website to stock picture and photos for our <img/> and background-image...
sorry for my bad english
Help with this code, the loop worked through the query, however non of the if statement worked. How can I make the if statements work
$(document).ready(function(){
var users = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff","ESL_SC2"];
for (var i=0; i<users.length; i++) {
$.getJSON("https://api.twitch.tv/kraken/streams/"+users[i]+"?callback=?", function(data) {
/*$("#results").empty();*/
if (data.stream !== "null") {
$("#results").append("<img src="+data.stream.channel.profile_banner>+"</img>");
/*$("#results").animate("#003300");*/
}
if (data.error) {
$("#results").append("<p>account closed <br>"+users[i]+"</p>");
}
if (data.stream === "null") {
$("#results").append("<p>offline <br>"+data.channel.display_name+"</p>");
}
console.log(data);
document.getElementById("test").innerHTML = data.stream.channel.profile_banner;
});
}
no wiki entry for:
with this code the loop worked through the query however non of the if statement worked how can i make the if statements workdocumentreadyfunctionvar users freecodecamp storbeck terakilobyte habathcxrobotcalebthomasballingernoobs2ninjasbeohoffesl_sc2 for var i0 iuserslength i getjsonhttpsapitwitchtvkrakenstreamsusersicallback functiondata resultsemptyif datastream null resultsappendimg srcdatastreamchannelprofile_bannerimg resultsanimate003300if dataerror resultsappendpaccount closed brusersipif datastream null resultsappendpoffline brdatachanneldisplay_namep consolelogdata documentgetelementbyidtestinnerhtml datastreamchannelprofile_banner
@JScapin
i search one which can allow me to have folders
@Itsdenty try removing the quotes around null
Thanks @mutantspore let me try that out
itsdenty sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1366 | @mutantspore | http://www.freecodecamp.com/mutantspore
Removing the quote didn't solve the problem
what happens when I just use $.someFunction() , instead of $(someElement).someFunction() ?
@Itsdenty show me the pen?
http://codepen.io/itsdenty/pen/NNwKOw @mutantspore
@Itsdenty it is null not “null” but the other thing is that the for loop wil race through and not deal with the asychronous nature of the api calls. .forEach is a better way to do it.
Not sure of the for each syntax, have a vague knowledge about it, may be I should go n read about it. Hope the for each method would be called b4 the Api query?
i’m looking at it. seems to be som eerror in console too
How to get quote text to twitter text box in random qoute machine?
@Zoher-ali read this: http://denvycom.com/blog/twitter-button-with-dynamic-custom-data-text-message/ It helped me with the matter
The errors were due to the document method I called for the banner picture the method tried to get the banner for all the looped query however only the streaming user would return a banner others gave error @mutantspore
@Itsdenty yes you’ll need to do anothher api call to get the details of the offline users
using
https://api.twitch.tv/kraken/channels/
@URobert how to paste quote in twitter text area ... i m not getting there
@Zoher-ali for how long have you been trying ?
http://codepen.io/fu11st4ck/full/YqEeXM/ can I get brownie points for this? lol
half an hour :worried:
document.getElementById("twitter_link").setAttribute("data-text",q);
i have done this
@Zoher-ali heh , keep trying :) If nothing else works, here is the way I did it... but you should not look at the code IMO until you've been trying to solve it on your own for at least a few hours/days ;P http://codepen.io/URobert/pen/WQgqve
gtg
gn all
@Itsdenty ok there is the basic bit working .. there were syntax errors in the image tag. you’ll need to do the second api call to get the offline users info.
http://codepen.io/MutantSpore/pen/ZWvQvW?editors=1010
http://codepen.io/MutantSpore/pen/ZWvQvW?editors=1010
Thanks @mutantspore you have been most helpful
itsdenty sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: itsdenty already gave mutantspore points
TWICH-TV challenge : should we have to know channels name or is there a request to have a random chanel name
I think there are channels which you should include in the project description
@JScapin check ur instructions the channel names are there
The user arrays
Also the freecodecamp sample app could offer additional user names as it has more users than the instructions user array
@Itsdenty "check ur instructions the channel names are there" sorry i didn't understand that sentence
@JScapin if you read the project instructions carefully you wil see a list of usernames, in several places
@JScapin and also #7 for those who no longer have accounts
thanks @Itsdenty @mutantspore i m going to do that
jscapin sends brownie points to @itsdenty and @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1367 | @mutantspore | http://www.freecodecamp.com/mutantspore
:star: 281 | @itsdenty | http://www.freecodecamp.com/itsdenty
@JScapin and to make sure you have someone who will be online 24/7 you can try “monstercat”
this array of active usernames has got a name ?
@JScapin this is my list. It has more than required so I didn’t miss a case.
var twitchUsers = [
"freecodecamp",
"storbeck",
"terakilobyte",
"habathcx",
"RobotCaleb",
"comster404",
"brunofin",
"thomasballinger",
"noobs2ninjas",
"beohoff",
"medrybw",
"fixt",
"monstercat",
"aces_tv",
"youredm",
"karachencev",
"behkuhtv"
];
@JScapin well they are not all active or online.. that’s part of the challenge
i wonder one question, a noob question, where do you see the console.log(data) of mycodepen ? in my browser console? if nothing appears, something is wrong in my getJSON request ?
the actual browser console.
well are there errors in the browser console?
finally not : i can see the object of freecodecamp channel
Hi! :) I am trying to test the api for my random generator project . It doesn't seem to work correctly. Can anyone tell me if I did everything correctly at my end?
yes, it’s actually streaming now … add in monstercat and it should show also
i understand that we have to create an array, and push in it several channel by ourself
This is the api I am using - http://forismatic.com/en/api/
Is it possible for a css selector for all img tags to select appended img elements using jquery?
@Itsdenty When in doubt, use a class
@Zerazera if it won't select appended tags it won't appended class too.
@Itsdenty thanks
Reason being appended elements only get written to the document after my documents get ready, they are not an original html document elements
I only wish to know if they yet can be styled using css as using the div class element won't resize the appended image. I actually intend to resize all appended images
Ur welcome @JScapin
@Itsdenty After being appended they should be selectable like anything else
Thanks @Zerazera
itsdenty sends brownie points to @zerazera :sparkles: :thumbsup: :sparkles:
:star: 309 | @zerazera | http://www.freecodecamp.com/zerazera
The Seth, when I created my random quote app, I didn't use any api, I created my random quote array myself, n it works fine, except It has limited quotes in its library.
@Itsdenty You should take the opportunity to learn a JSON API. Especially because the weather app will take much more time and be much more frustrating than you think.
But @The-Seth you dudn
@Zerazera I learned api with the weather app, now on the twitch TV app
N that was why I asked the css selector questions
Sweet
Got to resize returned images
They were too big for comfort
Quick question, is there a alternative of using media queries in bootstrap ?
erm... is these the alternative for using media queries with bootstrap ?? http://getbootstrap.com/css/#mixins
I have really no clue, but what is wrong with the media queries ?
@kirbyedy I am already using boot strap , so I thought there would be a much faster way to do this... I am really enjoying how much time and useless fuss bootstrap saves while designing a web site
found this one, if you want to play
@kirbyedy thanks a lot ! :smile:
mr-kumar-abhishek sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 810 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
@kirbyedy however I should use media queries with it too for devices that don't support javascript or have them disabled
@kirbyedy I will suck it up with media queries... then //
yea
@kirbyedy I will just push them all in
@media (max-width: @screen-xs-max) { ... }
<div class="prices">
<ul>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
</ul>
</div>.prices li:first-child {
border-radius: 10px 10px 0 0;
}@96street shouldn't that be ..
.prices ul li:first-child {
border-radius: 10px 10px 0 0;
}or ..
.prices ul li:first-child {
border-radius: 10px 10px 0px 0px
}??
:confused:
isn't that the same thing? @Mr-Kumar-Abhishek
@96street as far as i know you have to follow the order if
li is in ul you have to write them ul before li. and .. using px for pixels makes sense there is percentage values too , also not using ; on last property of css class was the syntax I was taught but use them it doesn't makes a difference.
@96street oh yes and there is
em values too.. for webkit ..
is it me or people build
js calculator not correctly?
didn't we already go over this?
thats his style, spamming every channel with the same question :D
at least he has style, I guess.
Hi all - first time asking for help on here so apologies if I don't follow the etiquette ;) - I've searched online, and played around for (literally) days on the Wikipedia project. I've made good progress, but am stuck on using .append to add HTML elements to my page (I want to show the entries I have gotten from Wikipedia). Would somebody mind taking a look?
Hi everyone. Anybody doing the jQuery course? I'm stuck with a problem, I know the solution must be very simple, yet I can't find it. Care to help?
@robertadamian What's the question
Make the second child in each of your well elements bounce. You must target the children of element with the target class.
$(".well:nth-child(2)").addClass("animated bounce");
;'(
what am I doing wrong?
@robertadamian Javascript is a zero-indexed language
1=0, 2=1, 3=2 and so on
I know, then why does it say in the instructions --
Here's how you would give the third element in each well the bounce class:
$(".target:nth-child(3)").addClass("animated bounce");
Because it's CSS and css goes 1 = 1, 2 = 2, 3 = 3.
Also, it looks like it should work from your example...
Let me take a peek.
Hello can some1 help me with random quote machine
I m not getting how to paste quote to twitter text area???
It bounces the entire div, not just the 2nd element
OH
@robertadamian That's because it bounces every well
@robertadamian It will bounce the class that the pseudo-selector is attached to.
wasn't target:nth-child() supposed to prevent that?
@robertadamian I don't think so. The nth-child selects the specific element within it's parent and no others. But in this case you'll want to select the button element in the well, not just the well itself.
hey plz some1 help :worried:
@Gregory-Buhler ah okay, that makes sence. Thank you.
robertadamian sends brownie points to @gregory-buhler :sparkles: :thumbsup: :sparkles:
:star: 303 | @gregory-buhler | http://www.freecodecamp.com/gregory-buhler
*sense
@Zoher-ali Just a sec
@Gregory-Buhler ok
@Zoher-ali https://dev.twitter.com/web/tweet-button
take a look at how they craft their tweet.
@Gregory-Buhler its good with hello world example but not working for quote since its unknown at the time of page load
The button shouldn't be a link itself, but it should be able to call a javascript function that fires the link.
pull it on click
What kirby said ^_^
how can i supply link to html attribute in javascript?
As in convert it so that it works with html? Like %20 = [space] ?
@Zoher-ali how do you write the quote in html ?
@Gregory-Buhler @kirbyedy for sending quote one time is ok. but when i change quote with new quote button the value in of text in href attribute doesn't change why?
Do you update the text var in your function each time you click the tweet button?
with the tweet button target the div which has your quote text
@kirbyedy @Gregory-Buhler :smile: ok its done actually i have declared quote variable as a local variable ... Thats y it was not changing for all functions...
thank for suggestions @kirbyedy @Gregory-Buhler
zoher-ali sends brownie points to @kirbyedy and @gregory-buhler :sparkles: :thumbsup: :sparkles:
:star: 812 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
:star: 304 | @gregory-buhler | http://www.freecodecamp.com/gregory-buhler
$("#button").on("click", function() {
window.open("http://twitter.com/home/?status=" + $("#yourquote").text()
@kirbyedy i have not used jquery at ol
maybe next time :)
Hi, I'm looking for feedback on my Wikipedia viewer. http://codepen.io/Zeratul/full/YqEdaj/
<html>
<head>
<title>Star Wars Spoilers</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<img src="img/deathstar.png" />
<p class="spoiler">
<!--Spoiler:-->
<span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
</p>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>$(".spoiler span").hide();
$(".spoiler").append("<button>Reveal Spoiler!</button>");
i complted part of of thisbootcamp course now stuck at 'Build a Personal Portfolio Webpage'
dont know where to start
can anyone guide me where what should i do
@Adonis2115 look at examples and see waht you like
then try implementing those things through research on stackoverflow/google
or pick one part to focus on like html only
then go to css
@wumpafruits Which browser? How's it being called?
@wumpafruits are you including jquery?
Hi guys
I need your help please
@Zerka1982 Wazzap?
I would like to be able to click on either buttons
Feedback and Sreach
here is my code please guide me
They're both clickable, what exactly are you looking for with them?
Only feedback is clickable :(
And search needs to be a button?
yes
it could be a link as well
but the problem I can't click on it
So are you looking for the pointer to change when you hover over it? Or are you trying to get get it to do something? In it's current state it is clickable, it just has no actions associated with it.
is Search button clickable ????
Hello there, I was wondering if someone could tell me why my link isn't showing up ? I did a lot of research and I know it comes from the href, but I can't figure out a fix :
@Zerka1982 Your feedback div has a width that covers your button when the height of the browser window is too smal.
Could you please change the code and send it back please
can some1 help me the JSON thingy ? http://codepen.io/dioannou/pen/repMOO?editors=1011 what am i doing wrong ? i dont get a back data ?
@Dextr36 your link shows up for me. it says Twitter, and when i click on it it opens a twitter page with "Hello"
Oh wow, is it only me then ? I'm freaking out since an hour.. Maybe it's just firefox oO
@Dextr36 hm, it works ok for me in chrome and firefox
@Coira I really am stupid and should've checked out in another browser T-T. It doesn't work in my firefox but does in Edge... Thank you <3
dextr36 sends brownie points to @coira :sparkles: :thumbsup: :sparkles:
:star: 542 | @coira | http://www.freecodecamp.com/coira
@dioannou30 check your console (the one you get when you press f12, not the codepen one). you get the error
VM1864 pen.js:14 Uncaught ReferenceError: lat is not defined
@Dextr36 huh, that's weird. oh well at least it's working :p
@dioannou30 also, you need to put either
// or http:// in front of api.openweathermap.org/blah
#feedback {
height: 104px;
width: 100px;
pointer-events:none;
position: fixed;
top: 30%;
z-index: 999;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
@Coira WOW thanks a LOOOOOOOOOOOOT
dioannou30 sends brownie points to @coira :sparkles: :thumbsup: :sparkles:
@Zerka1982 That should help
:star: 543 | @coira | http://www.freecodecamp.com/coira
np :)
can someone help me understand why i cannot get anything to append to my calculator screen? http://codepen.io/MattBoland/pen/KzqdOW?editors=1010
@Gregory-Buhler Thanks a lot !
zerka1982 sends brownie points to @gregory-buhler :sparkles: :thumbsup: :sparkles:
:star: 305 | @gregory-buhler | http://www.freecodecamp.com/gregory-buhler
any one why buttons are not inlining https://codepen.io/findname/pen/qZPwWX?editors=1100
I can't get the carousel to move or the Prev and Next buttons to work. Anyone know what I screwed up on? Thanks https://codepen.io/rwashington21/full/jqagwN/
@findname Your nav is set up a bit off, you declared your nav as navtabs, you'll want to change that to a navbar. THen your ul class should be a "nav navbar-nav pull-right" after that remove the pull-right from the li's
<nav class="navbar navbar-inverse navbar-fixed-top transparent">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<li><a href="" class="btn btn-lg btn-primary padding-top">Aboutme</a></li>
<li><a href="" class=" btn btn-lg btn-primary">Portfolio</a></li> <li><a href="" class="btn btn-lg btn-primary">Contact</a></li></ul> <!-- <a><h1>My Portfolio <h1> --> <a><span class="glyphicon glyphicon-search btn btn-lg"> </span></a>
</div>
</nav>
hey guys
can someone explain how this jquery selector is working?
here's the block for smooth scrolling animation
$('a').click(function() {
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
the selector I'm scratching my head on is
$($.attr(this, 'href'))
@findname it's the <li> tags in your HTML.
@mattboland there's quite a few reasons, but start with this:
windowis a reserved keyword for the browser window, so trying to overwrite that = not gonna have a good time.
hello campers!!!!
hi there
hey @DivaWeb
who here as completed the ceasar cipher challenge?
post away
someone will be likely to help
that one was pretty easy IIRC
well I have been trying to get help for days now lol
yeah go for it :p
@DivaWeb well hey... today may be your lucky day :)
function rot13(str) { // LBH QVQ VG!
var newString ="";
var newCode;
for(i = 0; i < str.length; i++){
newString += str.charCodeAt(i);
}
return newString.split();
}
I have rewritten and researched so many times.
remember to sandwich your code in ```
the markdown makes it much easier to read
I realize that I could just create an index and be done , but from what I understand you need to use the functions they provide to complete it
@DivaWeb No you don't
Get it done the best way you know how
@Gregory-Buhler thanks but why is pull-right not working inside <li>
findname sends brownie points to @gregory-buhler :sparkles: :thumbsup: :sparkles:
remember the alphabet can be bisected from the middle
and you can count both ways starting from that letter
:star: 306 | @gregory-buhler | http://www.freecodecamp.com/gregory-buhler
so you saying that there is no cryptic way of looping through the two functions that they provide for you research instead of using an index?
@findname It's not that it wasn't working inside of li, it was just a lot more extra code that was uneeded as they were all held within the ul function it was easier to move the block right than each individual piece. The main issue that caused them to shift down was the navtab bootstrap you were using.
@DivaWeb, that's the one where you have to shift the character 13 places right?
you can loop through 2 functions
@Gregory-Buhler yes
@ehekatlOf ok so that is what I have been trying to do but I keep getting told that String.fromCharCode() is not a function
@DivaWeb You have to use fromCharCode as a function of the String object, rather than as a string function
Can anyone tell me why my Carousel isn't moving? https://codepen.io/rwashington21/full/jqagwN/
So
String.fromCharCode(97)
Rather than
'Hi'.fromCharCode(97)
The second one would give you an error
@Gregory-Buhler pull-right inside <li> aren't bringing them right uless i add pull-right to ul
@Zerazera I understand how it is suppose to work but I am not hard coding what the number is
Right. You can get the number by doing something like
String.fromCharCode('A'.CharCodeAt())
@Zerazera and that is when I get told that it is not a function
Actually
String.fromCharCode('A'.charCodeAt())
If you're getting the "not a function" error it's because you're not calling the prototype method
Javascript knows fromCharCode as a prototype method to the String class
So you have to call it
String.fromCharCode()
@findname Because each li has a height (as it is it's own block), and the pull-right is not resizing the block or making it an inline-block, it is simply floating it right, so you have that initial height of the li for each of them.
Otherwise it's gibberish
oh yeah forgot to say, I had to containerize my string for
charCodeAt() to work
so something like
var test = 's' test.charCodeAt() works
@findname And if two li's are not inline blocks, they will always show below one another. Which is what you have happening right now.
Be back in a few ^_^
not sure if I should post my answer
@ehekatlOf that's actually not necessary.. though it's a decent idea anyway. 's'.charCodeAt() should work
oh does it?
hm
oh it does
yep.. it's just a bit sloppy, potentially
@Zerazera @ehekatlOf so I have used var word = string.charCode(string.charCodeAt() ) I have also used return string.charCode(string.charCodeAt() ) I have also even tried a loop lol
@DivaWeb Details are important. String with capital S for fromCharCode method.
String.fromCharCode('a'.charCodeAt()) should run with no errors
@Zerazera so what it 'a' for?
'a' is just a string. That you can replace with a string literal or a string variable
it is a
string.. not to be confused with the String :P
yeah
that's what I was talking about with random-x
haha
'a'.charCodeAt() - with no parameters it assumes index 0
@Gregory-Buhler removing <li> is also working as pointed by @DavidWeedmark but again pull-right is not working even removing <li> i guess it <ul> that may be creating inline blocks
so what step am I not seeing?
anyways
here's something to get you off the ground
function rot13(encodedStr) {
var codeArr = encodedStr.split(""); // String to Array
var decodedArr = [];
first I took the parameter and split into an array
then created an empty array
for(var i in codeArr) {
decodedArr.push(codeArr[i].charCodeAt() );
}
@ehekatlOf I started out putting it into an array as well origianlly
Right. If you wanted to loop through and get the char codes you could do something like
var s='Hello world';
for (var i = 0; i < s.length; i++) {
console.log(s.charCodeAt(i));
}
That would print each letter of s to the console
then ran a loop to convert and push the char code into the new array
you should now have an array full of converted char code
should be easy from there
ok so I wasn't making an empty array var I did do the for loop
you don't have to recontainerize it
it's just how I did it
@ehekatlOf haha.. I like that word ;)
thanks @random-x
ehekatlof sends brownie points to @random-x :sparkles: :thumbsup: :sparkles:
:star: 124 | @random-x | http://www.freecodecamp.com/random-x
@DivaWeb do you know how to log to console and view those logs?
@ehekatlOf @random-x @Zerazera @sjames1958gm thanks all for the help
divaweb sends brownie points to @ehekatlof and @random-x and @zerazera and @sjames1958gm :sparkles: :thumbsup: :sparkles:
no problem @DivaWeb
keep trying, don't give up
:star: 244 | @ehekatlof | http://www.freecodecamp.com/ehekatlof
:star: 125 | @random-x | http://www.freecodecamp.com/random-x
:star: 481 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
:star: 318 | @zerazera | http://www.freecodecamp.com/zerazera
@random-x yeah I just feel like I am not seeing something, obviously lol that is why I keep getting that it is not a function
@DivaWeb ok, well feel free to post again or send me a message once you try out what we spoke about if you're still having issues.
Hey guys, I'm stuck with navigation on my portfolio web page challenge. Can anyone point me to the right direction?
@igoramelichev post a link or a question -
anyone why is there ehite space in about green and other color and how can it be fixedhttps://codepen.io/findname/pen/qZPwWX?editors=1100
@findname Add
body {
background-color: #93B874;
}
@adzam5 white space in between (it will work here but again when i will create another div of different color that would show green color betweenthem )
@findname if you're using Bootcamp already, I would suggest you create the page using bootcamp classes rather than just un-classed divs and such... that will get rid of things like that for you automatically
function lookUpProfile(firstName, prop){
for (var i=0; i < contacts.length; i++){
if (contacts[i].firstName === firstName)
{
if (contacts[i].hasOwnProperty(prop)===true)
{ return contacts[i][prop];} else {return "No such property";}
}else return "No such contact";
}
}
@AhzuxRamsey "No such contact" - you have to loop through all contacts this fails on the first contact
@findname put margin:0 on h2
and if you want to push the About text down, use padding
@sjames1958gm oh, I am going to try to fix this, thanks for your help
ahzuxramsey sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
@AhzuxRamsey :+1:
:star: 482 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
any1 willing to solve me a CSS thingy i am missing ?
any1 ?
@kirbyedy h2{
margin-top :0px;
} notworking
margin-top :0px;
} notworking
its 0 by default i guess
or maybe I did not understood the problem
@sjames1958gm Can you fix it for me, please. I don't quite understand this :(
function lookUpProfile(firstName, prop){
for (var i=0; i < contacts.length; i++){
if (contacts[i].firstName === firstName)
{
if (contacts[i].hasOwnProperty(prop)===true)
{ return contacts[i][prop];} else {return "No such property";}
}
return "No such contact";
}
}
@random-x by bootcamp classes you mean previous freecodecamp tutorial ?
@findname no, but if you do complete those, you will hopefully understand what I mean :)
@sjames1958gm Oh, I did it, finally I understand what you said :D thanks so much, again
ahzuxramsey sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:warning: ahzuxramsey already gave sjames1958gm points
@findname he meant bootstrap classes I think :)
yeah you fixed it green and pink are close in your screen shot but the code i gave is something wrong i did margin-top:0
also you are missing a jquery in your settings
h2{
margin-top :0px;
padding-top:20px;
}
brb
@random-x what you meant i completed those previous tutorial ?
@findname alright, do you remember about
rows and cols then?
yes grids , so you mean instead of using another div is it better to use rows and cols ?
thanks @kirbyedy that worked but was't it 0 margin by default
findname sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
use the grid system... divs with class="row", and inside those nest divs with class="col-lg-6" or whathaveyou
:star: 813 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
@yhakong Did you ever resolve your DNA pairing?
going to try again
anybody know how this selector is working?
for this jquery block that does smooth scrolling
$('a').click(function() {
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
can any1 tell me why the icon doesnt show in this : http://codepen.io/dioannou/pen/repMOO
namely
$($.attr(this, 'href'))
@ehekatlOf Looks like it is using the value of the href as the selector
@random-x done what you said still its same
I think what's tripping me up is the double
$
also I didn't know you could select
.attr right away
without referencing an element
I haven't seen that syntax
@findname hmm.. when I refresh the page, I don't see the div at the bottom having any classes at all?
apparently it works!
totally tripping me up
haha
@ehekatlOf that is some weird syntax - I prefer $($(this).attr('href'));
yeah
I got it from a thread on stack
never even seen this syntax before
its having class col-lg-6
Hey all, i think i got my tic tac toe working for two human players, and tips on getting started with the AI? http://codepen.io/clarkarnold/pen/BKmYeZ?editors=0010
read up on the minimax algorithm
good luck!
@sjames1958gm I'm building a single page portfolio web site in Bootstrap and don't know how to make the nav buttons scroll down the page when I click them.
@ehekatlOf I've read a bit about it, seems confusing hah
yeah haha
@ehekatlOf
$ is shorthand for jQuery, so it's actually calling jQuery.attr
oooooh
@igoramelichev set the href to the id of the div, for example if your portfolio section is called id="portfolio", set the href="#portfolio"
@igoramelichev See if this helps http://www.echoecho.com/htmllinks08.htm
why you'd use that.. I don't know
@random-x Saves typing - increases obscurity - to prove your chops. No good reason
hi, for some reason i am unable to center the div here, i am trying to use offset but it is not coming exactly in the center, http://codepen.io/drsherlock/pen/yOgvNL
That sintax reminds me Python.
@random-x did you meant bootstrap or bootcamp that time
@findname bootstrap
I think I'll get started on C# while the data visualization course is still getting worked on
is something wrong still
@findname you want to organize your stuff into rows and columns.. a ROW is something that goes across the screen from left to right. a COLUMN goes vertically. if you just want a row without anything else on it, you can make the contents of that row take up all 12 columns. Perhaps something like:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
first row, maybe picture?
</div>
</div>
<div class="row">
<div class="col-lg-12">
second row, maybe text?
</div>
</div>
</div>
my format was <div clss=row>
<nav></nav>
@findname but then you need to add additional rows for the picture and then for the text at the bottom
<div clss=col>img</div>
@findname you don't want all of that in just 1 row.
oh, thankyou @random-x
@clarkarnold @sjames1958gm Thank you!
igoramelichev sends brownie points to @clarkarnold and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star: 432 | @clarkarnold | http://www.freecodecamp.com/clarkarnold
:star: 485 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
hello every one and happy coding
can any one help me with random quotes app
@random-x https://codepen.io/findname/pen/qZPwWX?editors=1100 is something wrong still
@ehekatlOf hmm.. ok, so after analyzing it further, it looks like these are just synonyms:
$(<selector>).<function>(<params>);
$.<function>(<selector>, <params>);(which sort of makes sense since object oriented programming languages often implicitly pass "this" as the first param to function calls)
@findname try making them col-lg-12 instead of 6. also remove your <center> tags and use bootstrap classes for centering it instead.
i'm so excited this is finally functioning
the .getjson wouldnt fire while my text field was inside a <form>
while using bootstrap
hahahahahahahah
@findname how id you set a background image in the codepen preview like that?
@willamgriffin div#f{
background-color:#FFEBCD;
}
background-color:#FFEBCD;
}
its not centered also though i used cantered
centered
oh derpy me i thought it was a codepen thing
gotta do job stuffs now
@findname check what the bootstrap class is for centering. it's not named centered :)
@findname I am trying to get you to find the answers yourself to learn
copying from stakflow
body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
@willamgriffin good bye
@findname try copying not from stakflow but from bootstrap's site or freecodecamp :)
@random-x its text-center
@findname yes! :)
actually centered was i guess to center whole coloum
@random-x but still that color isn't spread all over https://codepen.io/findname/pen/qZPwWX?editors=1100
@findname in what browser? it is in FF and Chrome? :S
its in codepen
unless you mean the bottom of the page...??
@random-x what bottom of page? though i am chatting you in ff same browser
@findname I have no idea what you mean. it shows up properly for me.
@random-x for the same link https://codepen.io/findname/pen/qZPwWX?editors=1100
you dont see the white space between that pinklike and green background
?
no
ahh... I see why.
add col-xs-12 to both of those divs
yes thanks @random-x now it worked. what was wrong with lg
findname sends brownie points to @random-x :sparkles: :thumbsup: :sparkles:
:star: 126 | @random-x | http://www.freecodecamp.com/random-x
@findname so bootstrap uses "breakpoints" for different screensizes to determine how to show an image. because your screen is smaller than the "large" (lg) breakpoint, it didn't know how to handle it because we never defined smaller sizes
@findname to see it in action, try this (you can remove it after): assign 2 classes to the divs:
col-xs-12 col-md-8
@findname once you do that to all the divs, try shrinking your browser window to make it less wide
@findname you'll notice at the beginning, there's a gap on the right - 4 columns of whitespace, since we told it to take up 8 columns on a "medium" (md) display. when the browser shrinks to "extra small" (xs) size, it grows to fill up all 12 columns
@findname that is where the name "responsive" web design comes from.. it "responds" to the size of the viewport so it can appear differently on mobile device screens vs. desktop to accommodate the specific needs of each environment
Hey guys, i need some help with file read and write in java. anyone familiar with that stuff?
@random-x to the same classes ?
sorry to came col ?
@findname yep, both classes to the same div. apply it to all of them (you can remove the col-md-8 afterwards.. it's just to demonstrate)
@Kama-David25 I haven't really used Java in a long time :(
lol Im just starting and I have a project which I have literally been up all night trying to complete to no avail @random-x
This message was deleted
textArea
resize:noneHi, I can't understand why the above lines in Sass don't compile into:
#textArea {
resize:none
}
@random-x i dont see gaphttps://codepen.io/findname/pen/qZPwWX?editors=1000 i think i need to make each of div responsive as they are separate and i have only imageresponsive
@AchiPapakon doesn't Sass use CSS syntax, it just also accepts nested CSS and variables...?
@findname you only made the bottom one md-8.. the others you made md-12. but take a look at the bottom div
@random-x i dont see white spaces
@findname see how there is a white gap on the right until you shrink your browser window?
@random-x http://sass-lang.com/guide sass doesn't use brackets {}
col-md-8 col-xs-12 should i reverse is cuz this is what i used
@AchiPapakon ok, but still it seems to use #id for id's
@findname no, it's fine.. just look at only the bottom div.. the one that says "Aout"
@findname do you see a white space on the right?
yes it contain both col-md-8 col-xs-12
@random-x nothing changes with the addition of #
@findname with your browser window at max size
@AchiPapakon ok. I don't really know about Sass very much, so I will have to defer to others :(
yes my browser is at max size
@findname how big is your monitor? resolution?
now if i shrink i dont see white spaces
1366*768
@findname ok, so you don't see any white gap at the bottom right hand corner, below the green background?
@findname even with browser window max sized?
oh its after i have reduced the coding area i am able to see
@findname :)
@findname now make the window less wide --><--
any one test my app and give some feedback
@random-x and watch - the white gap will disappear
yes @random-x
@findname awesome. ok.. that is because at a MEDIUM size screen, you have the bottom div taking up col-md-8 columns out of 12. for an EXTRASMALL size screen, you have the bottom div taking up col-xs-12 out of 12
@findname that is responsive design. now I leave you to do the rest :P
but i didn't used any responsive class in this div area
bootstrap is built to be responsive. your outside div is
container-fluid which is a responsive bootstrap class
anyway... good luck with the rest of the assignment!! :)
@mustapha88 the tweet button doesn't seem to work correctly :(
@random-x what's the probleme
no container-fluid is on the different is in different class https://codepen.io/findname/pen/qZPwWX?editors=1000
@random-x
@findname yes. that's how it works.
soory diiferent div
Solution:
#textArea
resize: noneI didn't have space between : and none.....
@mustapha88 try clicking it - it doesn't "pre-populate" my tweet
@random-x its on nav div separate from the outside div you taking
@random-x you mean it should copy the quote directly
@mustapha88 I assume that's what you intended, but I could be wrong!
@random-x it take you to twiter?
@findname ok. don't worry about it :) row is also responsive, though you should wrap everything in a container-fluid or container, really
@mustapha88 yes, it does do that :) never mind! :)
@random-x yu have idea what is needing ?
and one more thing @random-x when i shrink the size those buttons home about contact comes outside of nav bar area
isnt responsive design should do something about it
@findname you might want to read about collapsing navbars in bootstrap.
and also @random-x col-md-8 or col-xs-8 are giving covering area
@findname don't know what you mean. feel free to remove that and replace with xs-12
@random-x see "this is a lion text " is been covered https://codepen.io/findname/pen/qZPwWX?editors=1000
@findname I think I've helped all I can really for now... :(
thanks @random-x but did you get the problem?
findname sends brownie points to @random-x :sparkles: :thumbsup: :sparkles:
:warning: findname already gave random-x points
I don't think so
what ?that "this is a lion" "th" part is not covered ? can it be seen
@findname -I have done the changes
Is that what you were looking for?
@AshutoshParmar where's the link or screenshot ?
I thought the hitting th fork button would change the code..
anyway try adding a tag element such as <p>this is the line </p> and give it a style so that the text appear in the center...like <p style="text-align:center">This is the lion</p>
anyway try adding a tag element such as <p>this is the line </p> and give it a style so that the text appear in the center...like <p style="text-align:center">This is the lion</p>
@AshutoshParmar When you hit fork it copies the code to a new pen in your portfolio. To share changes you make to a forked pen you can copy and paste the link
@adzam5 Thank you to teach me how to Fork:D
ashutoshparmar sends brownie points to @adzam5 :sparkles: :thumbsup: :sparkles:
:star: 397 | @adzam5 | http://www.freecodecamp.com/adzam5
@AshutoshParmar i want to left align that? actual problem is some portion is still being covered i don't know wether that is due the margin of coding area or with the code
@findname Ok!Let me check
@findname Remove padding property from selector id ="e".
Hello campers! I am working on the Wikipedia Viewer Project. For those who have already finished this project, could you please tell me how you get the links of the pages that you search? I have already figured out how to find different results for the search with https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&format=json&list=search&srsearch=mia
Just click on "make request" button and it will show the results for "mia".
Thank you :)
Just click on "make request" button and it will show the results for "mia".
Thank you :)
@AshutoshParmar you see the white space have occured ? though i don't understand why but this is now beign displayed but white white space has occured padding was to avoid that
I dont see white spaces :/
for the code that you gave link ? white space between black nav bar and green background ?
I'm working on the personal portfolio. I'm stuck on the thumbnail links. Can someone tell me why I can't do this:''' <a href="xyz"><iframe src="xyz" scrolling="no"></iframe></a>'''
:bulb: to format code use backticks! ``` more info
<a href="xyz"><iframe src="xyz" scrolling="no"></iframe></a>
Hello campers! I am working on the Wikipedia Viewer Project. For those who have already finished this project, could you please tell me how you get the links of the pages that you search? I have already figured out how to find different results for the search with https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&format=json&list=search&srsearch=mia
Just click on "make request" button and it will show the results for "mia".
Thank you :)
Just click on "make request" button and it will show the results for "mia".
Thank you :)
@AshutoshParma thanks in your link i still see it but when i edited in my it worked but dont understand how removing padding worked.
findname sends brownie points to @ashutoshparma :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for ashutoshparma
ok, I still don't think I understand how a nested jquery selector works
like
$($(element))
@ehekatlOf Far as I can tell that does nothing.
hm
@ehekatlOf Hope this helps :smile:
http://stackoverflow.com/questions/9753930/nested-jquery-selectors
http://stackoverflow.com/questions/9753930/nested-jquery-selectors
@ehekatlOf I tried $($("body")) $($($("body"))) and they seem to return the same as $("body")
thanks @tommygebru I'm actually reading through that
ehekatlof sends brownie points to @tommygebru :sparkles: :thumbsup: :sparkles:
:star: 692 | @tommygebru | http://www.freecodecamp.com/tommygebru
some one to help
how to pre populate quotes en twiteer
@sjames1958gm it's mainly about that thing I was asking about earlier
scrollTop: $($.attr(this, 'href')).offset().top
}, 500)
I've tried everything I can to un-nest it
so the thing is I actually have no idea what it's doing nested
link to pen
@mustapha88
http://twitter.com/intent/tweet?text=myQuote
@ehekatlOf Did you get this code from somewhere?
@adzam5 whatever i put in ,?text="something"it return in twiteer something it doesn't copy the quote
yeah
it was from a stack conversation when I was looking up how to do smooth scrolling
if I can't figure out how it works by the end of today, I think I'll just comment it out
Is it supposed to select every <a> on the page
yeah
like I get the idea that it's supposed to find the closest element that matches the clicked
href
and add a scrolling animation with the given 500 milliseconds down to that position
hello everyone! i finished my random quote generator, and everything is working except for that, when i refresh the page, when i click the "Get Quote" button the first time, no data gets pulled from the API and i end up with empty quotation marks on my page. But on the second and all following clicks, it works fine. i've tried googling this many times, and have come up empty. please help!
https://codepen.io/jvhensley/pen/OMYmyX
https://codepen.io/jvhensley/pen/OMYmyX
hm that is weird
I added
console.log(newquote); right after getdata();
and it's logging fine
was it logging fine on the first click?
oh I see
you have it set up to console.log
from successful API call
yeah ok
it's spaghetti flow
that's why
i don't know what that is
I had this problem on quite a few of my projects as well
aha!
basically anytime you work with functions involving callbacks
the flow of your code is no longer topdown
it becomes spaghetti
you have to set restrictions to make it flow the way you want it to
hm, ok
if you remove the console.log fields
from your successful API call
and try to console.log on your function after
getdata()
like so
console.log(newquote);
it'll show up as nothing
and why does that happen?
because the function is happening before the API call happened
the flow is no longer top down
i had a vague thought about that, but then i wasn't sure how to order things
and btw, thanks @ehekatlOf for your help!
jvhensley sends brownie points to @ehekatlof :sparkles: :thumbsup: :sparkles:
:star: 245 | @ehekatlof | http://www.freecodecamp.com/ehekatlof
yeah no problem
personally I'd just make make your click do a separate API call every time
that should fix it
I think
wait you're doing that
I'm bad, don't listen to me
am i? i don't even know.
this is my first api and i'm very confused about the whole thing
i thought by defining getdata first, and then calling it, that was the right order.
Any advice or feedback would be appreciated
http://codepen.io/Sephem/full/EKbbQj/
http://codepen.io/Sephem/full/EKbbQj/
ok
I fixed it
$(document).ready(function() {
var newquote = "";
var newauthor = "";
var getdata = function () {
$.ajax({
url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous',
type: 'POST',
data: {},
datatype: 'json',
success: function(data) {
console.log(data);
var apiobj = jQuery.parseJSON(data);
console.log(apiobj);
$(".quotehere").html("\""+apiobj.quote+"\"");
$(".author").html("~ "+apiobj.author);
$('#tweet').attr('href', 'https://twitter.com/intent/tweet?text=' + encodeURIComponent('"' + newquote + '" -- ' + newauthor));
},
error: function(err) { alert(err); },
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Mashape-Authorization", "PpXH6lkRPmmshZ9Tn5HbzhMlNt05p14nt2OjsncBMHfwCuZei2"); //This is my personal Mashape key for this Application group
}
});
//end ajax header
};
//end getdata function
$("#getquote").on("click", function(){
getdata();
});
//end getquote click function
});
//end document ready function
@jvhensley try putting your
$(".quotehere").html("\""+newquote+"\""); . . . inside the success call. then call your getData() function after the declaration.
I stuck the HTML updates under the success function of $.ajax
and got rid of the intermediate containers
omg, thank you so much! i think i had it set up that way at some point, but then changed it because something else wasn't working. you know how it is...
yeah, just remember
whenever you see a callback
your flow is now spaghetti
so console.log to find out where the tangle is
oh right, basically what @rouje said
help for button share in twiteer to pre populate a quote
no wiki entry for:
for button share in twiteer to pre populate a quote
Hey my code is running and working but code camp won't let me pass the lever, how can I make it so?
@lbarbula Is it passing all the tests?
which lesson is it?
@ehekatlOf Idk if this is correct but
scrollTop: $($.attr(this, 'href')).offset().topThis code is calling jquery method attr with two arguments this and 'href', then wraps returned element in jquery object and proceeds to do rest of the chained code.
I wouldn't look at it as nested selectors, and you could do the same with:
scrollTop: $(this.atrr('href')).offset().top
any one to help for how to pre populate quotes direct in twitter
this looks so much cleaner
scrollTop: $(this.atrr('href')).offset().top lmao
thanks a lot @nsloc22
ehekatlof sends brownie points to @nsloc22 :sparkles: :thumbsup: :sparkles:
you're awesome
:star: 337 | @nsloc22 | http://www.freecodecamp.com/nsloc22
np
wow what a super roundabout way to do a selection
@ehekatlOf , just curious, does the Twitter button still work with that solution you did on my quote generator?
didn't test it
im
i'm not sure it'll work that way. i'm plugging in the code to try.
hm, strangely enough
scrollTop: $(this.atrr('href')).offset().top doesn't work
but
scrollTop: $($.attr(this, 'href')).offset().top does
@Sephem Nice jobs 1) clear button shouldn't appear until something to clear. 2) Submit should clear input field. Like the style
man, I don't even
@sjames1958gm great will impliment
so I guess the better question now is why does calling the .attr separately with 2 parameters, and then using that as a jquery selector works
but the only expected way of doing it doesn't
@sjames1958gm how is it now?
@Sephem The clear button is not appearing (did you remove). Also when you hit enter for the search, the search suggestions window doesn't go away.
@sjames1958gm clear should be fixed now
@Sephem Yep!
now to figure out the removeal of autocomlete
cheaty easy way
$('form').submit(false);
but then you have to define your form submit action elsewhere
@ehekatlOf yeah tought it worked
$($(this).attr('href')).offset().topthis works, I guess whatever it is returning it need to be wrap around jquery object so you can call offset().top on it,
no other way
man that's super weird
is there a resource I can read for better understanding on how this is even working?
that's just chained functions I guess
@sjames1958gm it might just be easier to disable the enter key for the search
can't call jquery function on returned html element in first part of the code
it needs to be wrapped in $()
oh hm
you're are getting <a> html element in both cases, then you make it jquery object
@Sephem is that a jqueryui function - autocomplete.
@sjames1958gm yeah it is
oh I see
I still feel shaky with the implementation
but the idea of the inner selector returning HTML makes sense to me now
oh ok
I see
the inner is returning the position of the HTML
and the outter selector is returning the actual position of the HTML element?
@sjames1958gm it was as simple as adding
$(".wikiSearch").autocomplete( "destroy" );to the submit function
could have used destroy, close or disable
@Sephem :clap:
actualy close is best
destroy stops it from working anymore and disable would do the same
@sjames1958gm any other suggestions?
@ehekatlOf $() this is not outer selector, it just just making whatever is inside a jquery object
@Sephem - on the jqueryUI page there is usually a class that you can reference maybe $("ui-autocomplete").hide();
@sjames1958gm okay. Any other suggestions for my page?
fyi I used .close
@ehekatlOf you can read about it here https://api.jquery.com/Types/#jQuery
"Most frequently, you will use the jQuery() function to create a jQuery object. jQuery() can also be accessed by its familiar single-character alias of $()"
ahhh ok
and here https://api.jquery.com/Types/#Selector
"The selectors are a composition of CSS and custom additions"
"The selectors are a composition of CSS and custom additions"
time to do some reading
nice, thanks @nsloc22
bookmarking these
ehekatlof sends brownie points to @nsloc22 :sparkles: :thumbsup: :sparkles:
:warning: ehekatlof already gave nsloc22 points
Hey guys, finally I'm done with the Portfolio challenge. Maybe someone could give it a quick look, or feedback. It's my first project with no experience at all, so it's not perfect haha. There's a couple things in particular that bug me and I'd like to adjust them but I haven't, since I don't know how. They both are in the "about" section - a photo and a text, In full screen/desktop view the photo is too big, so i'd like to make it look smaller and the text alignment is just wrong, there's too much empty space on the right. I tried to change '.col' but it didn't help. Any advice would be appreciated. Thanks! http://codepen.io/igoramel/full/jqYmmy/
Hi everyone! Anyone has build a tribute page? I just "arrived" on the tribute challenge and I would like to see some examples of yours to inspire myself.
need help.... I'm on the tic tac toe project, I hope you can understand my code
// generates possible states from a given game state
var Successors = function(state) {
var moves = [],
availableMoves = state.availableMoves.slice();
this.possibleStates = availableMoves.map(function(cell) {
moves.push(cell);
var newState = new GameState(state);
newState.board[cell] = newState.activePlayer;
return newState;
});
this.moves = moves; // keep track of the cell selected for new state
console.log(this.moves);
};This function is changing the state object that i passed as argument, why so?
@igoramelichev change the class of the div with your text in the
about part, insted of col-md-4 use col-md-8. here's a guide for bootstrap's grid system http://getbootstrap.com/examples/grid/ :smiley:
I'm trying to make a to-do list. how do I make a variable equal to the input?
@Alex9911 http://codepen.io/adzam5/full/ZQNKLR/
@igoramelichev you can set the image size on the css by adding
img {
width: /* you choose */;
height: /* same here */;
}
for the text align @igoramelichev you can add the class
text-center to the paragraph you want to be aligned
Having three issues: 1. navbar div - can't seem to get the bar to its normal size
- portfolio thumbnails are too big for the actual container; also, how do i get a second row?
Just want to make sure I'm not way off base here...for the Portfolio project, should I know how to do everything just from the FCC lessons? Or should I be looking at outside resources in order to clarify how to do some of this stuff?
- after i added the navbar, my bottom contact footer is not clickable
and it has that weird overlay
@adzam5 That's a great one!
also, how do i change font colors within each div? I tried using style and changing <h3> to black, but it doesn't work
@adzam5 Thanks! That's a bit more advanced than the given example :)
alex9911 sends brownie points to @adzam5 :sparkles: :thumbsup: :sparkles:
:star: 398 | @adzam5 | http://www.freecodecamp.com/adzam5
need help.... I'm on the tic tac toe project, I hope you can understand my code
// generates possible states from a given game state
var Successors = function(state) {
var moves = [],
availableMoves = state.availableMoves.slice();
this.possibleStates = availableMoves.map(function(cell) {
moves.push(cell);
var newState = new GameState(state);
newState.board[cell] = newState.activePlayer;
return newState;
});
this.moves = moves; // keep track of the cell selected for new state
console.log(this.moves);
};This function is changing the state object that i passed as argument, why so?
@llylee add
background-size: cover; on the css for the repeating backgrounds
what do you mean by normal size?
@Big-Country absolutely use other sources too to learn
@jlouiss since I put the nav bar within <div> it is the same size of each of the containers instead of being a bar at the top
@llylee dont add scripts and styles in the pen`s html. Add the css on the css tab
dont know where it goes wrong, but that is step 1
@llylee
div::not(first-child) {
height: 100vh;
margin: 0;
opacity: 0.7;
}
and i would suggest you to move the styles from the head to the css, just to be more consistent :)
@disjfa @jlouiss Yeah, I did that initially, but I guess I must have some lag because the styles wouldn't translate until I put them in the pen. Transferring now! Thanks!
llylee sends brownie points to @disjfa and @jlouiss :sparkles: :thumbsup: :sparkles:
:star: 366 | @jlouiss | http://www.freecodecamp.com/jlouiss
:star: 307 | @disjfa | http://www.freecodecamp.com/disjfa
you're welcome
@jlouiss Thank you! that not first-child worked, but now all my containers are different sizes
llylee sends brownie points to @jlouiss :sparkles: :thumbsup: :sparkles:
:warning: llylee already gave jlouiss points
@llylee sorry, it was
div:not(:first-child)
hm... i can't understand why it doesn't work...
@rouje @jlouiss Thank you!
igoramelichev sends brownie points to @rouje and @jlouiss :sparkles: :thumbsup: :sparkles:
:star: 367 | @jlouiss | http://www.freecodecamp.com/jlouiss
@llylee cleaned it from the 100% height bugs http://codepen.io/disjfa/pen/WwdEWb
:star: 308 | @rouje | http://www.freecodecamp.com/rouje
@jlouiss the div was one, the .image was 2. The font size to 100px was another thing
@disjfa looks great! :D
Has anybody found a better way to get familiar with the Wiki API than their documentation? It seems really unorganized to me
@disjfa awesome, thanks!
llylee sends brownie points to @disjfa :sparkles: :thumbsup: :sparkles:
:warning: llylee already gave disjfa points
@MarkBLittle this is a hard one.. watched half the video.. reading the documentation.. still really dont know how to use it. I may youtube it or google it some more
I've tried YT and haven't really found much
@jlouiss I have few questions:
availableMoves = state.availableMoves.slice(); // check if this isn't returning undefined
this.moves = moves; // can you access moves in this scope?
@MarkBLittle darn..
thanks @jlouiss
big-country sends brownie points to @jlouiss :sparkles: :thumbsup: :sparkles:
:star: 368 | @jlouiss | http://www.freecodecamp.com/jlouiss
if you figure it out.. let me know lol
I'm also a little upset that they didn't cite any sources in the doc ;)
What would cause a page not to scroll?
@adzam5 do you have overflow set to hidden?
@nsloc22 i declare
var moves = [] on the third line, availableMoves works correctly
@adzam5 a broken mouse LOL
@MarkBLittle That was it! Thanks!
adzam5 sends brownie points to @markblittle :sparkles: :thumbsup: :sparkles:
:star: 276 | @markblittle | http://www.freecodecamp.com/markblittle
No problem, chief. Overflow can be tricky sometimes...
@adzam5 Were you trying to prevent horizontal scrolling? If that
If that's the case, try overflow-x: hidden;
@jlouiss can you post your state object code?
@nsloc22
// minimax players, x starts first
var MAX = 'x',
MIN = 'o';
// constructor for game states
var GameState = function(previousState) {
this.board = ['', '', '', '', '', '', '', '', ''];
this.activePlayer = MAX;
this.opponent = MIN;
this.depth = 0; // total moves, necessary utility assignment
// constructs state from previousState, if defined
if (previousState != undefined) {
var p = previousState;
this.board = p.board;
this.activePlayer = p.opponent;
this.opponent = p.activePlayer;
this.depth = p.depth + 1;
}
// returns empty cells indexes
this.availableMoves = this.board.map(function(cell, index) {
if (cell == '')
return index;
});
// checks if this is a terminal state
this.isTerminal = function() {
return willWin(this, this.activePlayer) ||
willWin(this, this.opponent) ||
this.availableMoves.length === 0;
};
};
can anyone help me with wiki viewer? kinda stuck on displaying the results
what shouldn't be happening happens in the map function here below: every time it runs it doesn't reset the state i passed
// generates possible states from a given game state
var Successors = function(state) {
var moves = [],
availableMoves = state.availableMoves.slice();
this.possibleStates = availableMoves.map(function(cell) {
moves.push(cell);
var newState = new GameState(state);
newState.board[cell] = newState.activePlayer;
return newState;
});
this.moves = moves; // keep track of the cell selected for new state
console.log(this.moves);
};
I mean the possible states should be
['x', '', '', '', '', '', '', '', ''], then ['', 'x', '', '', '', '', '', '', ''], then ['', '', 'x', '', ...] and so on
But what happens is that it is pushing x at every iteration, so i have
['x', '', ...], then ['x', 'x', '', ..], ['x', 'x', 'x', '', ...] and so on
@pawan92 what's wrong?
@jlouiss heres my code. in console the api information comes in the form of a array and im not sure how to split it up http://codepen.io/pawan92/pen/zqzWYB?editors=1111
@pawan92 array.forEach()
@sjames1958gm do you mean for this
var $array=$("#container li").html(data);
@pawan92 apparently it gives you back 3 arrays with the same size, the first one with the page titles, the second with the snippets and the third with the links
so it's just a loop to display the three how you prefer
Then use a for (i = 0; i <= titles.size
@pawan92 you are likely going to have to create the li elements for each entry
Hi I have some trouble with the Seek and Destroy in basic algolithm scripting. Can someone give me a hand?
@Lofthur Sure
@sjames1958gm can i pm you? sorry im a little lost on your array.each
how do I change the background color of my panel? http://codepen.io/chaukrao/pen/pyprOj I can't seem to figure it out
@pawan92 Since you have three parallel array forEach is not the best choice
woops linked the wrong one
@pawan92 If you want to pm that is fine
I started using global arguments and that is not the way i want to do it. I struggle with the filter function.
oh wait nvm it just wasen't saved. http://codepen.io/chaukrao/pen/pyprOj
how do I change my panel background color?
@Lofthur You will want to loop over the arguments from 1 to argument.length
Then inside that use the array filter
@sjames1958gm i'll try that :D
thanks @sjames1958gm
lofthur sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star: 496 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
holly cow.. any advice on this wikipedia viewer?
@Lofthur first of all convert Argument Object to an actual array
var args = Array.prototype.slice.call(arguments);
@Lofthur Array.Filter goes through the array and for each entry calls the passed in function, if it returns true keep the entry otherwise toss it. Return an array of the kept entries
Hey guys, I have a question about open weather api. I can't get the call to go through because of a mixed content error since open weather only uses regular http. Anyone else encounter this problem and know a way around it?
http://codepen.io/JLouisS/pen/RaxLWd?editors=0011 i made a pen for the tic tac toe project, need help please :(
i can't figure out what's wrong around line 42
i can't figure out what's wrong around line 42
@sjames1958gm Shall i create an anonymous function in the callback for the filter. So i can use the arguments in the arguments object?
@animsaj thanks
lofthur sends brownie points to @animsaj :sparkles: :thumbsup: :sparkles:
@chaukrau you have "panel" in your div class and "panels" in your css that might be your issue
:star: 474 | @animsaj | http://www.freecodecamp.com/animsaj
@Lofthur Yes
@sjames1958gm thanks again it worked :D
lofthur sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:warning: lofthur already gave sjames1958gm points
@Lofthur What did you end up with?
boing easier to paste the code :D
@Lofthur Here's what I came up with I had it like yours and then decided to play around.
function destroyer(arr) {
// Remove all the values
var args = Array.prototype.slice.call(arguments).slice(1);
return arr.filter(function(a) {
return this.indexOf(a) == -1;
}, args);
}
@Lofthur You can pass in a second arg to filter, which becomes "this" then you don't have access data outside your anonymous function.
@sjames1958gm that looked exelent. I see what you have done, but I know that i could not do that at the moment ;)
@Lofthur But with practice you can.!
@sjames1958gm I know I'll get there some day :D
@Lofthur it gets easier as you do more of these
@ehekatlOf I think so too. Thanks :) This was the first one i really struggled with.
lofthur sends brownie points to @ehekatlof :sparkles: :thumbsup: :sparkles:
:star: 246 | @ehekatlof | http://www.freecodecamp.com/ehekatlof
I had trouble with that one as well
but don't think too much of it
filter is just a composite function that's kind of like an each and an if combined
and works based on booleans
with the 3 parameters being element, index, and array
99% of the time you're fine with only using element, and index :p
I don't do that. I learned something, so that was good. And I liked that i got hints and not the solution from the people here.
@Lofthur I see people give out the solution which doesn't help learning
I'll give out snippets sometimes
but not the whole thing
I think for a lot of people with English not the first language the wording on some of the challenges is hard.
yeah
but snippets is not the whole code. that could just be the little extra to get people strated again
Have a good night all and thanks for the help and support :D
http://codepen.io/chaukrao/pen/pyprOj how do I remove the border from my panel?
I'm trying to implement google api on my site, anyone know how to obtain a key?
@BrianCodes33 ask google
can someone troubleshoot my weather api? I feel like I'm pretty close to the first part at least
@gpressman show us your pen?
@gpressman first issue is that a URL needs
http:// … looking still
how do I get the tweet button to update with dynamic text in the Quote Machine challenge? The Twitter API documentation for JS is pretty confusing...
@gpressman ok second issue is that you need to call your api from within the geolocation function or at least wrap your getjson in a function and call that function from within it. they are both asynchronous
hmmm
now it's pulling something
at least
but it says 285.7
@gpressman yes the temperature is in Kelvin unless you ask for metric or imperial
ahhh, ok well I got it from here I hope
thanks @mutantspore
gpressman sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1368 | @mutantspore | http://www.freecodecamp.com/mutantspore
@gpressman Temp is in kelvin
@sjames1958gm You can request metric by adding &units=metric to the query or &units=imperial for fahrenheit
when I do json.weather it returns
[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}]
but when I do json.weather.description
how do I access stuff inside here?
@sjames1958gm PM-ed you!