These are chat archives for FreeCodeCamp/HelpFrontEnd

19th
Feb 2018
MuhammadYasser1
@MuhammadYasser1
Feb 19 2018 01:30
may any one explain "reduce method" as he understood it?
Tom
@moT01
Feb 19 2018 01:36
in #4 you find the reduce
// Array.prototype.reduce()
// 4. How many years did all the inventors live?
let years = inventors.reduce((total, inventor) => {
  return total + (inventor.passed - inventor.year);
},0);
total starts at 0 (what you put at the end)
and accumulates on each pass
and accumulates on each pass
would be real similar in this case to...
let totalYears = 0
inventors.forEach(inventor => {
  totalYears += (inventor.passed - inventor.year);
})
Tom
@moT01
Feb 19 2018 01:43
hope its starting to make some sense ... there's another example further down in my pen
starting with an empty object
and adding properties and values to it - and returning the object each time
bv
@binduverma1
Feb 19 2018 01:47
background image bot showing in codepen here is the code

body{

background-image:url("https://ibin.co/v/3sBvC861IDT8.jpg");
}

Tom
@moT01
Feb 19 2018 01:48
@binduverma1 try going to the url
bv
@binduverma1
Feb 19 2018 01:49
@moT01 , i did url is fine, pic is there
Tom
@moT01
Feb 19 2018 01:49
not for me
perhaps cause you're logged in or something - try in a private window
i get Sorry, the image you requested was not found. You may wish to upload your own file at the main page.
bv
@binduverma1
Feb 19 2018 01:50
Tom
@moT01
Feb 19 2018 01:50
still nothin
bv
@binduverma1
Feb 19 2018 01:51
in codepen you have to use link by changing imagebin/ca with ibin.co
Tom
@moT01
Feb 19 2018 01:51
unless its a picture of the text I put above
bv
@binduverma1
Feb 19 2018 01:52
you are right, it was there few minutes ago
Tom
@moT01
Feb 19 2018 01:53
now i see it
cept its not a link directly to the picture
right click the pic and then view image
or maybe open image or something like that
use that url
bv
@binduverma1
Feb 19 2018 01:55
ok i ll try
@moT01 no url doesnot work
Tom
@moT01
Feb 19 2018 01:57
https://ibin.co/w800/3sBvC861IDT8.jpg
that one?
worked for me
DMsalati
@DMsalati
Feb 19 2018 01:59
https://codepen.io/Muradmsalati/pen/pawPVR?editors=1010
can someone tell me why the link for the first list item is not working and its only showing the link as text rather than a link?
also idk why im getting <see 'tfd'> on the description of some searches while others work fine.
see tfd appears when i search apple, not sure if it does that with other searches too
Tom
@moT01
Feb 19 2018 02:06
you need to change the attribute rather than the html
tfd is what you get in your results
  $.getJSON(wikiApi, function(json) {
    console.log(json);
DMsalati
@DMsalati
Feb 19 2018 02:10
@moT01 im not really familiar with attributes ill look into them, tdf doesnt show in json tho,
Tom
@moT01
Feb 19 2018 02:10
attribute are the things you put in the html tags
DMsalati
@DMsalati
Feb 19 2018 02:11
this is the json file im using
Tom
@moT01
Feb 19 2018 02:11
<div class="" id="">
class and id are attributes
DMsalati
@DMsalati
Feb 19 2018 02:11
how do i target <a> tho? there are multiple and i want to do a different thing with each
Tom
@moT01
Feb 19 2018 02:12
find a way to target it
CamperBot
@camperbot
Feb 19 2018 02:12
find a way to target it
nothing found
Tom
@moT01
Feb 19 2018 02:13
its doable - - the tfd is in many results you're getting back - not sure what to tell ya there - use a different query
DMsalati
@DMsalati
Feb 19 2018 02:15
ok ill try
santhoshbalaguru001
@santhoshbalaguru001
Feb 19 2018 05:21
epl 2015 / epl 2016 text need to make in bottom of the box , what i have to do>
Matt Reynolds
@mareynolds
Feb 19 2018 05:40
Trying to share a "random quote" on Facebook. This opens a tab to share on FB, but just this comes up: "https://s.codepen.io/boomerang/iFrameKey-f477d4e1-6aca-e166-682c-a7ca6af90ab0/index.html?editors=1010". Anyone know how I can fix this so that the actual quote is entered automatically?
$("#facebook-share").attr(
          "href",
          "https://www.facebook.com/sharer/sharer.php?=" +
            encodeURIComponent('"' + currentQuote + '" ' + currentAuthor)
        );
Matt Reynolds
@mareynolds
Feb 19 2018 05:50
@santhoshbalaguru001 You could put your text into a <table></table>, and use style "vertical-align: bottom;". This can be applied to the entire table, or just one row.
Sundeep
@pidugusundeep
Feb 19 2018 05:58
Anyone help me with creating alignment helping lines for a canvas ?
any preferred javascript frameworks ?
@mareynolds can you help me ?
image.png
something like these lines
Greg Gordon
@greggordoncode_twitter
Feb 19 2018 06:21
https://codepen.io/papageg/pen/OQjwWy/ Why is the background on my <p> white and not taking on my main background?
Matt Reynolds
@mareynolds
Feb 19 2018 06:21
@santhoshbalaguru001 try creating a <table> with two rows <tr> and 3 columns <td> in each row, then add a border:
border: 1px dotted black;
Fabien SHAN
@X140hu4
Feb 19 2018 06:31
@greggordoncode_twitter The margin-top on your main content
Greg Gordon
@greggordoncode_twitter
Feb 19 2018 06:33
so how do i get my text to start under the nav bar?
Fabien SHAN
@X140hu4
Feb 19 2018 06:35
@greggordoncode_twitter Wrap your main section and apply the background on that element
and have the margin-top on that element too
hensn5250
@hensn5250
Feb 19 2018 06:37
@greggordoncode_twitter Why are you using the HTML element in your CSS? I'd use the body instead of HTML that should help.
Greg Gordon
@greggordoncode_twitter
Feb 19 2018 06:39
Perfect got it thank you
hensn5250
@hensn5250
Feb 19 2018 06:43
@greggordoncode_twitter are you familiar with CSS viewport values? Well, instead of setting the width of the body to 100% you can set it to 100vh (viewport height). If i recall correct, the percentage is based on the content where as the viewport is based on the browser's window.
Randy
@RandyGoldsmith
Feb 19 2018 06:46
under personal, im trying to get space between the p tag and strong tags.. while also trying to make sure everything is centered up straight..how would i do that?
https://codepen.io/duel_drawer8/pen/zRwraZ
Greg Gordon
@greggordoncode_twitter
Feb 19 2018 06:46
nope just starting in on this
Fabien SHAN
@X140hu4
Feb 19 2018 06:48
@RandyGoldsmith You could use a table or CSS grid
Or have the strong element as an inline-block and give it a fixed width
Randy
@RandyGoldsmith
Feb 19 2018 06:50
@X140hu4 thanks that worked..inline block method
CamperBot
@camperbot
Feb 19 2018 06:50
randygoldsmith sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @x140hu4 |http://www.freecodecamp.org/x140hu4
Sundeep
@pidugusundeep
Feb 19 2018 06:51
@X140hu4 Can you help me
Fabien SHAN
@X140hu4
Feb 19 2018 06:52
No my head hurts working on the simon project
Explain your issue, someone may help
CamperBot
@camperbot
Feb 19 2018 06:52

freeCodeCamp Wiki:

:point_right: The freeCodeCamp wiki can be found on our forum.
Please follow the link and search there.
Sundeep
@pidugusundeep
Feb 19 2018 06:53
@pidugusundeep
Anyone help me with creating alignment helping lines for a canvas ?
something like these lines
hensn5250
@hensn5250
Feb 19 2018 06:56
you can use the outline property to add helping/guide lines.
Sundeep
@pidugusundeep
Feb 19 2018 06:58
i just want to know if there is any javascript library that i could extend to make use of this functionality instead of doing it from scratch
@hensn5250
hensn5250
@hensn5250
Feb 19 2018 06:59
what functionality? adding outlines on element?
Sundeep
@pidugusundeep
Feb 19 2018 06:59
Yeah
hensn5250
@hensn5250
Feb 19 2018 06:59
the browser does that already in the inspect section
Sundeep
@pidugusundeep
Feb 19 2018 07:00
any pen code that i could understand
with an example.
hensn5250
@hensn5250
Feb 19 2018 07:01
what is the example above suppose to be doing? what is your main objective?
Sundeep
@pidugusundeep
Feb 19 2018 07:02
iam creating a design page kind of page where you can drag and drop the components to design a page so i just want to add this extra feature where the user can actually decide where to place an image or something like that on the same line horizontal
hensn5250
@hensn5250
Feb 19 2018 07:05
Well there may be a library for that but I'm not aware of it. That sounds more like a Content Management System.
@X140hu4
Fabien SHAN
@X140hu4
Feb 19 2018 07:12
@hensn5250 Yes?
hensn5250
@hensn5250
Feb 19 2018 07:14
You said you were working on the Simon App. Was curious what you were having issues with.
FYI, I have not reached there yet, I'm about 2 projects away.
Fabien SHAN
@X140hu4
Feb 19 2018 07:15
I got some help from another fCC chatroom and some research :)
Have a look at the HelpJavascript channel
You are on the pomodoro clock?
hensn5250
@hensn5250
Feb 19 2018 07:16
3 projects actually. The JS Clock.
Fabien SHAN
@X140hu4
Feb 19 2018 07:34
@hensn5250 JS clock? or calculator?
HerbiScript
@HerbiScript
Feb 19 2018 08:22
Hey everyone, just wondering if someone can please explain how the parameter "arr" is selecting the variable "testVarr" to produce the output in this instance. Been doing well, but this one seemed to stump me.

'function nextInLine(arr, item) {
// Your code here
arr.push(item);
return arr.shift(); // Change this line
}

