Good evening! The 24-7 freecode camp coding music rocks
@clanmaster the what
@moT01 the FreeCodeCamp radio
Listening to it as a code
indeed!
@moT01 thanks
clanmaster sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1027 | @mot01 |http://www.freecodecamp.org/mot01
awesome thanks @clanmaster @gulsvi
mot01 sends brownie points to @clanmaster and @gulsvi :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @clanmaster |http://www.freecodecamp.org/clanmaster
:star2: 2661 | @gulsvi |http://www.freecodecamp.org/gulsvi
why they don't put it on soundcloud?
@padunk They explain in their blog post that they felt more campers were on youtube already watching tutorials...so they thought it would get more traffic to put the stream there too
I personally don't like it because I can't listen to it on my phone with the screen off unless I have youtube red or whatever
@danmalone89 exactly that is why i don't like it too :smile:
we should make radiotube for it
Does anybody know if I can output pug strings into a custom currency or phone number format?
var string = “1234567890”
res.send(string) // (123)456-7890 or $1,234,567,890
@leanjunio Maybe using regexp?
you can use regexp to format outputs?
The challenge would be to recognize the pattern as being phone or currency then applying a regex on it
And building that regex in between :)
i see, thx man
Hi coders.
I just want to know why the heck is this returning false?
I just want to know why the heck is this returning false?
function palindrome(str) {
// Good luck!
return str == str.toLowerCase().replace(/[.*#_ ,]/gi, '').split("").reverse().join("");
// return str.toLowerCase().replace(/[.*#_ ,]/gi, '').split("").reverse().join("");
}palindrome("_eye");
What does
str.toLowerCase().replace(/[.*#_ ,]/gi, '').split("").reverse().join("") return?
@maxiwer First cleanse the string (replace and lowercase). Then check for palindromicality.
So both sides of comparison need to be cleansed.
@Masd925 palindromicality is that a word? but i like how it sound
@padunk I believe it is.
@X140hu4 returning
eye
@Masd925 you mean to divide the string and compare those two parts?
@maxiwer I mean that you first need to lowercase and remove non-alphanumerics. Then compare that string with the reversed one. So don't compare with the original, like you do there.
@Masd925 I think I'm doing the thing that you've said
@maxiwer You are comparing for example
_eye (original) with eye (cleansed and reversed). You need to be comparing eye (cleansed) with eye (cleansed and reversed).
@Masd925 Thanks.
maxiwer sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4719 | @masd925 |http://www.freecodecamp.org/masd925
@gulsvi woah bro can you show me how you changed my navbar? looks sick
because i dont fully understand it
i want to take the code but it would be a waste of time
evening fCC
@DarrenfJ :wave: and thanks for all the help today
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2418 | @darrenfj |http://www.freecodecamp.org/darrenfj
i require assistance
@Frosty427 Just post the question here.
go to my codepen
youll see the iphone x image is shoved into the top
thats when i added a link to it
and anchor
im trying to recreate the apple website
and the second i added an anchor it got shoved up to the top
@Frosty427 I think the problem is that you're giving
a elements a height of 40px in your css (line 5)
@toianw oh sht
didnt even think of that
@maxiwer toLowerCase, then replace, then compare
guys
help
status doesnt record the variables in the array outside of the for loop
how do i fix it?
@Juke-Magic Inside of the
You have to go on handling the response data at the point where you have it - in the callback of the
for you make asynchronous api calls. This means that your console.log(status[0]) runs BEFORE any data came back and BEFORE status is filled.You have to go on handling the response data at the point where you have it - in the callback of the
$.getJSON. You can as example create a new function which takes a status as input and call that function from within the callback of jquery.
@Juke-Magic I called the function
set and passed in samp as an argument below it. As well also I console.log(status) right after the push, ties into what @alpox was saying.
@ezioda004
I remember seeing the skill section on your portfolio, where did you get the percentages of your skills from?
can i get some help?
i fixed all the images but the homepod button is all messed up for some reason
@Frosty427 Which button?
button?
wdym
@MuhammedKarim
the homepod image
WAIT
LOL I PUT BUTTON
i meant image
@Frosty427 it looks fine?
No it doesnt
And does your last image have a shadow??
@MuhammedKarim screenshots
gotta retake it
and wdym it looks fine?
look at the homepod image
@Frosty427 got it
@Frosty427 Barely have a clue about bootstrap, sorry
@MuhammedKarim ok
@Frosty427 fixed it
@Frosty427 Take out the col classes in your images...
@Frosty427
@Frosty427 And check you closed your tags properly
You put 6 instead of 12
@X140hu4 i need those cols to make it look like the apple website
The cols are fine, just use them properly. Have you found your mistake? @Frosty427
@MuhammedKarim yup
he was right i had double col classes
i completely overlooked that
:+1:
@MuhammedKarim @X140hu4 thanks
:cookie: 136 | @muhammedkarim |http://www.freecodecamp.org/muhammedkarim
frosty427 sends brownie points to @muhammedkarim and @x140hu4 :sparkles: :thumbsup: :sparkles:
api offline
@MuhammedKarim would you know how to go about making a footeR?
similar to this one
@Frosty427 I'll give you a bit of a hint. Go and click inspect element on the Apple website. I have to go out now, if you still can't figure it out, let me know and I'll try to help.
@Frosty427 still doing bootstrap for that?
@Frosty427 https://codepen.io/lydatech/pen/XEWLEe
@Frosty427 https://codepen.io/lydatech/pen/wmvVxq
What is wrong ith this code? Codepen is showing error.
$.(".btn").on("click", function(){
if(this.id ==="ac"){
inputs = [""];
}
});
@Raghav17 No dot after $
$(".btn").on
@NJM8 Yeah, thanks buddy. I need to take a walk I think. :D
raghav17 sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @njm8 |http://www.freecodecamp.org/njm8
It happens, no problem
@lydatech thanks for some of the suggestions but im trying to make it like apple where if its small it shows the footers titles and when it goes large it shows everything
frosty427 sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2693 | @lydatech |http://www.freecodecamp.org/lydatech
@Frosty427 Have you learnt Bootstrap?
@MuhammedKarim im still learning it
building the apple website as i go
There should be somewhere in bootstrap where if the screen is less than a certain size, a certain style is put into action. You may be able to do it with CSS as well... idk @Frosty427
@MuhammedKarim yea im trying to look for that
@Frosty427 you can define multiple
col attributes to your HTML elements
@Frosty427 like
class="col-md-6 col-xs-12"
so it will take up half the space using col-md-6 until it gets to an XS screen, then take up all the space.
@ehutchllew
give me a second
you could also use flexbox or grid, but they're a bit more complicated than bootstrap imo
this is what im trying to recreate
when it goes small
i want plus signs
ah, look up fontAwesome for the plus sign
@Frosty427 I'm not a CSS expert, but to achieve that you'd probably have to arrange everything in an
<ul> then have a @media query to arrange everything into an accordion drop down when the screen size gets to like 740px or something.
oh boy
media queries
havent learned about them
it's not that bad, you just say something like
@media screen and (max-width 740px) then write your css code for that condition underneath. But look up media queries on MDN, that will explain things way better than I can hehe.
Hey guys, I am trying to do something but its not working as i think it should work.
I am selecting all the '.cell' classes with jquery $('.cell').on('click', function(){ //code });
I am selecting all the '.cell' classes with jquery $('.cell').on('click', function(){ //code });
in the content of that function I am trying to -use $(this).css('background-color', 'red');
But it is not working
any idea why my logic is not working?
@Ronald03 can you post your code?
@Ronald03 suggestion would be to console.log(this). and check the console to see what you are actually returning.
also you could try and access the event via function (event){ console.log(event); } this could be a solution if your .cell is returning more than one item.
@Ronald03 and, do you have jquery loaded in your script? :)
Hey!
Hey
Hi
Hey
Just joining this community!
@Peaceultimatum Welcome!
Hey I’m trying to decrement an array of objects with setInterval, can anyone lend assistance into what it is I’m missing?
timers = [{key: 'cat', timeLeft: 5}, {key:'dog', timeLeft: 4}]
//Updates Array timeLeft by the second
function updateTime(arrayName) {
arrayName.forEach(item => {
let key = item.key
let countDown = setInterval((item) => {
let remainingTime = item['timeLeft'] - 1
if(remainingTime < 0) {
clearInterval(countDown)
return
}
item['timeLeft'] = remainingTime
console.log(item)
}, 1000)
});
}
updateTime(timers)
Hi guys. I`m trying to collapse just one section in fcc menu, anybody have any solution?
hello
for the menu to stay collapsed you need to finish all challenges :D other than that, just click the topic @AlexJSx
@jjzep Your setInterval function is redefining item
@jjzep
timers = [{key: 'cat', timeLeft: 5}, {key:'dog', timeLeft: 4}]
//Updates Array timeLeft by the second
function updateTime(arrayName) {
arrayName.forEach(item => {
let key = item.key
let countDown = setInterval(() => {
item.timeLeft = item.timeLeft - 1
if(item.timeLeft < 0) {
clearInterval(countDown)
return
}
console.log(item)
}, 1000)
});
}
updateTime(timers)
Thanks @sjames1958gm @gaobin1019
jjzep sends brownie points to @sjames1958gm and @gaobin1019 :sparkles: :thumbsup: :sparkles:
api offline
:star2: 9076 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Is closure or lexical scope just the idea that children have more variables than the parent function?
@RoutinePoutine Lexical scope means that scopes are defined by how the functions sit in the code in respect to each other.
Thanks
Thanks Markus
@RoutinePoutine Functions have a variable environment and we talk about closure usually in the case when the variable environment would have vanished, but stays alive because some function has access to it. Usually when a function is returned from another function that finishes executing.
Another way to think about it is that all JS functions are closures, function and its variable environment.
@Masd925 lexical scope is the scope defined by source code, dynamic scope is defined at runtime using a stack usually
closure is an inner function have access to outer function's scope (exclude this and arguments)
closure is an inner function have access to outer function's scope (exclude this and arguments)
@RoutinePoutine https://www.youtube.com/watch?v=71AtaJpJHw0&t=2s techsith explains it very well.
Thanks! Douglas Crockford is hard for me to follow at the moment, on a free trial at Lynda.
Hi there, anyone available to help me debug my random quote generator?
Having trouble with getting my buttons to respond to JQuery ...
sure
just post your code in codepen / jsfiddle if possible
It actually seems like the API request just isn't working
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" this is your call .... orderby and posts_per_page are arguments that you need to insert
ohhh duh. thanks haha
also, I don't think this is how that api call is supposed to be, let me check quicly it's documentation
according to documentation I think the arguments are already in the URL
you're right, was reading wrong fiels
fields
@tertiaryidentifier oh i got it
@tertiaryidentifier it's not http, it's https
Xd
Oh, thanks. Is that a codepen thing?
no
and yes
codepen doesn't allow mixed content - http
always use https
@tertiaryidentifier The browser will not all API requests to an http endpoint from an https page. Codepen is loaded via https.
Does anyone know why this line of code would result in line breaks between each part?
$("#targ").append("<p>"" + a[0].content + ""</p>");
@tertiaryidentifier try this way. make 2 p tags in html, and in first you append quote text, and in the other you append an author
it will be much easier to do instead of doing it your way
okay, #targ is a div, I'll try to rearrange it
id "targ " is p xD
was :|
sorry, many changes!
It works now. Thanks all. Moving on to the next challenge :)
oh, wait, except for some other parts of this challenge ... blergh :/
@tertiaryidentifier how does it work? :P
from what I can see, it generates only one, same, quote
you should have more quotes and generate one random quote at a time on the screen
yes yes I know
working on it!
what's why it's called random quote challenge xD
okay, so I know I have to find a way to delete the old quotes and append new ones
but why wouldn't the code call the API each time I click on the button? shouldn't the code being appended at least be new quotes. the api call is nestled under ".on(click,"
the problem is, you're calling quotes like this a[0].content
a is an array here
and 0 is the first object inside the array
so it will always call that first
and second issue is [posts_per_page]=1 inside your link
yes but each time the API is called wouldn't a become a new array?
it will fetch only one quote obejct
so instead I should call like 50 and iterate through each time?
you call 50 inside your array, and when you click on a button, you get random number from 0 to that array length
to get a random quote
that a formula you gotta write there somewhere
xD
Might be interesting for web designers
@alpox nice post there
@tertiaryidentifier Just an observation. When you go with a counter thing, it's still not random because when you manage to call quotes with a counter+1, you'll just get the next in a row, not actually randomly chosen quote.
:D
not working XD
Working for me...
scroll down ...?
@tertiaryidentifier https://i.imgur.com/jvgFYdf.png this is what i get :| maybe it's my problem, wouldn't be the first time
Yeah sorry it works for me, don't know why it would say that
would be great if someone else besides me could test it :)
@tertiaryidentifier this is mine: https://htmlpreview.github.io/?https://github.com/mbosnjak01/Random-quote-machine/blob/master/index.html
@tertiaryidentifier It works, but it seems like once in a while it will break. Checking the browser console it see
TypeError: a[rand] is undefined[Learn More]
index.html:54:9
I'm also on firefox BTW.
might have something to do with how I' m randomizing numbers
I am using different approach to getting random quote, using array.length and slightly different composition of my api quotes file to call them easier
My guess is the array a isn't the expected size.
so if u wanna check, it's on my github
hello guys what really causes net::err_aborted
here's the error
@JNZY Can you post a picture of the error?
Can I get some feedback on the wiki viewer? https://codepen.io/Kiwilicious/pen/oBbXyP
@Kiwilicious the functionality seems to be there maybe some colors, since its only black and white at the moment
goodjob
hi guys, my input field is pushing right out like this. any idea why when the columns either side are supposed to restrict the middle one? and could the code be written in a better way? as it happens, the icon wont appear unless i have both 3 and 4 bootstrap required, but 3 alone buggers up my layout. im stuck, heres the screenshot.
the only extra class is this one:
.middlerows {
background-color: white;
padding: 15px 25px 16px 25px;
margin: 0px 10px 0px 10px;
border: solid black;
border-width: 0px 0px 1px 0px;
}
the input-group class seems to be affecting it but only when the span for the icon is there
@leighhobson89 Instead of having 2 empty cols, you could just center the middle one.
do you mean using offset and specifying a size for it?
<div class="row justify-content-md-center">
<div class="col col-lg-3">
centered
</div>
</div>
Or offset yea.
thanks guys, any ideas why using input-group forces the input to be huge though? would this be fixed by implementing this change?
that link makes it so you don't need empty columns
thanks @eweiss17 @Kiwilicious
leighhobson89 sends brownie points to @eweiss17 and @kiwilicious :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @kiwilicious |http://www.freecodecamp.org/kiwilicious
:cookie: 614 | @eweiss17 |http://www.freecodecamp.org/eweiss17
In your old code, I don't think you specified a width for the center col. The input element would just span the whole width then.
yes ^
ahh, i just thought it would span until it reached the next column that it wasnt inside
that would be overflow, right
thanks a lot
do you know how overflow works
i'll read up on it, i am actually trying to get to the javascript part of this challenge, my design is hazy at best!!
you are right, the js is more important in that one
@leighhobson89 https://jsfiddle.net/7dsyy0zd/7/ If you notice, the last div has no width modifier allowing the input to span the whole width.
right. i guess i made some assumptions about putting elements in columns, as eric said, the overflow factor has come in to play i think. its odd how it behaves perfectly if i take out the .input-group class and the span that puts the icon in though :/
one last thing
on this screenshot we can see that it is behaving better now, but i guess thye icon is being pushed out by the unspecified width of the input that fills the div, and so the icon overflows. the row is quite a bit wider, presumably i should reduce that, the size of the white box is how i would want it, so do i add the .col-lg-6 class to the row or something?
or resize the container that the row is in?
@gulsvi @sjames1958gm delayed brownie points sorry guys only just picked up the tips!!
@leighhobson89 You mean the col is wider. Just change the col-lg-6 to a smaller number. As for the input, one way to go about it is to define it's width to something less than 100%.
I'm trying to alternate 2 functions indefinitely that simply display text to the same html paragraph, what would be a good way to do this, here is the codepen so far https://codepen.io/Ryanwfile/pen/QQgjyM
thanks @Kiwilicious
leighhobson89 sends brownie points to @kiwilicious :sparkles: :thumbsup: :sparkles:
api offline
that feels like a workaround, but it works, so thats good enough for me, plus its still relative
i´m going to try and work out how to put the icon inside the input instead, i dont like how it scales to other screensizes. i've learnt a bit about layouts though, so thanks guys
done guys, thank you! If you're interested I googled it and with a combination of your layout techniques, and another approach to the icon, I have the result I want, as follows:
you can see the new code above the old here