It works now!
For anyone who's curious, I changed this:
$("#reduceWork").on("click", function() {
var workLength = $("#workLength").text();
$("#workLength").text(workLength - 1);
});to this:
$("#reduceWork").on("click", function() {
workSeconds = workSeconds - 1;
workTimerSeconds = workSeconds;
countDown = workTimerSeconds;
var workLength = $("#workLength").text();
$("#workLength").text(workTimerSeconds);
});WTF it was literally just working perfectly and now it's glitching out and showing a bunch of 1s and NaN... I didn't touch anything!!
SO BIZARRE:
if you click the minus button for work length first, and then the plus sign, both work perfectly fine.
if you click the plus button for work length first, it adds 1s to the end, and then when you click the minus sign it goes to NaN
???
Can someone explain to me how the .parent() selector works for $ ?
@purnakanneganti
var Bike = function() {
// Only change code below this line.
var gear = 1;
this.setGear = function(change){
gear += change;
};
this.getGear = function() {
return gear;
};
};
did anyone got this challenge
@amirghafouri if you are still stuck. When you are reading the "7" it is getting assigned as a string. It appears when you subtract from the string the javascript is automatically converting it to a number, but in javascript you can use the plus sign to concatenate strings so it is doing "7" + " 1" = "7 1" as a string which is why you are getting the not a number (NaN) error.
when you get the worktime you can parse it as an int to make sure it starts as a number
var workSeconds = parseInt($("#workLength").text());
it's not possible to have more than one <body></body> element per page is there?
Im trying to figure out how to add multiple background images to a page
seems like you should be able to add different background images to different <div> but I havent figured out how to do it
good question ... not sure ... @vbroskas the ultimate answer is in the w3c docs ... :)
@vbroskas just add the background images to divs
LOL @qualitymanifest -- leave it to me to get caught up in the first question and not read on ...
@vbroskas Do you mean different background images that rotate, or more as your scroll down?
@vbroskas no, you cannot have multiple body elements in the same page. you can add different background images to other elements, though, like divs. give each of your divs either a unique class or id and in your CSS create the relevant style for the class or id with the background image you want
Hi everyone! I have a problem with "Exact Change" (Advanced Algorithm Scripting). There is a test "drawer(19.50, 20.00, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1.00], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]) should return "Insufficient Funds”". How is it possible? We have 1.01 in cid and change equals 0.50.
Just finished my calculator. https://jsfiddle.net/himynameissal/j42p5f4z/embedded/result/ Can anyone find any bugs?
@mynameissal: loading time is pretty slow
It's probably because of the background image..
I think I will remove it
@mynameissal yup. a) i'm unable to use two decimals, e.g. 0.5 + 0.6. b) i can press operators multiple times in which case the result is not evaluated, e.g. 3 ++ 6. c) the % button doesn't seem to do anything
@mynameissal from the usability point of view, i'm missing some sort of buttons. when i hover my cursor over the number, it changes to a text selection cursor, not into a pointer cursor.
@h4r1m4u Thanks, I just noticed error (a), error (b) I thought I handled it but I will try to find a fix. % button works it should give remainder e.g. 25 % 5 = 0
mynameissal sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1389 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@mynameissal oh, it's a modulo, not percentage. i see
that's confusing as usually calculators use that for percentages
Yep, I noticed that to even though the divs are assigned the role button..
I will change the text
is it a number ?
parseInt("%") should return NaN
hmm
Someone in another chat said I have to use:
isNaN(parseInt("%")) // => true
I tried it on w3 school and returns Nan
NaN
changed number 10 to %, and it gave me NaN
parseInt(10) returns 10
All errors fixed. Let me know what you guys think:
https://jsfiddle.net/himynameissal/j42p5f4z/4/embedded/result/
Thanks!
@mynameissal works :thumbsup:
need testers https://votexr.herokuapp.com
@rjsmith25 Is this a FCC challenge or is this a personal project?>
fcc challenege
Which one?
voting app in the backend section
Can anyone help explain the below algorithm? I've been studying it for a while, still not getting the logic.
function diff(arr1, arr2) {
var newArr = [];
var onlyInArr1 = arr1.filter(function(current1){
return arr2.filter(function(current2){
return current2 === current1
}).length == 0;
});
var onlyInArr2 = arr2.filter(function(current2){
return arr1.filter(function(current1){
return current1 === current2
}).length == 0;
});
newArr = onlyInArr1.concat(onlyInArr2);
return newArr;
}
hello world
welcome to FreeCodeCamp @mbrad26!
function diff(arr1, arr2) {
var newArr = [];
var onlyInArr1 = arr1.filter(function(current1){
return arr2.filter(function(current2){
return current2 === current1
}).length == 0;
});
var onlyInArr2 = arr2.filter(function(current2){
return arr1.filter(function(current1){
return current1 === current2
}).length == 0;
});
newArr = onlyInArr1.concat(onlyInArr2);
return newArr;
}
Could someone pls have a look over my code. When I'm pressing the generate quote button nothing is happening. Thanks
Anyone?
@mbrad26 You're missing a randomising index function
When you click your generate button it's returning the same quote that was set at load
Oh...thanks...I'll dig deeper:)
Nevermind..
I'm not sure what's wrong I'll have a look I just realised you randomise your index when set the index.
ok
Yes I did that.
@mbrad26 your function returns the quote, so the click(generateQuote) doesn't do anything
Add the $("h2").text( <your quote>); in the generateQuote function
But it should generate the quote on click/
and call it in document.ready
No @Motass
ok..I'll give it a try
He is calling his generate quote function only when the document is ready.
@mbrad26 You need to create a function to generate a quote and call it when clicked outside of your ready function.
Your on click function inside your on ready will never be called.
You can realise your on click function and how you were generating your quote before in your ready function with a call to the new function that you define outside of your on doc ready function.
He is calling his quote function on click: $(".quote").click(generateQuote)
Either do $(".quote").click(function() {
$("h2").text(generateQuote);
}); or add the h2 update in your generateQuote function
$("h2").text(generateQuote);
}); or add the h2 update in your generateQuote function
OK guys...gest a sec
OK guys just a sec.
What I wrote makes no sense...I can't even back track and correct it!
guys, can help me??
i want my background-image's size inherent div'size
but i tried some css but its still faile
@mbrad26 also put your index var in the generateQuote function so it's generated everytime you click
He doesn't have a generateQuote function it's a variable
A function can be stored in a variable in javascript, that's the case here
var generateQuote = function()
Oh..so each time he checks the variable it will execute the function?
Nope...I don't know what I'm doing...is not working.
If he calls it, yes generateQuote()
I did this:
var generateQuote = function() {
return $("h2").text(quoteArr[index]["quote"]).css(style);
};
is this a valid variable?
No, you shouldn't return that
Either return the quote or change the h2 tag but not both
Do this : var generateQuote = function() {
var index = Math.floor(Math.random() * quoteArr.length);
return quoteArr[index]["quote"];
};
var index = Math.floor(Math.random() * quoteArr.length);
return quoteArr[index]["quote"];
};
That returns a random quote each time you call the function
but I already var index outside the function
Then in document ready: $(".quote").click(function() {
$("h2").text(generateQuote).css(style);
});
$("h2").text(generateQuote).css(style);
});
$(".quote").click(function() {
$("h2").text(generateQuote()).css(style);
});
$("h2").text(generateQuote()).css(style);
});
You want the index var to be recalculated each time you call the function otherwise it will never change
@Motass it...worked. Thanks
mbrad26 sends brownie points to @motass :sparkles: :thumbsup: :sparkles:
:star: 314 | @motass | http://www.freecodecamp.com/motass
Now I just need to figure out why.
I meant $(".quote").click(function() {
$("h2").text(generateQuote()).css(style);
});
$("h2").text(generateQuote()).css(style);
});
Just once, I made a small mistake in my first one. I see that you've put it twice in your code
I .ve took it down ..don't worry
So var index needs to be defined inside the function
Yes, everytime you call the function it is redefined with a new value
but it was defined outside...
If you put it at the same level as the var "style", it is defined only once and then never change
the function
If it wasn't for the var style it would have worked...or not
It's not related to the var style
It won't work if it's not redefined each time you click the button
I'm not sure to be clear :/
OK...I feel like I'm not making any progress:(. So much to know and such a small brain..
Maybe you mix up the declaration and the definition of the variable
var style = {"font-weight": "bold", "font-size": "1.5em"}
var index;
var generateQuote = function() {
index = Math.floor(Math.random() * quoteArr.length);
return quoteArr[index]["quote"];
};
var index;
var generateQuote = function() {
index = Math.floor(Math.random() * quoteArr.length);
return quoteArr[index]["quote"];
};
That would still be okay
.var index; is a declaration
var index = "something" is a definition
I get that
Ignore the dot.
Ok
I have an issue with my code for the Stylize Camper News Zipline.
If you see the result here: http://codepen.io/dhcodes/pen/VeEpOQ
I want to link the article title to the article, but it only works for some of the articles. For the others, it puts an empty <a></a> tag after the headline instead of turning the headline into the link
any idea why? I think the JSON is the same for all the article links
@Code21k Your height is the same for all divs. You need to make separate divs with varying heights, otherwise they just cover each other. Also, it would help you to visualize it if you change each background to something different so you can see how they are being applied to the page.
nvm on my question, I think I fixed it.
I need a little help with the Simon Zipline
I cant seem to figure out why the game wont work properly after using the on/off switch
Can anyone take a look please?
I cant seem to figure out why the game wont work properly after using the on/off switch
Can anyone take a look please?
@dhcodes did you fixed it ?
hi guys!
i need some help with my twitch app
if i try to add a new streamer it doesn't work
the array is updated but i don't know what should i do next
the array is updated but i don't know what should i do next
@kirbyedy well, I added the link via a wrap command and it works for the headlines, but now I'm working on adding the description back without it being linked too. I might need to add a span or something
@al3xoi I took a look but I'm too newb to help. Sorry
'<a href='+ item.link +'/a>'
@kirbyedy okay, I'll try that first
@al3xoi I did end up playing simon for awhile though so that's pretty cool
@kirbyedy that worked, but I don't really know why. Could you explain why you would /a> the end of an href?
I was trying to do it like I would see in html... <a href="#"> Headline </a>
so to me your markup would equate to <a href="#" /a>
which seems weird
@dhcodes no problem, yeah it almost works, I mean it works well until you turn the game off and back on
no idea :D
lol I'll search around
but its working
that it is
@kirbyedy nope, found a bug. It adds /a to the end of each link. I'll play around with it some more. Thanks for the help though
dhcodes sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 451 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
:thumbsup:
@dhcodes so should i set fix height to div? like height xxpx;
@dhcodes but will it responsive/full screen as width and height screen
@Code21k the way I did it was to make a div for each section and then apply a different background for each div
@Code21k but you at least need to give each div a min-height so that it shows regardless of how much content is in it. Otherwise the size would depend on what you put in the div
so make 4 divs
with 4 diff ids
and then apply a diff. background to each id
and a min-height of 100vh or w/e you want
@Code21k each bg also needs a background-attachment: fixed attribute in the CSS for the scroll through to work
how do I get the quotes?
for the quote machine?
gotta go figure mine out, good luck
@sidkrip just google for some and put them in an array or object
i just looked for some about coding but they can be w/e you want
Like just take some quotes like 9-10 and put all of them in an array ?
i tried like this
but the image is being cut
@sidkrip yeah, and then you set the button up to get a random quote from the array each click
@sidkrip so you can use Math.floor and Math.random
for a rounded random number
and then use that to go to an index point in your array
hello - I’m having trouble understanding “Everything Be True” in the “Intermediate Algorithm Scripting” section. (this is the first time i've been in this chat room, by the way)
@dhcodes you forgot the quotes for the href attributes and you don't close the td tags
@Motass okay, i'll check that out before I submit it . Thanks
dhcodes sends brownie points to @motass :sparkles: :thumbsup: :sparkles:
:star: 315 | @motass | http://www.freecodecamp.com/motass
@Code21k what do you mean the image is being cut?
@Code21k it's working like the example
if you want it to have the full image in each section, you'd need to add attributes for the height and width, but that wouldn't really work because it would squeeze your height down so that the picture is skewed
or you can make your min-height larger to accomodate the height and width attributes you add to the images
thanks @dhcodes
sidkrip sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star: 329 | @dhcodes | http://www.freecodecamp.com/dhcodes
@dhcodes No prob. That should fix your link issue
@Motass I fixed the link issue by adding a space before the closing '>' tag
@Motass as for not closing the <td> tags, does jquery do that for you because in the output in the Chrome developer tool, they are closed
or is Chrome auto-closing them because it assumes I meant to?
The browser always tries to "fix" the errors to render something correct, that's why you see the td tags closed and some links worked while others didn't
If you could see the raw html from the page source you would see a difference with what the Chrome developer tool actually displays
@Motass Okay, I closed them now. Good catch. I'm going to submit it to code review once I make sure the user stories are all fulfilled.\
yeah @dhcodes , i mean i want full imange in each section
but thanks for ur answer
but thanks for ur answer
code21k sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star: 331 | @dhcodes | http://www.freecodecamp.com/dhcodes
and btw, what the difference between <div> and <section>?
well section is an HTML5 reference for the different blocks of a site so you'd have to read up about it
I just meant section as the different parts of your page (about, portfolio, etc.)
owh like other page in one page?
but what is the different with div?
@Code21k section came along after div because people were using divs to separate the parts of their page
I fixed the issue with my Simon zipline
so HTML5 was like "hey, let's just make a thing that does that called section"
I had to remove the event handler attacked to the button clicks
at least, that's my armchair view of it
@al3xoi cool, good work
@dhcodes ty man, you too
hmm ok thanks bro,
sleep now, see you next time hahaha
Hey guys, I'm working on the random quote machine, and I've finished the displaying quote part with the press of a button, but my problem is that I can only press the button once, when the form loads, then it becomes unfunctional
is there a workaround to this?
@kevhan94 can you post your code?
the quote button posts a quote and the author
but i think its an onclick event error
i need to reset the form somehow without the quote disappearing
@kevhan94 you need to move your function todo inside of your getQuote and then call get quote on the click
so that it reruns the random number, the action to get the quote/author, and the changing of the HTML on each click
gotta go now, but good luck!
oh thanks alot that makes sense since my quote is a global variable so it doesnt change unless i do getquote again
yeah, or you might be able to get away with adding the onclick to be multiple functions
just put a comma between them
Could someone have a look at my CSS and tell me why the Generate button acts so weird - after you press it it doesn't return to the original state/look. Thanks. http://s.codepen.io/mbrad26/debug/XXxBKB
@mbrad26 add a mousout function in your js, with css which makes the buttons text colour white
Ok I'll give it a try. Thanks
np
how do I add my own images in CodePen?
I know how to add it to the HTML, just don't know where/how to put it up for use with the CodePen activity
upload them onto a image sharing website
and then use the url thingy
thanks
what do you use as image hosting
?
@Dukbcaaj ..it worked..kind of, but now I've lost the hover effect...
Its weird.
hold on a sec
:)
@mbrad26
.quote:hover {
background: #996633;
border: 2px solid #996633;
color: black;
}
Ok..thanks..but my problem is that the button after is pressed once it doesn't return to the original look which is :
.quote {
background: rgba(0, 0, 0, 0.3);
border: 2px solid #996633;
color: #fff;
float: left;
font-weight: bold;
}
use .hover()
instead of :hover
like the js thingy
then you can add how its going to be after mouseout as well
but i dunno if itll work for sure
@Dukbcaaj Thanks anyway:0
mbrad26 sends brownie points to @dukbcaaj :sparkles: :thumbsup: :sparkles:
Any ideas on why my js doesn't execute?
:star: 390 | @dukbcaaj | http://www.freecodecamp.com/dukbcaaj
@mynameissal it is executing but I don't think you can pass an object into
.css()
value should either be a string or an array
oh just kidding I see it at the bottom ther
there
Yeah..
I think it has to be something to do with my CSS
Yep, it had to do with my variables. Thanks for looking at i t.
anyone here wanna lend a hand with the weather zipline
Hi, can anyone help me figure out why this javascript isn't counting down for the pomodoro clock?
function countDown(sec, e){
e.innerHTML = sec;
if(sec < 1){
clearTimeout(timerS);
e.innerHTML="DONE!";
}
sec--;
var timerS = setTimeout('countDown('+sec+',"'+e+'")',1000);
}
@stacyHere what is e? more descriptive variable names are kinda helpful, but could you just copy and paste your pen url so can see the complete script?
@stacyHere I don't think you should be including your callback function as a string in your setTimeout method
I'm only focusing on the break time for seconds at the moment. I've been working on this for quite awhile
I'm not sure how else to do it
is this meant to be a recursive function?
yea, because I want it to kep going until the time is 0
~~~
function getQuote() {
$.get("http://www.stands4.com/services/v2/quotes.php?uid=4835&tokenid=removeme&searchtype=RANDOM", function(data) {
theQuote = data.getElementsByTagName("quote")[0].innerHTML; // .innerHTML fixes some odd bug where theQuote can only be used once
theAuthor = data.getElementsByTagName("author")[0].innerHTML ;
$('#quote').html('"' + theQuote + '"');
$('#quoteBy').html("-" + theAuthor);
$('#twtBtn').attr("data-text", "hello"); //insert text into tweet - NOT WORKING
});
}
Here's my codepen: http://codepen.io/mholst1/pen/zrymgw?editors=1111
@stacyHere I think it should be more like this:
function countDown(sec, e){
e.innerHTML = sec;
if(sec < 1){
clearTimeout(timerS);
e.innerHTML="DONE!";
}
sec--;
var timerS = setTimeout(countDown(sec,e),1000);
}
how do I trigger the function on your pen?
@stacyHere well looks like your script is trying to find a element with an id of time, but there isn't one, but I think its preferable to set you initial values in the JavaScript then render those values to your document. Also I'm not sure what your trying to do with your onChange events.
lol at the moment after you enter min and sec in the break time it'll populate the main countdown
onChange calls findme() so that counDown() can use those id's to get the time and element to put that time into
Does anyone have any hints on getting started with the Camper News challenge? I have get JSON > data vomit on page... not sure what to do next?
thanks @jnmorse I'm going to work on this some more, when I replaced with your suggested code it displays DONE! instead of the number
stacyhere sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 383 | @jnmorse | http://www.freecodecamp.com/jnmorse
@stacyHere that was @jondcoleman
@jondcoleman thanks, I'm sorry, I clicked wrong name
stacyhere sends brownie points to @jondcoleman :sparkles: :thumbsup: :sparkles:
gitter autocomplete is the worst ;p
:star: 528 | @jondcoleman | http://www.freecodecamp.com/jondcoleman
I'm working on the calculator project. can someone help me understand why in my javascript once i empty my display the next step of appending the ans variable will not happenhttp://codepen.io/MattBoland/pen/qbQKVV?editors=1010
@stacyHere also recommend adding your event handlers in javascript rather than in your html. e.g.:
document.getElementById("start").addEventListener('click', function(e){
console.log(e.target)
})
Hey guys, I'm finishing up the Random Quote Project and I'm having trouble with the tweet button. Is there a way I can dynamically retrieve the quote from the HTML field and then feed it into the twitter web intent?
thanks, I'll try that
Maybe i should use jquery to create the link?
but how do i add it to the twitter web intent format?
@kevhan94 yeah you can use javascript to set the link value
so update that element's attribute on each new quote
@kevhan94 http://codepen.io/jnmorse/pen/eJjYrO is an example using web intent, wherever your generate the quote you would replace 'Hello World' with your message
Does anyone know why this .attr doesn't work, when .html does?
function getQuote() {
$.get("http://www.stands4.com/services/v2/quotes.php?uid=4835&tokenid=removeme&searchtype=RANDOM", function(data) {
theQuote = data.getElementsByTagName("quote")[0].innerHTML; // .innerHTML fixes some odd bug where theQuote can only be used once
theAuthor = data.getElementsByTagName("author")[0].innerHTML ;
$('#quote').html('"' + theQuote + '"');
$('#quoteBy').html("-" + theAuthor);
$('#twtBtn').attr("data-text", "hello"); //insert text into tweet - NOT WORKING
});
}Here's my codepen: http://codepen.io/mholst1/pen/zrymgw?editors=1111
Impending Migration May Result in Initial Slowdowns
We're going to be rolling out a fix shortly that should improve server performance longer term, but the initial result will be more server load. Expect to see some slowdowns until users have migrated.
Hey guys! Working on the Pomodoro clock and was curious if anyone had a good resource to select a sound from so I can use it when the timer changes?
Or maybe alternatively find a way to use my 'theQuote' and 'theAuthor' variables outside of the callback?
@sreeves89 got mine from http://soundbible.com/
@MHolst1 to be honest I'm not sure, I think its easier to just use the web intent option
Perfect, thanks @jondcoleman!
sreeves89 sends brownie points to @jondcoleman :sparkles: :thumbsup: :sparkles:
:star: 530 | @jondcoleman | http://www.freecodecamp.com/jondcoleman
If you are unable to submit a challenge, refresh your browser! New code in place!
@MHolst1 if you are using the twitter widget that won't work unless you trigger the widget javascript again for it to pick up the changees
look at the twitter javascript widget docs for how to do that @MHolst1. Or just use web intents which is definitely easier for this use case
@jondcoleman Don't you still have to use .attr to inject the quote into the href for the web intent?
@jondcoleman I suppose .html could be used to fill the whole <a></a>
I was just hoping to avoid the re-loading of the tweet button every time I generate a new quote
by that I mean it disappearing off the page and then re-appearing
@MHolst1 yeah just change the href attribute or replace the whole link with each new quote
I need help please!
$(document).ready(function(){
var session=25;
var breakLength=0;
$('.adjust').click(function(){
var id = $(this).attr('id');
console.log("ID: "+id);
});});
my code is not printing the id
@jondcoleman Thanks for the advice, much appreciated!
mholst1 sends brownie points to @jondcoleman :sparkles: :thumbsup: :sparkles:
:star: 532 | @jondcoleman | http://www.freecodecamp.com/jondcoleman
:thumbsup:
Hey guys, i really need help with the calculator challenge. I'm stuck and it's so frustrating.
var count = "";
var calc= [];
var operation = "";
var number = "";
var math = {
"+": function (x,y) {x+y},
"-": function (x,y) {x-y},
"/": function (x,y) {x/y},
"*": function (x,y) {x*y},
"%": function (x,y) {x%y}
}
var answer = 0;
$("button").click(function() {
var text = $(this).attr("value");
if (text !== "AC" && text !== "=" && text !== "CE" && text !== "ANS") {
if (text === "+" || text === "-" || text === "*" || text === "/" || text === "%" ) {
number = parseInt(count);
calc.push(number);
operation = text;
count = count + text;
$(".textbox").val(count);
}
else {
number = number + text;
count = count + text;
$(".textbox").val(count);
}
}
else if(text === "AC") {
count = "";
calc = "";
$(".textbox").val(count);
}
else if(text === "=") {
calc = "";
answer = math[operation](calc[0], calc[1]);
$("textbox").val(math[operation](calc[0], calc[1]));
}
});
this is my code so far. The problem that i have is that whenever i press AC the operator buttons don't work anymore, i can click them but the value is not shown in the display
hello everyone
anyone who has completed the RandomMachineQuotes how can incorporate the tweet the random QUote
Can you rephrase you question? I don't understand it
on the Random Quote Machine project you are suppose to tweet the quote after it has been generated
how can i do that?
Yeah, you need to implement a button that has the twitter share link as href
I used an array that had every word as an element and added the array element and %20 to the link. I used a for loop to do that
but there are certainly other ways
so you need a js function
well you don't need it to put a share button on the page. But if you want the pop-up window to have the quote as a prewritten quote you'd need a js function
@LennixM Thank you
ahmo10 sends brownie points to @lennixm :sparkles: :thumbsup: :sparkles:
:star: 267 | @lennixm | http://www.freecodecamp.com/lennixm
Can nobody help me?:(
hi guys! I've spent whole day looking for some mistake in my navigation but i see nothing. It looks good but when i click the button to unfold a menu nothing happens. Please have a look
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Kacper Porembski</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Portfolio">Portfolio</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
I'm just getting started on the JS Calculator. Can someone help me get going. I'm trying to figure out how I would get the value from the button clicked and append that to the input box.
Here's what I have, I know it's not right at all.
'''
$('button').click(function() {
$('#input').append(this)
});
'''
'''
$('button').click(function() {
$('#input').append(this)
});
'''
:bulb: to format code use backticks! ``` more info
@emillion90 you probably want this.text() or something like that
try console.log(this) and see what you get
one of the properties in that object should contain the number you want
console.log(this) prints out this:
"<button class='button' value='3'>
3
</button>"
ok yeah so you should be able to use either this.text() or this.value maybe?
try console logging those and see what you get @emillion90
@emillion90 and you probably want the .val() function for setting your input value rather than append()
Ah ok. Your suggestion worked, thanks @jondcoleman.
emillion90 sends brownie points to @jondcoleman :sparkles: :thumbsup: :sparkles:
:star: 534 | @jondcoleman | http://www.freecodecamp.com/jondcoleman
:clap:
Is anyone here good with materialized css?
I'm trying to make a simple jQuery function where I click a button, and it adds 5 to the html of one of my elements. I can't seem to make it work. I'm guessing there is an easy way to do this, but I can't seem to find it. Here's what I have:
$(".incwrk").click(function(){
$("#min").html(function(){
var added = ("#min").html() + 10
return added;
});
});
@BLayman Which element do you want to add
5 to?
min
@BLayman you're forgetting to select
("#min"), need the $ infrontvar added = ("#min").html() + 10
$("#min").append("5");
Unless you're trying to do math. The code I gave will just literally append 5 to the end of the HTML of
min.
Yeah I'm trying to mathematically add 5
@BLayman Anything returned from .html() will be a string so you're going to have to convert it to a number before adding 5 to it.
this might be easy but... i'm trying to build a navbar w/dropdown menu and it won't dropdown in codepen. I even copied an example from bootstraps website just to see if it would work and it didnt
@kme211 I see, is there a method I can use to do that?
bootstrap is loaded through codepen as well
@BLayman There's more than one method to convert a string to a number. Udemy has a blog post you might find helpful.
@kme211 Got it to work using parseInt(), thanks!
blayman sends brownie points to @kme211 :sparkles: :thumbsup: :sparkles:
:star: 323 | @kme211 | http://www.freecodecamp.com/kme211
@Manish-Giri Good catch, thanks.
blayman sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star: 632 | @manish-giri | http://www.freecodecamp.com/manish-giri
@joeymelnick put your pen here, so we can look!
buttons only visible on xs
@joeymelnick what's supposed to dropdown?
ah the xs button, never mind
@joeymelnick solved, you need to add the JS components of BS as well. go to settings > javascript > quickadd > bootstrap. Then run.
ohhh
duh duh
@Manish-Giri thanks!
joeymelnick sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star: 633 | @manish-giri | http://www.freecodecamp.com/manish-giri
hey there. is there a way to implement a like counter for the random quote machine on codepen?
i've checked online and it seems that most involve some sort of server-side code
@jxvo92 it's quite easy with Angular
@jxvo92 what do you mean by a counter?
Working on the portfolio page and having some trouble with imgaes
images, sorry
@jxvo92 If you fake the data, you won't need any server-side code.
@valmunos What kind of trouble?
I am creating separate classes for each section of my webpage, using a different background image in each one. My CSS is of the format:
.intro-section {
background: url("url text here") no-repeat center center fixed;
}for whatever reason, it is having trouble finding the url I have given. What's interesting is if I use the same exact url in an <img> element in my HTML box, it has no trouble finding the image. Can somebody please explain what the issue might be?
all my quotes are in an array. i am trying to create a separate likes array with the same amount of indexes based on quotes.length, each starting at 0 likes. when the user clicks the like button, the likes counter for that particular quote increases by 1 (something likes[n] += 1, where n matches the random quote quotes[n]). clicking the button again counts as an unlike (likes[n] -=1 ).
@kme211 I can send you the url if you'd like
@valmunos Sure, I'll take a look
seems like you pretty much need to learn angular, any recommendations for places to look at?
i guess i will have to continue learning and cry to implement the counter later. here's my code so far so you can get a feel of what i was trying to accomplish: http://codepen.io/jxvo/pen/OMwXxQ
@valmunos There's probably a CSS rule that is overriding your background image. Do you have a link to your codepen?
Hello guys. Is anyone proficient in flex display ?
@jxvo92 I feel like it might be easier to keep your data together.
[{quote: "A quote", likes: 0}, {quote: "Another quote", likes: 0}]
@kme211 here: http://codepen.io/valmunos/pen/xZQMOg
So, I played around with some stuff, got the first image up but none of my other div's can get their background images oup
also, I need to go to class here in like 5 minutes
@jxvo92 You don't have to edit all those quotes to accomplish that though. Use map to iterate over all those quotes and set their likes to 0.
// after quotes have been defined
quotes = quotes.map(function(quote) {
// return an object for each quote in the array
// with the quote being the value of "text"
// and likes being 0 being the default value of "likes"
return {
text: quote,
likes: 0
};
})
@kme211 If there's a way to automate that it would be better. I plan on adding more quotes once I come back to this project
@valmunos I'll check it out.
@jxvo92 The only way to automate quotes is to use an external API. But for now, manual input is enough, even recommended if you're new. You'll have many opportunities to learn about APIs integration in later projects
@valmunos no dot in front of two of the section classes in your css
Can anyone help me with a flex problem i'm having ?
@valmunos and unnecessary brackets around teh background stuff in teh portfolio section in the css
@kme211 thanks for reminding me about .map! i knew there was an easier way to organize things
jxvo92 sends brownie points to @kme211 :sparkles: :thumbsup: :sparkles:
:star: 324 | @kme211 | http://www.freecodecamp.com/kme211
@mutantspore thanks! figured it was something like that
valmunos sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1116 | @mutantspore | http://www.freecodecamp.com/mutantspore
http://codepen.io/UnlimiWorks/pen/vLvjEO This is the current project i'm working on. I'm trying to mimic the style of the example project. I have a problem with aligning items using flex to my #display button
i still have to get the like button functionality down but i'll come back to it as i've successfully integrated what's required of the zipline
The items stay in their respective position no matter what I try
@jxvo92 Good luck with that :) The like, tweet, share etc... work just as normal links, you just need to append infos relative to your quote with the initial links
@UnlimiWorks Are you wanting "Test" and "25:00" to be centered within the display button?
I want to apply something like :
#display {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}But it doesn't seem to work
In short, yes. Centered with equal space between them vertically
@kme211 Forgot to mention you :)
@UnlimiWorks Seems to work when I add your above code. Are you maybe missing a semicolon somewhere?
@kme211 Let me check
Nope... It seems it's something related to codepen ? When I run my code from gitter preview (my link above) it's working perfectly
@UnlimiWorks Try setting the vendor prefixing to "autoprefixer" in the CSS settings.
@kme211 Did that and refreshed, but no changes sadly :worried:
@UnlimiWorks What browser are you using?
I'm using the latest firefox version
Flex is supported though, if i trust caniuse.com. I also used flex in my precedent projects without any problem
@UnlimiWorks Yeah, there's definitely a difference in Firefox
I'll try in another browser
Oh. I found the problem
@UnlimiWorks What was it?
'Firefox does not support Flexbox in button elements' - Known issues, caniuse.com
So basically, it's a firefox problem as you predicted
@UnlimiWorks Ah... Good to know!
It happens that my specific use case is the one that doesn't work. Unlucky :)
This message was deleted
@kme211 Thanks for your help ! I'll try to find a clean solution to that
unlimiworks sends brownie points to @kme211 :sparkles: :thumbsup: :sparkles:
:star: 325 | @kme211 | http://www.freecodecamp.com/kme211
@UnlimiWorks At least it's an easy fix! Just change the button to a div.
@kme211 I'll try to use a div inside the button, i'm using that one for all my JS events :worried:
I hate useless divs though :)
@UnlimiWorks Yeah, I would just replace the button with a div and add
cursor: pointer; to the CSS for it.
hi guys, i don't really have a specific question i guess. I'm working on the local weather project and it's my first time working with api calls so i've been doing research. i have been actively trying to keep my project code for the work so far as pure javascript, so that i can understand the language underlying language before using libraries or frameworks.
anyways, i guess my question is are there any examples of i guess 'pretty' js implementations of api calls. i'm using the api @ openweathermap if curious