// Test Setup
var testArr = [1,2,3,4,5];

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));'

Whoops. Meant to put that in markdown, sorry. I was wondering if someone could help me understand how the parameter "varr" is selecting the variable "testArr" in this instance? I got the solution but have trouble understanding why it's that way.
"arr"**
Markus Kiili
@Masd925
Feb 19 2018 08:26
@HerbiScript When that function call nextInLine(testArr, 6) is made, the function nextInLine is executed with arr holding the array stored in testArr and item having value 6.
What actually is passed, is a reference to the array (object).
So JS variables actually hold either primitive values of references to objects.
HerbiScript
@HerbiScript
Feb 19 2018 08:32
Sorry if this is a stupid question, but I'm having trouble grasping how the function call you spoke of influences that specific variable. Does it have to do with the last 3 lines of code with the JSON.stringify?
Oh my god I'm so dumb. Thank you for your help I figured it out. @Masd925
CamperBot
@camperbot
Feb 19 2018 08:36
herbiscript sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4695 | @masd925 |http://www.freecodecamp.org/masd925
coderNewby
@coderNewby
Feb 19 2018 08:39
check your pm @DarrenfJ
have more questions
thanks for all your help too @DarrenfJ
CamperBot
@camperbot
Feb 19 2018 08:39
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2395 | @darrenfj |http://www.freecodecamp.org/darrenfj
Claudio Restifo
@Marmiz
Feb 19 2018 08:43

@HerbiScript when you declare a function I can specify how many parameters my function accept, and how they will be called inside the body.

function log(a, b) { [...] } // my function accepts two parameters that can be accessed in the body with the name of a and b

then I can call a function and pass any argument data to that function:

function log(a, b) { console.log('my values are ', a, b) } // a function that print out the arguments passed

// then I can call it passing each time different values
log(1, 'test') // my values are 1, 'test'
log([9,8,7], 'weirdString') //my values are [9,8,7], 'weirdString'

//and so on

make sense?

HerbiScript
@HerbiScript
Feb 19 2018 08:49
@Marmiz Yeah it definitely has clicked. I think that it just took me a while to understand that they put that variable "myArr" there to test on, and I could also input my own array as well. Thank you kindly for the thorough explanation (:
CamperBot
@camperbot
Feb 19 2018 08:49
herbiscript sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1168 | @marmiz |http://www.freecodecamp.org/marmiz
mustimuu
@mustimuu
Feb 19 2018 09:33
Hello guys
Can someone help me out maybe?
I can't get my JS file to work. It says jquery is not defined.
abraham anak agung
@padunk
Feb 19 2018 09:34
@mustimuu have you put it in your link tag?
mustimuu
@mustimuu
Feb 19 2018 09:35
yes
@padunk i put it before the boody
hang on
´´

´´´
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script src="animation.js"></script>
</body>

´´´

i am getting crazy, it wont wor
work*
.
Tiago Correia
@tiagocorreiaalmeida
Feb 19 2018 09:37
do your js folder contains that file?
abraham anak agung
@padunk
Feb 19 2018 09:37

@mustimuu

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

you need something like this

Tiago Correia
@tiagocorreiaalmeida
Feb 19 2018 09:37
^
if you dont have the file locally
mustimuu
@mustimuu
Feb 19 2018 09:37
i dont have the file localy
its cdn
Tiago Correia
@tiagocorreiaalmeida
Feb 19 2018 09:37
then you have to point to an url @mustimuu
abraham anak agung
@padunk
Feb 19 2018 09:37
@mustimuu
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
Tiago Correia
@tiagocorreiaalmeida
Feb 19 2018 09:37
as said above
abraham anak agung
@padunk
Feb 19 2018 09:38
your src point to the local folder and local file for animation
mustimuu
@mustimuu
Feb 19 2018 09:40
hmm
abraham anak agung
@padunk
Feb 19 2018 09:40
@mustimuu if you work in codepen, just add jQuery in the setting
mustimuu
@mustimuu
Feb 19 2018 09:40
i have got a folder name jqeury and my js.animation file is in there
i use brackets
Omg ..
Markus Kiili
@Masd925
Feb 19 2018 09:41
@mustimuu Just a note that that langauge attribute of script element is deprecated and thus useless.
mustimuu
@mustimuu
Feb 19 2018 09:41
@padunk
@Masd925
abraham anak agung
@padunk
Feb 19 2018 09:44
@mustimuu put the script tag in the head
mustimuu
@mustimuu
Feb 19 2018 09:44
i will try
seriously, still same result
I am getting frustrated.
abraham anak agung
@padunk
Feb 19 2018 09:48
@mustimuu it should work. Have you write any js file yet?
mustimuu
@mustimuu
Feb 19 2018 09:52
Yes like i have the script at bottom
i did
jquery
jQuery('.wildlife');
jquery is not defined
mustimuu
@mustimuu
Feb 19 2018 09:56
so frustrating
it should work !
Claudio Restifo
@Marmiz
Feb 19 2018 10:08
@mustimuu wait for the page to load before calling yout JQuery method
mustimuu
@mustimuu
Feb 19 2018 10:08
still wont work
says not defined
abraham anak agung
@padunk
Feb 19 2018 10:09
@mustimuu show your head tag
mustimuu
@mustimuu
Feb 19 2018 10:09
<head>
<title>Lake Tahoe</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
abraham anak agung
@padunk
Feb 19 2018 10:10
nothing wrong with it. why don't you try to close it and restart.
Markus Kiili
@Masd925
Feb 19 2018 10:12
@mustimuu Usually you can use the browser developer tools and browsers inspect source code option to see if resources are loaded.
Claudio Restifo
@Marmiz
Feb 19 2018 10:12
@mustimuu how's your JS script?
are you waiting for the page to load?
abraham anak agung
@padunk
Feb 19 2018 10:12
wait, where you put your js file script? @mustimuu
mustimuu
@mustimuu
Feb 19 2018 10:12
my js file is in a folder
Claudio Restifo
@Marmiz
Feb 19 2018 10:15
@mustimuu have you tried wrapping your JS function into a $(document).ready()
Markus Kiili
@Masd925
Feb 19 2018 10:19
$(document).ready(function(){CODE HERE}); or $(function(){CODE HERE}) will run your code after the page is ready.
mustimuu
@mustimuu
Feb 19 2018 11:21
Hello guys
anybody knows a website where to see which color fits which for websites?
@Masd925 thank you
@Marmiz thank
CamperBot
@camperbot
Feb 19 2018 11:21
mustimuu sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1169 | @marmiz |http://www.freecodecamp.org/marmiz
mustimuu
@mustimuu
Feb 19 2018 11:22
@Masd925 thank
@padunk thanks
CamperBot
@camperbot
Feb 19 2018 11:22
mustimuu sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 447 | @padunk |http://www.freecodecamp.org/padunk
Kris Baillargeon
@krisb1220
Feb 19 2018 12:16
Hey guys - How would I go about making this first page in a fixed position when it scrolls so that the second page kinda scrolls over it, like it has a higher z-index? Usually CSS can't kick my ass like this, but I can't figure this out :P
image.png
Marianissimus
@Marianissimus
Feb 19 2018 12:24
@krisb1220 what about position: fixed to the container of the first page? and then use z-index;
Fabien SHAN
@X140hu4
Feb 19 2018 12:25
@krisb1220 I believe you want to do a parallax scrolling effect
I found that while googling that haha : http://prinzhorn.github.io/skrollr/
Kris Baillargeon
@krisb1220
Feb 19 2018 12:43
Ahhh awesome, thanks guys @Marianissimus @X140hu4
CamperBot
@camperbot
Feb 19 2018 12:43
krisb1220 sends brownie points to @marianissimus and @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @x140hu4 |http://www.freecodecamp.org/x140hu4
:cookie: 468 | @marianissimus |http://www.freecodecamp.org/marianissimus
Kris Baillargeon
@krisb1220
Feb 19 2018 12:44
Now that I actually know what it's called it'll be much easier to find the answer LOL
(for my specific code)
Ah but one thing
How would I keep the text over the image fixed in position w/o fixing it to the screen?
when scrolling
when scrolling
Marianissimus
@Marianissimus
Feb 19 2018 12:49
which text? what do you want to scroll, what do you want to stay fixed?
Markus Kiili
@Masd925
Feb 19 2018 12:49
@krisb1220 Absolute positioning positions relative to the nearest non-static ancestor.
Kris Baillargeon
@krisb1220
Feb 19 2018 12:51
The background and text stays where it is but the second page does the parallax effect ^
Kris Baillargeon
@krisb1220
Feb 19 2018 13:07
@Masd925 I see what you were saying now
Damn it now I understand why people get so I annoyed when I wont just hand them the answer LOL
Thanks tho @Masd925
CamperBot
@camperbot
Feb 19 2018 13:07
krisb1220 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4697 | @masd925 |http://www.freecodecamp.org/masd925
Roman Struna
@RomchyFCC
Feb 19 2018 13:27
@bracar Thanks for the security issue fix!
CamperBot
@camperbot
Feb 19 2018 13:27
:cookie: 256 | @bracar |http://www.freecodecamp.org/bracar
romchyfcc sends brownie points to @bracar :sparkles: :thumbsup: :sparkles:
CamperBot
@camperbot
Feb 19 2018 14:49
mustimuu sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4698 | @masd925 |http://www.freecodecamp.org/masd925
Fabien SHAN
@X140hu4
Feb 19 2018 15:18
@krisb1220 I saw someone tweet about how it was so much easier than he imagined a few days ago :D
Kris Baillargeon
@krisb1220
Feb 19 2018 15:28
@X140hu4 My solution is a bit hack-y, but at the same time it was in the middle of prototype code which was a messssssss lol. Once it came down to it though it was really just "fixed here, absolute there, z-index" lol @X140hu4
Heathercoraje
@Heathercoraje
Feb 19 2018 15:30
Is codepen sick right now?
Kris Baillargeon
@krisb1220
Feb 19 2018 15:30
You know something I also found out was a lot easier than I thought? Creating high-fidelity mockups on programs like Adobe XD or Figma. As soon a I had an actual idea and I knew how to do all the little tricks, it can really speed up the design process lol
Why did nobody inform me?? You guys are letting me down
& gitter has been crapping out for the past couple days too
LydaTech
@lydatech
Feb 19 2018 15:34
@Heathercoraje working ok here
Heathercoraje
@Heathercoraje
Feb 19 2018 15:46
@lydatech thanks. My brain was sick for a moment
CamperBot
@camperbot
Feb 19 2018 15:46
heathercoraje sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2664 | @lydatech |http://www.freecodecamp.org/lydatech
Heathercoraje
@Heathercoraje
Feb 19 2018 15:46
:)
LydaTech
@lydatech
Feb 19 2018 15:47
@Heathercoraje :smile:
Yogender
@yb1997
Feb 19 2018 15:49
do anybody know regex for finding html tags in a string ?
efficient one
Ken Haduch
@khaduch
Feb 19 2018 16:00
@yb1997 - have you seen the examples on this page? There are a couple for HTML tags...
Yogender
@yb1997
Feb 19 2018 16:02
@khaduch didn't even knew this site exits, thanks
CamperBot
@camperbot
Feb 19 2018 16:02
yb1997 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3741 | @khaduch |http://www.freecodecamp.org/khaduch
Kaz Baig
@kbaig
Feb 19 2018 16:03
@yb1997 @khaduch relevant (funny) SO post
Yogender
@yb1997
Feb 19 2018 16:06
@kbaig my usecase is very specific, i know im always going to search for a p tag so that should not be an issue as far as i know
Ken Haduch
@khaduch
Feb 19 2018 16:06
@kbaig - wow, that's a crazy post!
@yb1997 - I just did a google search for some regular expression with HTML stuff... so there are many different posts and articles about this topic, including the one that @kbaig posted - it's not an easy thing to try and solve the general case, but for specific things, you should be able to do it!
Yogender
@yb1997
Feb 19 2018 16:09
yea and by the way do anyone know a good random quote api ?
Ken Haduch
@khaduch
Feb 19 2018 16:10
@yb1997 - a few that I see people using are "quotesondesign" and "forismatic" - but there are all kinds of quote servers out there, one for Chuck Norris quotes, Star Wars, etc.
Yogender
@yb1997
Feb 19 2018 16:11
I was using quotesondesign.com but for past few hours, they r giving me the same response, i think i exceeded my quota
Ken Haduch
@khaduch
Feb 19 2018 16:14
@yb1997 - I guess that quotas could be a problem, but sometimes you have to turn off browser caching in your request - how are you making the request? I've seen some people just having problems with it caching the request and then just getting the data repeatedly from the browser cache?
Yogender
@yb1997
Feb 19 2018 16:18
@khaduch I am using jQuery method to call API without setting any headers
and I'm sure browser caching can't be a problem as on every boot up, I'm using a new OS :smile:
Ken Haduch
@khaduch
Feb 19 2018 16:23
@yb1997 - okay - do you have this as a post on CodePen? If you're having a quota limit, then it should work for a different person, right? Or is there an app id that you have to use with that one?
Kris Baillargeon
@krisb1220
Feb 19 2018 16:51
What do you mean by spacing @taiJones00 ?
It looks great
Tai Jones
@taiJones00
Feb 19 2018 16:51
Oh well thank you but the buttons are all messed up
Kris Baillargeon
@krisb1220
Feb 19 2018 16:52
image.png
?
Tai Jones
@taiJones00
Feb 19 2018 16:52
Ohhhh gotcha
Here i'll save it
It's been updated. And even if it wasn't how can i get all the buttons centered inside the calculator?
Kris Baillargeon
@krisb1220
Feb 19 2018 16:53
Oh I see
Are you using flexbox?
Tai Jones
@taiJones00
Feb 19 2018 16:53
No but that actually might work. Isn't there some equal distance apart property?
Kris Baillargeon
@krisb1220
Feb 19 2018 16:54
Cause you can take all of that positioning and just turn it into a class with flexbox :P
Yes
Tai Jones
@taiJones00
Feb 19 2018 16:54
Man i've got to learn flexbox
Kris Baillargeon
@krisb1220
Feb 19 2018 16:54
justify-content: space-between / space-around ;
I haven't touched Bootstrap since I learned it
Yogender
@yb1997
Feb 19 2018 16:54
@khaduch sorry for late response my pc completely froze, here's the link https://codepen.io/ybisht1997/pen/LQOejw?editors=0010 api is now running properly but all I need is to remove those p tags that comes in response and get that inside text
Kris Baillargeon
@krisb1220
Feb 19 2018 16:55
Grid is next on my agenda lol
Tai Jones
@taiJones00
Feb 19 2018 16:55
Really? I actually only use bootstrap and i'm really just guessing on how the position property really works
bootstrap is so convienent
@krisb1220
I like it @yb1997 Try adding some margin-top
Kris Baillargeon
@krisb1220
Feb 19 2018 16:56
@yb1997 why not use element.innerText instead of element.html ?
Nahhh
It's too problematic
He's trying to take the <p> tags out when he sends the data to the twitter URL
Yogender
@yb1997
Feb 19 2018 16:57
@taiJones00 added padding to body from top, hows it now?
Kris Baillargeon
@krisb1220
Feb 19 2018 16:57
BTW a lot of you guys are designing stuff so kind of on topic --
Figma is awesome for rapid prototyping as well as making them high quality af without having to spend an hour fixing fkn padding
Tai Jones
@taiJones00
Feb 19 2018 16:58
It's better :D
Yogender
@yb1997
Feb 19 2018 16:58
@krisb1220 its a string though so can't use innertext
Ken Haduch
@khaduch
Feb 19 2018 16:58
@yb1997 - I'm trying it and seeing the same quote every time... Until I added this: $.ajaxSetup({cache: false}); just before the $.getJSON call...
Kris Baillargeon
@krisb1220
Feb 19 2018 16:58
You still have to code it eventually, but for protoyping/mockups? Pure gold
Tai Jones
@taiJones00
Feb 19 2018 16:59
Bookmarked
Ken Haduch
@khaduch
Feb 19 2018 16:59
@yb1997 - I like the styling of your quote page...
Yogender
@yb1997
Feb 19 2018 16:59
@khaduch hmm never heard of ajaxsetup method before
@khaduch yea me too, actually my focus got diverted and instead of working on api, I started working on randomizing specific range of colors

my solution: function titleCase(str) {
var str1 =[];
str1 = str.split(" ");
for( var i = 0; i < str1.length; i++){
str1[i] = str1[i].substr(0,1).toUpperCase() + substr(1, str.length-1);
}
return str1.join();
}

titleCase("I'm a little tea pot");

getting an error in this code.
Kris Baillargeon
@krisb1220
Feb 19 2018 17:07
Got it
@yb1997 document.querySelector(".quote-text>p").innerHTML;
Yogender
@yb1997
Feb 19 2018 17:08
Thanks a lot @krisb1220
CamperBot
@camperbot
Feb 19 2018 17:08
yb1997 sends brownie points to @krisb1220 :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @krisb1220 |http://www.freecodecamp.org/krisb1220
h1tag
@h1tag
Feb 19 2018 17:09
@tptynlr did you check what the error says?
tptynlr
@tptynlr
Feb 19 2018 17:10
@h1tag substr is not defined is the error
h1tag
@h1tag
Feb 19 2018 17:11
@tptynlr yea, you have to fix that first
tptynlr
@tptynlr
Feb 19 2018 17:13
did u get my code?
Kris Baillargeon
@krisb1220
Feb 19 2018 17:13
Np
Yogender
@yb1997
Feb 19 2018 17:13
@krisb1220 btw u should have warned about figma's memory usage cuz my pc is again dead :smile:
tptynlr
@tptynlr
Feb 19 2018 17:14
what i am trying to do is access each string in an array and capitalize the firstword and concat the remaining string and finally i have to return a string
h1tag
@h1tag
Feb 19 2018 17:14
@tptynlr sorry, I though that substr is a variable name here
tptynlr
@tptynlr
Feb 19 2018 17:14
Return the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case.
Kaz Baig
@kbaig
Feb 19 2018 17:17
@yb1997 oh yeah that was just a joke post
kerafyrm02
@kerafyrm02
Feb 19 2018 17:18
Anyone stuck on a problem? i can help real fast
tptynlr
@tptynlr
Feb 19 2018 17:18
@kerafyrm02 see my code
kerafyrm02
@kerafyrm02
Feb 19 2018 17:19
Where i just entered the room
Kris Baillargeon
@krisb1220
Feb 19 2018 17:19
LOL sorry, I don't notice much memory eating up, my hard drive is unreasonably large LOL
image.png
It's totally worth it tho
Thats Adobe quality for free :laughing:
tptynlr
@tptynlr
Feb 19 2018 17:20

@kerafyrm02 function titleCase(str) {
var str1 =[];
str1 = str.split(" ");
for( var i = 0; i < str1.length; i++){
str1[i] = str1[i].slice(0,1).toUpperCase() + slice(1, str.length-1);
}
return str1.join();
}

titleCase("I'm a little tea pot"); //Return the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case.

h1tag
@h1tag
Feb 19 2018 17:20
@tptynlr I noticed one or 2 problems, are you sure that everything is alright with your code? check for the syntax?
kerafyrm02
@kerafyrm02
Feb 19 2018 17:20
avoid string mutation
make a new str
Kris Baillargeon
@krisb1220
Feb 19 2018 17:22
if(true) { return false } //javascript

--- how to do this ^^^^

```javascript
if(true) { return false } //javascript
```

```languagehere
code here
```

h1tag
@h1tag
Feb 19 2018 17:22
@tptynlr also you're splitting the string into an array and calling substr on the elements of that array
kerafyrm02
@kerafyrm02
Feb 19 2018 17:24
There's a few things wrong:
  1. Change str1[i] = to a new varaible.
  2. Change slice to substr
  3. change join() to join(' ')
The syntax for substr is String.substr(start,end);
if you're wanting to use slice-- then it's String.slice(start,finish);
tptynlr
@tptynlr
Feb 19 2018 17:26
since string is immutable how can we mutate a string in this case
kerafyrm02
@kerafyrm02
Feb 19 2018 17:26
make a new one
var new_str =
This message was deleted
krckyboy
@krckyboy
Feb 19 2018 17:27
Is Node a good choice for a freelancer, or is PHP far more superior?
tptynlr
@tptynlr
Feb 19 2018 17:27
do u mean should i make add that new str to new array?
kerafyrm02
@kerafyrm02
Feb 19 2018 17:27
I'm a php programmer.
yes tp
if you are given an array.
and you want to change it-- its almost always the best idea to make a new one
Tai Jones
@taiJones00
Feb 19 2018 17:27
Well I guess it would depend on which language has more jobs in your area @krckyboy
krckyboy
@krckyboy
Feb 19 2018 17:28
@taiJones00 Hm. But what if you want to work globally, not just in your state/country/locally?
kerafyrm02
@kerafyrm02
Feb 19 2018 17:29
Go with the one you like more.
PHP is solid. It has been around a long time.
tptynlr
@tptynlr
Feb 19 2018 17:29
i would say node
krckyboy
@krckyboy
Feb 19 2018 17:30
@tptynlr Why? I'm genuinely looking for an answer and opinion.
h1tag
@h1tag
Feb 19 2018 17:30
@krckyboy I've read this a while ago, I hope it helps
kerafyrm02
@kerafyrm02
Feb 19 2018 17:30
Are you looking for web development only or application programs too krc?
Tai Jones
@taiJones00
Feb 19 2018 17:31
Okay then pick the place you want to live in and see if that place has more PHP or JavaScript jobs (My guess would be JavaScript in most places) @krckyboy
krckyboy
@krckyboy
Feb 19 2018 17:31
@kerafyrm02 I have had almost no experience with back-end and I followed a Udemy course which used Node, and I managed to make all the RESTful routes working along with MongoDB, but I've never done that (on that level) with PHP and MySQL. So I am thinking what to choose to learn so I can start making money on the side.
kerafyrm02
@kerafyrm02
Feb 19 2018 17:31
Let me put it this way
krckyboy
@krckyboy
Feb 19 2018 17:31
@kerafyrm02 I'm currently interested only in Web Development.
kerafyrm02
@kerafyrm02
Feb 19 2018 17:32
If you want web development only go PHP
Tai Jones
@taiJones00
Feb 19 2018 17:32
Whaa why not JavaScript
kerafyrm02
@kerafyrm02
Feb 19 2018 17:32
He's talking backend. Not front Tai.
Tai Jones
@taiJones00
Feb 19 2018 17:32
Ohhhh. Gotcha
kerafyrm02
@kerafyrm02
Feb 19 2018 17:32
JS is front.
krckyboy
@krckyboy
Feb 19 2018 17:32
Yup. I'm talking about back-end.
h1tag
@h1tag
Feb 19 2018 17:33
From what I've seen, most projects on Freelancer.com asks for PHP
kerafyrm02
@kerafyrm02
Feb 19 2018 17:33
PHP has more documentation, and you can make any website in PHP.
Tai Jones
@taiJones00
Feb 19 2018 17:33
Well I have no idea. You can sell wordpress themes when you know PHP
kerafyrm02
@kerafyrm02
Feb 19 2018 17:33
Facebook is made in PHP
h1tag
@h1tag
Feb 19 2018 17:33
if you want to work there as a freelancer
Kaz Baig
@kbaig
Feb 19 2018 17:33
Facebook has a modified version of PHP, mixed in with a bunch of React @kerafyrm02
kerafyrm02
@kerafyrm02
Feb 19 2018 17:34
Still, it's primarily PHP
Yogender
@yb1997
Feb 19 2018 17:34
@krckyboy if you want more flexibility in future, go with javascript cuz u can choose designing, development, gaming, utility tools for ur own need using nodejs or u can be a hacker :smile:
krckyboy
@krckyboy
Feb 19 2018 17:34
Isn't React front-end framework?
kerafyrm02
@kerafyrm02
Feb 19 2018 17:34
Yes.
Tai Jones
@taiJones00
Feb 19 2018 17:34
Yep! That much I know
kerafyrm02
@kerafyrm02
Feb 19 2018 17:34
He's mixing apples and oranges.
Kaz Baig
@kbaig
Feb 19 2018 17:35
As opposed to fully rendering everything on the server via PHP I mean
krckyboy
@krckyboy
Feb 19 2018 17:35
@yb1997 Hacker with Node?
@kbaig Oh, I get it what you mean by that.
kerafyrm02
@kerafyrm02
Feb 19 2018 17:35
I've made web apps in php too
To work on mobile devices
and tablets
Yogender
@yb1997
Feb 19 2018 17:36
for hacker, u will also need to learn networking in bit more depth than usual
kerafyrm02
@kerafyrm02
Feb 19 2018 17:36
but as a php developer you'll have to become a full stack developer
Lamp stack is the bare mininuim
krckyboy
@krckyboy
Feb 19 2018 17:37
I thought Python is superior for hacking. But anyway, I really don't know what to do regarding back-end. I like the maturity of PHP (I don't know how it is compared to Node) simply because of documentation, but I also like how Node is "new" (not really new, but new compared to PHP) so most of the material is up-to-date.
kerafyrm02
@kerafyrm02
Feb 19 2018 17:37
Linux, Apache, MYSQL, PHP
Node can multi-thread
PHP cant really do it effectively.
But you dont need to multi-thread on a website
Yogender
@yb1997
Feb 19 2018 17:38
u can use xss or xxxss and stuff like that to do some shady things like getting user location without permission or just some bitcoin mining
kerafyrm02
@kerafyrm02
Feb 19 2018 17:38
Desktop applications yes- native apps yes- websites no-
Mel Macaluso
@MelMacaluso
Feb 19 2018 17:39
Hi there, does anyone know why my vuejs app returns undefined when I call $slots?
Slots are working in the frontend
kerafyrm02
@kerafyrm02
Feb 19 2018 17:39
Which undefined do you get ? Red or grey one?
Mel Macaluso
@MelMacaluso
Feb 19 2018 17:39
grey one mate
kerafyrm02
@kerafyrm02
Feb 19 2018 17:40
Means variable was set, but no value was givent to it
Mel Macaluso
@MelMacaluso
Feb 19 2018 17:40
a double one actually
kerafyrm02
@kerafyrm02
Feb 19 2018 17:40
can you post image of error?
or give me link to site
Mel Macaluso
@MelMacaluso
Feb 19 2018 17:40
sure bear with
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 19 2018 17:40
hi
kerafyrm02
@kerafyrm02
Feb 19 2018 17:40
hi
console.log('hi');
Yogender
@yb1997
Feb 19 2018 17:41
@krckyboy PHP is good, especially LAMP stack cuz most of the sites still run on php and there are lot of good frameworks like cakephp and if u learn php u will be able to sell templates on wordpress
krckyboy
@krckyboy
Feb 19 2018 17:41
@kerafyrm02 Sorry for being an annoyance, but which language has a cleaner code / syntax? Which one is better for a beginner? Thanks!
CamperBot
@camperbot
Feb 19 2018 17:41
krckyboy sends brownie points to @kerafyrm02 :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @kerafyrm02 |http://www.freecodecamp.org/kerafyrm02
kerafyrm02
@kerafyrm02
Feb 19 2018 17:41
PHP handsdown is easier.
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 19 2018 17:41
can I have question ؟
kerafyrm02
@kerafyrm02
Feb 19 2018 17:41
yes ahmed
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 19 2018 17:42
how slice border image works ?
kerafyrm02
@kerafyrm02
Feb 19 2018 17:42
slice border?
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 19 2018 17:42
image.png
kerafyrm02
@kerafyrm02
Feb 19 2018 17:43
your first problem is your image is not inside div
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 19 2018 17:43
how it slice the image ?
Tai Jones
@taiJones00
Feb 19 2018 17:43
chop chop!
kerafyrm02
@kerafyrm02
Feb 19 2018 17:44
<p></p><img> change to <p><img></p>
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 19 2018 17:44
it say that divide the image into nine section
and place corner at the corner
kerafyrm02
@kerafyrm02
Feb 19 2018 17:44
@ahmed-issa-mohd Read my advice
krckyboy
@krckyboy
Feb 19 2018 17:44
@taiJones00 @yb1997 @h1tag Thanks, guys.
CamperBot
@camperbot
Feb 19 2018 17:44
krckyboy sends brownie points to @taijones00 and @yb1997 and @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 917 | @h1tag |http://www.freecodecamp.org/h1tag
:cookie: 263 | @taijones00 |http://www.freecodecamp.org/taijones00
:cookie: 176 | @yb1997 |http://www.freecodecamp.org/yb1997
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 19 2018 17:45
then the middle section repeat
kerafyrm02
@kerafyrm02
Feb 19 2018 17:45
I guess some people don't want to listen.
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 19 2018 17:45
I do not understand how it work
h1tag
@h1tag
Feb 19 2018 17:45
@krckyboy you're welcome
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 19 2018 17:46
that's for me ?
Mel Macaluso
@MelMacaluso
Feb 19 2018 17:46
@kerafyrm02 just PM'ed
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 19 2018 17:48
?
Tai Jones
@taiJones00
Feb 19 2018 17:50
cookies!
krckyboy
@krckyboy
Feb 19 2018 17:54

I wonder if the answers would differ if I asked this instead...

What would be the best choice for back-end language for a full stack freelancer? Node or PHP? If one is really good with CSS3 and JavaScript, for example. It's just nice to discuss about this with people who are chatty.

Yogender
@yb1997
Feb 19 2018 18:00
@krckyboy JavaScript for sure
h1tag
@h1tag
Feb 19 2018 18:00

@krckyboy freelance projects with php are a lot more than node.js: https://www.freelancer.com/jobs/regions/?keyword=web%20development

There's a demand for Wordpress also

Yogender
@yb1997
Feb 19 2018 18:02
if u already know javascript, nodejs will be easy and that reduce the burden of learning more languages, this will also lead to less buggy code
frequent changes in web development is good as more innovation is going to happen but that also leads to keeping uptodate with latest trends
krckyboy
@krckyboy
Feb 19 2018 18:05
I see. Well, I am waiting for response of an employer (well, he said that he wants to hire me as a front end developer), so I primarily need to broaden my CSS3 skills and learn JavaScript. I'm then thinking of adding in back-end so I can freelance and become a full stack developer since back-end interests me very much.
Yogender
@yb1997
Feb 19 2018 18:05
I don't know much about php environment but in javascript world, changes are frequent
krckyboy
@krckyboy
Feb 19 2018 18:06
Also, if one is decent at front-end, then he can just look for front-end gigs, right? Or if the back-end technology is free of choice, I could use whatever I want - node, if I am good with JS, for example.
But with PHP it's more jobs in general (back-end). Meh, we'll see.
Roman Struna
@RomchyFCC
Feb 19 2018 18:08
@DarrenfJ thanks for the link :)
CamperBot
@camperbot
Feb 19 2018 18:08
romchyfcc sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2396 | @darrenfj |http://www.freecodecamp.org/darrenfj
Yogender
@yb1997
Feb 19 2018 18:08
I love javascript but at the end of the day its php that wins in case of vacancies available maybe cuz people here are reluctant to change
kerafyrm02
@kerafyrm02
Feb 19 2018 18:09
anyone else need help
krckyboy
@krckyboy
Feb 19 2018 18:10
@yb1997 One thing that a freelancer has to take into account is WordPress. You could make good passive income if you create a WP theme, I guess. Meh. I'm still undecided. I believe it will be easier to choose after I learn front-end JS.
kerafyrm02
@kerafyrm02
Feb 19 2018 18:10
JS is awesome
krckyboy
@krckyboy
Feb 19 2018 18:10
I got Edwin Diaz's course on PHP. Anyone experienced it?
kerafyrm02
@kerafyrm02
Feb 19 2018 18:10
no
krckyboy
@krckyboy
Feb 19 2018 18:10
That's on Udemy, that is.
kerafyrm02
@kerafyrm02
Feb 19 2018 18:10
best way to learn is build your own site from start to finish
h1tag
@h1tag
Feb 19 2018 18:10
but if you don't have the resources (time, ...) to learn PHP right now (you still need to be good at it also), then you can try projects tagged with node.js (since you already know js, but node.js still need a bit learning), and see how that goes
kerafyrm02
@kerafyrm02
Feb 19 2018 18:11
i made that site in php
from scratch
krckyboy
@krckyboy
Feb 19 2018 18:11
@kerafyrm02 Clean design. It looks professional.
kerafyrm02
@kerafyrm02
Feb 19 2018 18:11
mobile responsive
all scratch
Yogender
@yb1997
Feb 19 2018 18:12
nice and elegant UI
kerafyrm02
@kerafyrm02
Feb 19 2018 18:12
php
js
jquery
mysql
krckyboy
@krckyboy
Feb 19 2018 18:13
Very nice.
Yogender
@yb1997
Feb 19 2018 18:14
talking about php, i made a site too with it food-paradise.ultimatefreehost.in
it was my first ever site
kerafyrm02
@kerafyrm02
Feb 19 2018 18:14
doesnt work for me
Yogender
@yb1997
Feb 19 2018 18:15
what error is it giving ?
kerafyrm02
@kerafyrm02
Feb 19 2018 18:15
no site comes up
there it goes
Yogender
@yb1997
Feb 19 2018 18:16
that site have no optimizations at all :smile:
it was for my college project, took it in two weeks and still unfinished
kerafyrm02
@kerafyrm02
Feb 19 2018 18:17
Not bad.
I see your login page accepts anything :P
krckyboy
@krckyboy
Feb 19 2018 18:19

This is my first web app where I used Node and MongoDB (so basically using back-end for the first time). The visual side of the website is kinda non-existent, though. :D

https://github.com/krckyboy/web-app-eprofessor

Yogender
@yb1997
Feb 19 2018 18:19
hahahaaa just dont put anything malicious :smile:
@krckyboy do u have a link for your site or just source code ?
wanna see it in action
krckyboy
@krckyboy
Feb 19 2018 18:20
Just source code, unfortunately. I haven't bothered looking for free hosting.
kerafyrm02
@kerafyrm02
Feb 19 2018 18:21
i cant really comment on node. i know basically nothing about it.
krckyboy
@krckyboy
Feb 19 2018 18:21
So it uses NodeJS (express), MongoDB and that's about it. Obviously, some packages, as well.
Yogender
@yb1997
Feb 19 2018 18:21
@krckyboy use heroku for free web hosting
krckyboy
@krckyboy
Feb 19 2018 18:22
I'll look into that!
kerafyrm02
@kerafyrm02
Feb 19 2018 18:22
anyone stuck before i go?
h1tag
@h1tag
Feb 19 2018 18:22
i think that heroku requires a credit card for sign up right now, you can use glitch.com if you don't like that
Yogender
@yb1997
Feb 19 2018 18:23
really ? I didn't need a credit card but it was like 2-3 months ago
h1tag
@h1tag
Feb 19 2018 18:25
not sure
there's/was an open issue about that on the freecodecamp github
freeCodeCamp/freeCodeCamp#15044
Yogender
@yb1997
Feb 19 2018 18:33
@h1tag I just successfully created a new account on heroku without credit card
h1tag
@h1tag
Feb 19 2018 18:34
@yb1997 it seems that heroku changed that again
Yogender
@yb1997
Feb 19 2018 18:34
yup
I just need to see how to connect mongo
Also, it's in Serbian, so..
So basically without MongoDB, only login page will be shown
Yogender
@yb1997
Feb 19 2018 18:40
well then get a mondoDB server
I used mlab
Hammad
@newnewb
Feb 19 2018 19:33
Hey guys, I have a problem with one of my projects
Chrome did a recent update that ruined the audio event listeners that I'm using for the simon game, it's working on edge and firefox...
Should I continue or?
Brad
@bradtaniguchi
Feb 19 2018 19:38
@newnewb Do you know what you need to do to fix it on chrome?
Ryan Christopher
@ryan-christopher
Feb 19 2018 19:44
What animation did everyone (anyone?) use for the "progress bar" on the Pomodoro clock? I'm not even sure what to google. All of the progress bars I see don't hookup to timers.
Hammad
@newnewb
Feb 19 2018 19:53
@bradtaniguchi not really
Christopher McCormack
@cmccormack
Feb 19 2018 19:53
@ryan-christopher I just used a countdown, but you could just do something like a nested div with a width of a certain percentage based on total time and time left
Brad
@bradtaniguchi
Feb 19 2018 19:54
@newnewb Idk how you did it (or how audio event listeners work) but I would look into it, especially if it changed recently, then others would probably have the same issue and its solution/workaround would be outthere
Ryan Christopher
@ryan-christopher
Feb 19 2018 19:54
@cmccormack Thanks. Never tried anything like that before. The example had a pretty wild circular fill going on.
CamperBot
@camperbot
Feb 19 2018 19:54
ryan-christopher sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1326 | @cmccormack |http://www.freecodecamp.org/cmccormack
Hammad
@newnewb
Feb 19 2018 19:55
@bradtaniguchi I really don't know, I tried looking it up but still no results
here's my code if you wanted to look at the listener
works in edge & firefox
but not chrome
Brad
@bradtaniguchi
Feb 19 2018 19:59
@newnewb I'm getting an error saying audio[i] is undefined, and I'm using firefox
Gersho
@Gersho
Feb 19 2018 20:00

on vivaldi:

pen.js:40 Uncaught TypeError: Cannot read property 'play' of undefined
    at playSound (pen.js:40)
    at setTimeout (pen.js:7)
playSound @ pen.js:40
setTimeout @ pen.js:7
setTimeout (async)
playPattern @ pen.js:7
(anonymous) @ pen.js:70
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3

when pushing buttons

Hammad
@newnewb
Feb 19 2018 20:09
let me recheck the code
I was trying so much to get it working on chrome I changed somethings
Christopher McCormack
@cmccormack
Feb 19 2018 20:10
@ryan-christopher if you check out the elements in the developer console as the timer ticks, you can see that there is a span element within the timer that increases in size as the timer counts down, from bottom to top, with a background fill color based on the current type of timer, break or session.
The reason it's round is that the timer container has a border radius of 50%
Hammad
@newnewb
Feb 19 2018 20:14
@bradtaniguchi @Gersho weird, code is running fine on my machine... can you try running it on private mode to clear cache?
Brad
@bradtaniguchi
Feb 19 2018 20:17
@newnewb Yea private mode works, not sure how or why tho
@newnewb Nope I get it after a while, maybe one of your sounds isn't defined
Hammad
@newnewb
Feb 19 2018 20:21
anyways, i'll trouble shoot that later
the problem is the event isn't playing so I can light up the button when the auto-play sequence is going, plus I cannot replay the same sound again in chrome ( I have to create a new sound object to replay the same sound )
Ryan Christopher
@ryan-christopher
Feb 19 2018 20:29
@cmccormack I appreciate the tip. I'm going to close it out with just the timer. I compared my solution (which has way to many globals) to the answer. Turns out, theirs is written in angular, which appears to make things more concise and potentially easier.
Gersho
@Gersho
Feb 19 2018 20:35

weird, code is running fine on my machine... can you try running it on private mode to clear cache?

i don't see why i should switch to private mode (and i won't, because you shouldn't ask that from your users) but i cleared cache and it seems to work (vivaldi)

Hammad
@newnewb
Feb 19 2018 20:36
@Gersho you are right, the code became messy when I tried to fix it, normally you can clear cache if you have the source files on the server... but they're hosted on codepen so I'm limited
Gersho
@Gersho
Feb 19 2018 20:36
sound plays only the first time and then back to the error
i just Ctrl + F5 for the cache
Hammad
@newnewb
Feb 19 2018 20:37
I'll download vivaldi to check it out
Gersho
@Gersho
Feb 19 2018 20:40
... i went to check my Simon and apparently each sound also only plays the first time :( (i don't get errors, but the sound is audible only the firsty time :()
Hammad
@newnewb
Feb 19 2018 20:41
@Gersho it's working on my vivaldi fully at least the first couple of levels, additionally all I need a fix for is this
Mark Kubik
@KUBIX90
Feb 19 2018 20:41

Hi,

Can anyone help with my toggle temperature button, I can't get it to work at all. I 'm trying to make it work for each city as well as the local weather.

Hammad
@newnewb
Feb 19 2018 20:41
console.log('end'); should work
Mark Kubik
@KUBIX90
Feb 19 2018 20:42
I've tried storing the api data in the function call and using it but its not working, any ideas?
I've also tried declaring it as a variable globally, but that's also not working
Hammad
@newnewb
Feb 19 2018 20:47
@gersho I don't want to re-write the whole code using timers instead of event listeners
Gersho
@Gersho
Feb 19 2018 20:49
well i don't know i'll have to check my Simon too lol ^^ and i have to go afk sorry
Hammad
@newnewb
Feb 19 2018 20:50
@gersho Your fix is probably you need to re-initialize all the audios again... since thats how I fixed the chrome one to replay
Christopher McCormack
@cmccormack
Feb 19 2018 20:50
@KUBIX90 your click function should be on the input, not the p element
Mark Kubik
@KUBIX90
Feb 19 2018 20:52
@cmccormack I'm getting an error though before i even click
Uncaught TypeError: Cannot read property 'addEventListener' of null
Christopher McCormack
@cmccormack
Feb 19 2018 20:52
@KUBIX90 try adding an id to your slider input and target that id with your document.getElementById("slider").addEventListener("click", toggleTemp); listener. You also aren't calling that function with data, it will be called with the event object instead. Store your temps in a global variable and reference that instead
Gersho
@Gersho
Feb 19 2018 20:53

@gersho Your fix is probably you need to re-initialize all the audios again... since thats how I fixed the chrome one to replay

thanks @newnewb i'llm check that when i'm back

CamperBot
@camperbot
Feb 19 2018 20:53
gersho sends brownie points to @newnewb :sparkles: :thumbsup: :sparkles:
:cookie: 300 | @newnewb |http://www.freecodecamp.org/newnewb
Christopher McCormack
@cmccormack
Feb 19 2018 20:54
@KUBIX90 put the id on the input, not a class on a span
Mark Kubik
@KUBIX90
Feb 19 2018 20:55
let apiRequest = new XMLHttpRequest();
var toggleF = true;
var tempInfo;

console.log(tempInfo);

function getWeather(lon, lat){
    apiRequest.open("GET","https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon);
    apiRequest.onload = function(){
        let data = JSON.parse(apiRequest.responseText);
        tempInfo = data.main.temp;
            document.getElementById("weather-icon").setAttribute("src", data.weather[0].icon);
            document.getElementById("weather-degrees").innerHTML = Math.round(data.main.temp) + "&deg;c";
            document.getElementById("weather-description").innerHTML = data.weather[0].description;
            document.getElementById("weather-humidity").innerHTML = Math.round(data.main.humidity) + "%";
            document.getElementById("weather-wind").innerHTML = Math.round(data.wind.speed) + "mph";
            document.getElementById("weather-location").innerHTML = data.name;
    }
    apiRequest.send();
}
the log returns undefined, I always seem to get this problem, I can never take the data out of its success block and use it elsewhere in the code
Christopher McCormack
@cmccormack
Feb 19 2018 20:59
Sure you can
how are you using the code later?
Marcus Parsons
@marcusparsons
Feb 19 2018 20:59
@KUBIX90, this is random but something that will save you tons of time is to set an alias for document.getElementById and other plain JS selectors like this:
let apiRequest = new XMLHttpRequest();
var toggleF = true;
var tempInfo;
var getbyid = document.getElementById.bind(document);

console.log(tempInfo);

function getWeather(lon, lat){
    apiRequest.open("GET","https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon);
    apiRequest.onload = function(){
        let data = JSON.parse(apiRequest.responseText);
        tempInfo = data.main.temp;
            getbyid("weather-icon").setAttribute("src", data.weather[0].icon);
            getbyid("weather-degrees").innerHTML = Math.round(data.main.temp) + "&deg;c";
            getbyid("weather-description").innerHTML = data.weather[0].description;
            getbyid("weather-humidity").innerHTML = Math.round(data.main.humidity) + "%";
            getbyid("weather-wind").innerHTML = Math.round(data.wind.speed) + "mph";
            getbyid("weather-location").innerHTML = data.name;
    }
    apiRequest.send();
}
Christopher McCormack
@cmccormack
Feb 19 2018 21:00
Really for that much change to the DOM you should be creating virtual elements as children of a single element and only mounting that parent element back to the DOM
asdf999991
@asdf999991
Feb 19 2018 21:00
Just made a nav bar to different parts of the site but for some reason it's making the text in the following p element a clickable link, any ideas?

<div>
<nav>
<ul class="main_menu">
<li><a href="#about">about</li>
<li><a href="#portfolio">portfolio</li>
<li><a href="#contact">contact</li>
</ul>
</nav>
</div>

<p id="about"> Test</p>

Marcus Parsons
@marcusparsons
Feb 19 2018 21:01
@asdf999991 you did not close the anchor element with </a>
Christopher McCormack
@cmccormack
Feb 19 2018 21:01
good catch @marcusparsons
Marcus Parsons
@marcusparsons
Feb 19 2018 21:01
Close the anchor elements after the text like this:
<div>
<nav>
<ul class="main_menu">
<li><a href="#about">about</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>
</div>

<p id="about"> Test</p>
asdf999991
@asdf999991
Feb 19 2018 21:02
@marcusparsons omg how did I not see that! thanks!
CamperBot
@camperbot
Feb 19 2018 21:02
asdf999991 sends brownie points to @marcusparsons :sparkles: :thumbsup: :sparkles:
:cookie: 445 | @marcusparsons |http://www.freecodecamp.org/marcusparsons
Marcus Parsons
@marcusparsons
Feb 19 2018 21:02
No worries, @asdf999991! And thanks @cmccormack, you'll have that! haha
CamperBot
@camperbot
Feb 19 2018 21:02
marcusparsons sends brownie points to @asdf999991 and @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1327 | @cmccormack |http://www.freecodecamp.org/cmccormack
api offline
Christopher McCormack
@cmccormack
Feb 19 2018 21:03
haha thanks @marcusparsons
CamperBot
@camperbot
Feb 19 2018 21:03
cmccormack sends brownie points to @marcusparsons :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @marcusparsons |http://www.freecodecamp.org/marcusparsons
Mark Kubik
@KUBIX90
Feb 19 2018 21:03
@marcusparsons Thanks!, any idea why im getting undefined on the tempInfo
CamperBot
@camperbot
Feb 19 2018 21:03
kubix90 sends brownie points to @marcusparsons :sparkles: :thumbsup: :sparkles:
:cookie: 447 | @marcusparsons |http://www.freecodecamp.org/marcusparsons
Christopher McCormack
@cmccormack
Feb 19 2018 21:05
@KUBIX90 to your point about the log, it will of course be undefined where you are calling it, because ajax calls are asynchronous, meaning when you call the api, that call runs on its own in the background, but everything after that code that isn't part of your ajax code will run while your ajax call is running in the background. Attempting to log your variable at the point you are is meaningless, instead log it after you assign your api call response to the variable within your success function
Marcus Parsons
@marcusparsons
Feb 19 2018 21:05
@KUBIX90, since you're calling an asynchronous request, you'll need to wait until the request is done to use console.log on tempInfo.
Whoops @cmccormack beat me to it :P
Mark Kubik
@KUBIX90
Feb 19 2018 21:14
@marcusparsons @cmccormack You mean like this?
let apiRequest = new XMLHttpRequest();
var toggleF = true;

function getWeather(lon, lat){
    apiRequest.open("GET","https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon);
    apiRequest.onload = function(){
        let data = JSON.parse(apiRequest.responseText);
        tempInfo = data.main.temp;
        console.log(tempInfo);
            document.getElementById("weather-icon").setAttribute("src", data.weather[0].icon);
            document.getElementById("weather-degrees").innerHTML = Math.round(data.main.temp) + "&deg;c";
            document.getElementById("weather-description").innerHTML = data.weather[0].description;
            document.getElementById("weather-humidity").innerHTML = Math.round(data.main.humidity) + "%";
            document.getElementById("weather-wind").innerHTML = Math.round(data.wind.speed) + "mph";
            document.getElementById("weather-location").innerHTML = data.name;
    }
    apiRequest.send();
}

function toggleTemp(){
    var tempC = data.main.temp;
    var tempF = tempC * 9 / 5 + 32;

        if (toggleF) {
          $("#weather-degrees").innerHTML = Math.round(tempF) + "&deg;F";
          $("#temp-slider-text").innerHTML = "Fahrenheit";
          toggleF = false;
        } else if (toggleF == false) {
          $("#weather-degrees").innerHTML = Math.round(tempC) + "&deg;C";
          $("#temp-slider-text").innerHTML = "Celsius";
          toggleF = true;
        }
}
Marcus Parsons
@marcusparsons
Feb 19 2018 21:16
Yes but I just noticed that you're attempting to use data in the toggleTemp function, but it is already undefined at that point. Since you're storing the temp in tempInfo do this for your toggleTemp:
function toggleTemp(){
    //changed tempC to use tempInfo instead of an undefined object: data.main.temp
    var tempC = tempInfo;
    var tempF = tempC * 9 / 5 + 32;

        if (toggleF) {
          $("#weather-degrees").innerHTML = Math.round(tempF) + "&deg;F";
          $("#temp-slider-text").innerHTML = "Fahrenheit";
          toggleF = false;
        } else if (toggleF == false) {
          $("#weather-degrees").innerHTML = Math.round(tempC) + "&deg;C";
          $("#temp-slider-text").innerHTML = "Celsius";
          toggleF = true;
        }
}
@KUBIX90, keep in mind that let and var that are declared in functions are only "alive" during that function. And that let variables are only alive for the block of code they are executed in.
@KUBIX90, in fact, I would remove the reference to tempC as it is not needed. tempInfo is already stored.
function toggleTemp(){
    //changed tempC to use tempInfo instead of an undefined object: data.main.temp
    //removed tempC references
    var tempF = tempInfo * 9 / 5 + 32;

        if (toggleF) {
          $("#weather-degrees").innerHTML = Math.round(tempF) + "&deg;F";
          $("#temp-slider-text").innerHTML = "Fahrenheit";
          toggleF = false;
        } else if (toggleF == false) {
          $("#weather-degrees").innerHTML = Math.round(tempInfo) + "&deg;C";
          $("#temp-slider-text").innerHTML = "Celsius";
          toggleF = true;
        }
}
Mark Kubik
@KUBIX90
Feb 19 2018 21:21
@marcusparsons That's not working though it just comes back with the error
Uncaught TypeError: Cannot read property 'addEventListener' of null
I don't understand how the toggleTemp function can access the API data
I think thats why its returning an error
Marcus Parsons
@marcusparsons
Feb 19 2018 21:22
Don't you have a Codepen set up for this?
Mark Kubik
@KUBIX90
Feb 19 2018 21:22
Yeah it was above but seems to have got losst one sec
Marcus Parsons
@marcusparsons
Feb 19 2018 21:24
You are calling toggleTemp when the api request is done and that's how it gathers the data.
I see that now that you posted the Codepen again
The code you posted on here is different from that of your Codepen, though.
Mark Kubik
@KUBIX90
Feb 19 2018 21:26
Yeah those attempts were just me trying to make sense of what you were saying, this is my original attempt at it, apologies for the confusion
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 19 2018 21:26
Hi all, is it worth learning Visual Basics? I learnt the basics of it a few years ago and was wondering if it's worth learning now?
Mark Kubik
@KUBIX90
Feb 19 2018 21:27
@marcusparsons I'm still getting that error though with the codepen, where the eventlistener is null
Christopher McCormack
@cmccormack
Feb 19 2018 21:28
@MuhammedKarim probably only if you are writing macros for Office products. It's not a difficult language though - if you learn another more robust language, learning VB should be pretty easy
Marcus Parsons
@marcusparsons
Feb 19 2018 21:28
Also, the error of Cannot read property 'addEventListener' of null is because you're calling: document.getElementById("temp-slider").addEventListener("click", toggleTemp); but there is not an id of "temp-slider" on the slider. Add that id to the temp slider.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 19 2018 21:30
@cmccormack I've just started learning coding a few weeks ago. So, i haven't really learnt much so far
Mark Kubik
@KUBIX90
Feb 19 2018 21:31
@marcusparsons Ahh i see that was dumb of me
Now getting a new error where it can't read property temp of undefined?
Christopher McCormack
@cmccormack
Feb 19 2018 21:32
@MuhammedKarim if you have a good use case to learn VB, then learn it! If you're using it as your first step into any language just to learn a language though, I would probably recommend learning something with more broad appeal like Python/Java/C++
Mark Kubik
@KUBIX90
Feb 19 2018 21:33
euurgh this is so irritating
Marcus Parsons
@marcusparsons
Feb 19 2018 21:33

Here @KUBIX90, check out this forked Codepen I made of yours. https://codepen.io/marcusparsons/pen/paaMPN

Another huge thing is that when you have the jQuery library imported into your project, don't mix up plain JS commands with jQuery commands. i.e. you had:

 $("#temp-slider-text").innerHTML = "Fahrenheit";

when it should be:

 $("#temp-slider-text").html("Fahrenheit");

Using the $ indicates you are selecting element(s) with jQuery and will issue jQuery commands to them.

I think what may have confused you is using plain JS commands with jQuery commands.
Mark Kubik
@KUBIX90
Feb 19 2018 21:37
@marcusparsons Thanks for your help, yeah I'm not sure why I didn't change the jQuery, the whole point of redoing this project was to do it all in vanilla JS!
CamperBot
@camperbot
Feb 19 2018 21:37
kubix90 sends brownie points to @marcusparsons :sparkles: :thumbsup: :sparkles:
api offline
Marcus Parsons
@marcusparsons
Feb 19 2018 21:38
Ah, well one cool thing you can do then, is to make an alias just like jQuery does! Instead of typing document.querySelector try this:
var select = document.querySelector.bind(document);
//and then in your code:
select('#temp-slider-text').innerHTML = "Fahrenheit";
You can change select there to be whatever you wish, within reason. I often use a single _ so it's really easy to use.
Btw, I would get used to using document.querySelector and document.querySelectorAll. These are powerful tools.
Mark Kubik
@KUBIX90
Feb 19 2018 21:51
@marcusparsons Thanks alot, thats very handy
CamperBot
@camperbot
Feb 19 2018 21:51
kubix90 sends brownie points to @marcusparsons :sparkles: :thumbsup: :sparkles:
api offline
Mark Kubik
@KUBIX90
Feb 19 2018 21:51
what does bind do out of interest?
Kaz Baig
@kbaig
Feb 19 2018 22:00
@KUBIX90 It assigns a scope's this one that it wouldn't normally have
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 19 2018 22:07
@cmccormack thanks very much for the advice :)
CamperBot
@camperbot
Feb 19 2018 22:07
muhammedkarim sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1328 | @cmccormack |http://www.freecodecamp.org/cmccormack
Mark Kubik
@KUBIX90
Feb 19 2018 22:13
@kbaig Thanks
CamperBot
@camperbot
Feb 19 2018 22:13
kubix90 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 574 | @kbaig |http://www.freecodecamp.org/kbaig
asdf999991
@asdf999991
Feb 19 2018 22:21
trying to add a "contact me" area on my page and I want to make the text box where you put your message bigger than the other text boxes, any ideas?
<p id="contact"> You can contact me here...</p>
<form action="/Submit_email">
<ul>
<li><input type="text" required placeholder="First Name"></li>
<li><input type="text" required placeholder="Last Name"></li>
<li><input type="email" required placeholder="E-mail"></li>
<li><input type="text" required placeholder="Messege"></li>
<button type="submit">Submit</button>
</form>
<p>and I'll get back to you ASAP!</p>
Christopher McCormack
@cmccormack
Feb 19 2018 23:06
@asdf999991 something like this? https://codepen.io/anon/pen/qxoBEN
@asdf999991 or if you want more rows, use a textarea instead
asdf999991
@asdf999991
Feb 19 2018 23:15
perfect, thanks, sorry if it seems like a stupid question, i've only been doing this for a little while
Christopher McCormack
@cmccormack
Feb 19 2018 23:18
@asdf999991 np - there is a fantastic amount of information for every element on MDN - https://mdn.io/input . I highly recommend reading the docs there for each element you're messing with so you can have some background on the different attributes and features
nsonhouse
@nsonhouse
Feb 19 2018 23:51
Hello all. Any MongoDB help in here?
asdf999991
@asdf999991
Feb 19 2018 23:58
@cmccormack thanks buds, I'll take a look at it
CamperBot
@camperbot
Feb 19 2018 23:58
asdf999991 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1329 | @cmccormack |http://www.freecodecamp.org/cmccormack