These are chat archives for FreeCodeCamp/HelpFrontEnd

2nd
Feb 2018
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 00:50
how many brownie points do ya'll have on FCC?
tpk
@cstpk
Feb 02 2018 01:25
@MuhammedKarim thank me and you will know
CamperBot
@camperbot
Feb 02 2018 01:25
csnat sends brownie points to @muhammedkarim :sparkles: :thumbsup: :sparkles:
api offline
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 01:31
@csnat thanks lmaaoo
CamperBot
@camperbot
Feb 02 2018 01:31
muhammedkarim sends brownie points to @csnat :sparkles: :thumbsup: :sparkles:
api offline
DMsalati
@DMsalati
Feb 02 2018 01:31
can someone tell me why this isnt working?
"var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
ourRequest.onload = function(){
console.log(ourRequest.responseText)
};
ourRequest.send();"
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 01:31
but no it didnt work :P
maybe we have too less...
Nate Mallison
@NJM8
Feb 02 2018 01:44
@DMsalati Have you seen .onLoad used somewhere? I don't think that is a function
usually this is done like so:
var XHR = new XMLHttpRequest();
XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
      console.log(JSON.parse(XHR.responseText))
    }
};
XHR.open("GET", "https://omdbapi.com?t=titanic");
XHR.send();
Stephen James
@sjames1958gm
Feb 02 2018 01:45
@DMsalati I ran the code in the console and it worked
Alexander Jarman
@HeinousTugboat
Feb 02 2018 01:46
Should work... Looks like they added XHR.onload later on.
Stephen James
@sjames1958gm
Feb 02 2018 01:46
@DMsalati Are you seeing any errors in your console?
Nate Mallison
@NJM8
Feb 02 2018 01:47
thanks @HeinousTugboat, I was trying to find .onload and didn't see it down there
CamperBot
@camperbot
Feb 02 2018 01:47
njm8 sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
Alexander Jarman
@HeinousTugboat
Feb 02 2018 01:48
Yeah, it doesn't have its own entry for some reason, but they mention it in the onreadystatechange entry.
I'm super unfamiliar with XHR in general, though.
Stephen James
@sjames1958gm
Feb 02 2018 01:48
@DMsalati Which browser?
Nate Mallison
@NJM8
Feb 02 2018 01:49
Can either of you answer a back end question?
For some reason flash isn't working https://github.com/NJM8/users-shoppinglist-app
Alexander Jarman
@HeinousTugboat
Feb 02 2018 01:49
flash <-- That's why.
What do you mean, though?
Like, legit Adobe Flash?
Stephen James
@sjames1958gm
Feb 02 2018 01:50
@NJM8 Are you talking about flash messages?
Nate Mallison
@NJM8
Feb 02 2018 01:51
No, connect-flash, it's an NPM package that gives you access to a function to send messages to your html templates
Alexander Jarman
@HeinousTugboat
Feb 02 2018 01:51
Ahh.
Sorry, haven't ever heard of that guy.
DMsalati
@DMsalati
Feb 02 2018 01:54
@sjames1958gm I am using chrome and its saying "Uncaught SyntaxError: Unexpected token <"
Alexander Jarman
@HeinousTugboat
Feb 02 2018 01:55
So somewhere there's a < that shouldn't be there.
Stephen James
@sjames1958gm
Feb 02 2018 01:56
@DMsalati Does it give a line number? Possibly you are getting HTML back rather than json.
German Gamboa Gonzalez
@germangamboa95
Feb 02 2018 01:57
Sup guys, would anyone be interested in starting a project together? I would love to get some practice creating something as a team.
Stephen James
@sjames1958gm
Feb 02 2018 01:57
@NJM8 req.flash('info', 'Flash is back!') this is the example of setting a message in the flash object.
DMsalati
@DMsalati
Feb 02 2018 01:58
@sjames1958gm not sure what a line number is
Stephen James
@sjames1958gm
Feb 02 2018 01:59
@DMsalati Off to the right something.js:10
DMsalati
@DMsalati
Feb 02 2018 02:02
yes 1
yihu
@freecodemans
Feb 02 2018 02:02
00
DMsalati
@DMsalati
Feb 02 2018 02:03
i had jquery linked on there i deleted it
Stephen James
@sjames1958gm
Feb 02 2018 02:03
@DMsalati Hmm. Can you look in the network tab of the devtools and see if your request is sent and then look at the response?
@DMsalati If you go to the network tab, and rerun the code you should see a request to animals-1.json
If you click on that details of the message/response should show to the right click on response to see what the response is.
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:05
@NJM8 So, I guess I'm not understanding what flash is actually supposed to be doing here.
I cloned your repo, ripped out the DB stuff, and I'm throwing requests at it with Postman..
And I stuffed in a bunch of console dumps of req.flash('message') and req.flash('error') and can't get it to give me anything but an empty array.
Ooh, just got a bit.
Logged out worked.
Nate Mallison
@NJM8
Feb 02 2018 02:07
flash is supposed to set a piece of text on the variable message and pass it to the view. in the view there is an if statement to display the message if it exists
Stephen James
@sjames1958gm
Feb 02 2018 02:07
@HeinousTugboat I think he is using flash incorrectly. To add flash messages you pass two strings, a type and a message
Then you pass only the type to get all the messages of that type in an array
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:07
So the /users/logout endpoint flash correctly adds to 'message'.
Er.
Stephen James
@sjames1958gm
Feb 02 2018 02:08
@NJM8 I think that this is how you add to the flash:
req.flash('info', 'Flash is back!')
and this is how you retrieve:
res.render('index', { messages: req.flash('info') });
Nate Mallison
@NJM8
Feb 02 2018 02:08
I added the message: req.flash.... here
router
  .route('/login')
  .get((req, res, next) => {
    return res.render('login', { message: req.flash('message') });
  })
DMsalati
@DMsalati
Feb 02 2018 02:08
@sjames1958gm ok its working now, apparently i just had to delete the jquery src
Nate Mallison
@NJM8
Feb 02 2018 02:09
and now it works on the login page
Stephen James
@sjames1958gm
Feb 02 2018 02:09
@DMsalati Hmm, odd - glad it is working.
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:09
That makes sense, since that's how you pass data into pug templates.
Stephen James
@sjames1958gm
Feb 02 2018 02:09
@NJM8 I think you push the values into flash with two parameters
Nate Mallison
@NJM8
Feb 02 2018 02:10
@sjames1958gm Do you have to pass { message: req.flash('myText'} } into every view render?
seems tedious. I thought the point was the function req.flash('myText') would set it and pass it through
Stephen James
@sjames1958gm
Feb 02 2018 02:11
@NJM8 Well into every view that you want to show the flash message.
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:11
Not to be a total downer, but.. you're using a library meant for Express 3, extracted from Express 2, on Express 4..
Stephen James
@sjames1958gm
Feb 02 2018 02:11
@NJM8 The idea is that in other places you would do
req.flash("info", "this is a message");
And when you render you pull these messages out.
DMsalati
@DMsalati
Feb 02 2018 02:13
@sjames1958gm thank you for your help
CamperBot
@camperbot
Feb 02 2018 02:13
dmsalati sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8927 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Nate Mallison
@NJM8
Feb 02 2018 02:13
't know about anything else, just doing what the tutorials tell me at the moment
@HeinousTugboat Yeah I don
How do you do the grey box for a single line of code?
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:14
`line o' code`
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:15
I just feel like there's probably a better way to do that. Is that indirection really necessary?
Nate Mallison
@NJM8
Feb 02 2018 02:17
There is, I think its called Vue.js, Angular.js, React.js, etc etc etc, lol
not there yet
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:17
...I don't see how that would help with the backend. :-P
Stephen James
@sjames1958gm
Feb 02 2018 02:18
@NJM8 req.flash('message', 'logged in!') this line is adding a string to the flash messages of type 'messages'
Then for your render you pull out the message and you can use it in your template
Nate Mallison
@NJM8
Feb 02 2018 02:19
Well I'm not really sure how they all tie in yet, I haven't seen that. But I assume (hope) there is a better way once you are using a full framework
Stephen James
@sjames1958gm
Feb 02 2018 02:19
@NJM8 This file doesn't have it but I am betting that users/login route passes {message: req.flash("messages")} to the template
Nate Mallison
@NJM8
Feb 02 2018 02:19
@sjames1958gm I got some of them to work but not all of them
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:21
I don't see where it does, unless render somehow makes res.locals available to the pug renderer.
In fact, res.locals isn't actually referenced anywhere but where they attach the flash to it.
I guess that's gotta be it, right?
Stephen James
@sjames1958gm
Feb 02 2018 02:23
@NJM8 I would have expected this code to reference {message: req.flash("messages")}
router.get('/login', function(req,res){
    res.render('login')
});
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 02:23
which coding languages are used for FrontEnd and which for BackEnd?
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:24
JavaScript, C, C++, Java, Elixir..
Rust.
Nate Mallison
@NJM8
Feb 02 2018 02:24
It works when you sign in, shows the "signed in now log in" message, but nothing when you log in. so I added res.render('showUser', { user, message: req.flash('message') }); and now I get Logged in! Logged in! So the message came through twice
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:24
Assembly.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 02:25
@HeinousTugboat Those Front or Back? Sorry i just don't know what they even mean :( what does FrontEnd do and what does BackEnd do?
Nate Mallison
@NJM8
Feb 02 2018 02:25
@sjames1958gm that's what I added and it worked, but I'm still confused because the handler in app.js should add it to each function call
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:25
@NJM8 What if you move the /users route after the res.locals = flash()?
I think that might be what's causing the issue.
Nate Mallison
@NJM8
Feb 02 2018 02:25
@MuhammedKarim front end is what you see, back end in the logic that makes it do stuff
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:26
..mostly. @MuhammedKarim Yes, all of those languages can be used in some capacity for both. What @NJM8 is right. Front End is the actual web pages you see. Back End is how the web pages get stuff into them.
Stephen James
@sjames1958gm
Feb 02 2018 02:26
@NJM8 I see what you mean you are setting res.locals.message directly which shouild be picked up by the templates.
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:26
Except he's rendering before it gets set.
Isn't it hitting the routes in /users before it even hits that route? And isn't res.render the end of the line for a request?
Nate Mallison
@NJM8
Feb 02 2018 02:27
@HeinousTugboat I see it is the way you describe in the example code. let me try it
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 02:27
@NJM8 @HeinousTugboat Oh ok that makes so much sense now, thanks a lot!
CamperBot
@camperbot
Feb 02 2018 02:27
muhammedkarim sends brownie points to @njm8 and @heinoustugboat :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
:cookie: 292 | @njm8 |http://www.freecodecamp.org/njm8
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:27
@MuhammedKarim You're welcome! I'd suggest start with JavaScript's basics. You can use it on both, and you can go any direction from there.
And it's super forgiving.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 02:30
Im going through FCCs course atm :) @HeinousTugboat
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:30
@MuhammedKarim That's a real solid start.
Stephen James
@sjames1958gm
Feb 02 2018 02:32
@MuhammedKarim These gitter chats usually have a lot of helpful people online.
Just post your questions. If you are posting code follow this link for formatting:
https://forum.freecodecamp.com/t/markdown-code-formatting/18391
Nate Mallison
@NJM8
Feb 02 2018 02:32
Well, now I am sometimes getting the messages. But it the message hasn't come through it will on the next call so I get the last 5 messages at once.
let me restart everything
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 02:33
@sjames1958gm Gotcha bro :) thank you!
CamperBot
@camperbot
Feb 02 2018 02:33
muhammedkarim sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8928 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 02 2018 02:33
@MuhammedKarim :+1:
Nate Mallison
@NJM8
Feb 02 2018 02:34
Logged in!,Passwords do not match,Signed up, now log in please
That's going to be a very confused user. :smile:
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 02:34
@NJM8 What project are you making bro?
Nate Mallison
@NJM8
Feb 02 2018 02:36
I'm on something from a different curriculum, the free courses over at Rithm School. it's a shopping list app with full users CRUD and a backend for data storage.
But the FCC people here are awesome. I'm hoping the beta is out soon so i can get back to doing FCC, if not I'll do the projects for some certificates
Yogender
@yb1997
Feb 02 2018 02:37
@NJM8 try passportjs for user log in authorization
Alexander Jarman
@HeinousTugboat
Feb 02 2018 02:37
@NJM8 Yeah, can't help you there. :-D Glad that got you a good portion of the way forward though! I might have to look into that more, I've never heard of it before.
Yogender
@yb1997
Feb 02 2018 02:37
They have covered up all kind of authorisations
Nate Mallison
@NJM8
Feb 02 2018 02:38
@yb1997 I'm using bcrypt and cookie-session for now, passport.js is next in my tutorial. I think they are making me struggle now before the easy stuff
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 02:39
@NJM8 oh nice, thats cool
Nate Mallison
@NJM8
Feb 02 2018 02:39
Thanks @HeinousTugboat @sjames1958gm for the help. I need to get some sleep now and pray that the bits in my computer align and my code magically works in the am. :smile:
CamperBot
@camperbot
Feb 02 2018 02:39
njm8 sends brownie points to @heinoustugboat and @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
:star2: 8929 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 02 2018 02:39
@NJM8 :+1: seems that it isn't clearing the flash after using it.
@NJM8 You'll probably dream of flash messages now :)
mbpiner
@mbpiner
Feb 02 2018 02:48
Hey can anyone help me with a bootstrap 3.3.7 question?
How do I work with a grid that is asymmetric, this one being 2-7-3 as far as column widths? I have to combine the 7 and 3 I think into a parent row/column 10 columns wide because I need a nav going across the top of both of them. Are there any particular resources dealing with using the bootstrap grid with uneven numbers?
Claudio Restifo
@Marmiz
Feb 02 2018 02:59

@anish000kumar That's not what I was referring to. I meant, what I should expect in terms of chunks when implementing it?

For instance in virtually all my app I had to do some async importing of sagas and reducer in order to split them, and load them only when needed.

I was just curious how your project interact (if it does) with this in mind.

TonyRednil
@TonyRednil
Feb 02 2018 03:01
Can someone please help me figure out why I can't get jQuery to work in my code pen?
Aditya
@ezioda004
Feb 02 2018 03:05
@TonyRednil You need to add jQuery in your pen by clicking the circle
Screenshot (9).png
TonyRednil
@TonyRednil
Feb 02 2018 03:07
@ezioda004 yeah, I already did that and it's still not working. :(
Aditya
@ezioda004
Feb 02 2018 03:07
@TonyRednil pen link?
Claudio Restifo
@Marmiz
Feb 02 2018 03:10

@TonyRednil what exactly is

$("background1")

mind the selector :)

TonyRednil
@TonyRednil
Feb 02 2018 03:11
That's supposed to be targeting my class. Whoops.
Fixed it.
Still not working. :(
Aditya
@ezioda004
Feb 02 2018 03:12
@TonyRednil in addClass("class-name") you dont need to add the dot
TonyRednil
@TonyRednil
Feb 02 2018 03:13
@ezioda004 really? I thought I the lectures it said you did.
Aditya
@ezioda004
Feb 02 2018 03:14
Nope, same with other class methods.
Same as vanilla js classList.add("class-name") since you're explicitly saying to add a class.
TonyRednil
@TonyRednil
Feb 02 2018 03:17
@ezioda004 what about for the class that I'm targeting with the js?
Aditya
@ezioda004
Feb 02 2018 03:17
in jQuery selector? Yes, you need to specify that.
But if you do document.getElementsByClassName() then no cause again you're explicitly selecting classes
TonyRednil
@TonyRednil
Feb 02 2018 03:19
@ezioda004 so just to clarify the code would be $(".background1").children().addClass("whiteText");
Aditya
@ezioda004
Feb 02 2018 03:19
Yes
TonyRednil
@TonyRednil
Feb 02 2018 03:21
@ezioda004 omg thank you! It would have taken forever for me to notice that!
CamperBot
@camperbot
Feb 02 2018 03:21
tonyrednil sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 425 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Aditya
@ezioda004
Feb 02 2018 03:22
:thumbsup:
Ken Haduch
@khaduch
Feb 02 2018 03:30
@SweetCodingInc - I just came back to check for your comments on using ID values. :point_up: February 1, 2018 12:29 AM I cannot see a compelling argument in your comment against using ID values. I think that you can use them just the same as you would any other piece of data. If you delete an element, you would probably have some table correlating that element (in this case, a user record) with the DOM information and I think that you would be saving the corresponding ID value? So you would just remove all traces of that record after removing the user data. And as far as not repeating any ID, it seems that it would just require saving a count or whatever you're using to track your data. I think for the purposes of this project, the Twitch users, it would be a suitable solution. I'm sure that other ideas could be used, as well, but you didn't offer an alternative solution, at least not that I could see in this chat room? I think that you have to be careful about how you do anything in the solution, ID value could be used - I don't really see a problem with it? IF you know of any further cautions against using them, I would be interested to learn about it.
Yogender
@yb1997
Feb 02 2018 03:39
@NJM8 what tutorial are you following ?
S7eve
@S7eve
Feb 02 2018 03:51
does any one know about a good ngram analyzer available online? need advice
Am i the only person who thinks that's super easy lol
Ken Haduch
@khaduch
Feb 02 2018 04:47
@MuhammedKarim - yeah, that was rather simple. I guess that as a project it would probably be an interesting one to code, at least something that would have some interesting stuff to do?
TonyRednil
@TonyRednil
Feb 02 2018 04:48
Okay, I have another issue. All of my jQuery elements were working just fine until I put a iframe element into my HTML. I don't understand why it did that.
Ken Haduch
@khaduch
Feb 02 2018 05:13
@TonyRednil - I'm not sure what is going on, but I"m seeing some things that don't make sense - for example, in your HTML you have some class attribute with a value <h1 class="font-align: center">Kyle Linder</h1> that is not a class. I don't even know if there is a CSS property named font-align? But what you have there is definitely not a class. While I'm commenting, that opening "Beginning My Career" section is rather difficult to read on a wide screen - and sometimes collides with the background with white color font on a light background...
But what isn't working now with your jquery selectors / settings?
Ken Haduch
@khaduch
Feb 02 2018 05:18
@TonyRednil - it doesn't looks like you are closing your </iframe> with that tag? Maybe that's causing a problem? Yeah, I think that's it - I added a </iframe> closing tag just after your <iframe src=....> and it looks like it's working better?
TonyRednil
@TonyRednil
Feb 02 2018 05:26
@khaduch the problem is none of my elements are being centered by the jquery like they are supposed to. I'll definitely change the font color of that text to Mahe it easier to read. Before using jquery I couldn't figure out how to center the text in line and that's what I found on Google. I thought iframe elements were self closing line images. Work in progress!
Ken Haduch
@khaduch
Feb 02 2018 05:30
@TonyRednil - when I added the </iframe> just after the closing > of the <iframe ... > element, it worked for me? <iframe src="https://s.codepen.io/TonyRednil/debug/WdjBbg/bZrQWyJnDvQk" width="100%" height="500"></iframe> and the re-run the page.
TonyRednil
@TonyRednil
Feb 02 2018 05:31
@khaduch it didn't work for me. Then I am stuck using my phone for the time being. Maybe it will work on my laptop when I get home.
Ken Haduch
@khaduch
Feb 02 2018 05:32
I am using a desktop and laptop - works on both of them... I haven't tried the phone.
dheerajahuja000
@dheerajahuja000
Feb 02 2018 05:33
i'm new to JS. Can anybody suggest a beginner project that would clear all topics like objects and DOM manipulation?
Roman Struna
@RomchyFCC
Feb 02 2018 05:33
are you also interested in node js and react?
TonyRednil
@TonyRednil
Feb 02 2018 05:33
@khaduch Hmmmmm. Well I know I haven't set the page to be mobile responsive so that might be causing problems too. I got work to do then.
Ken Haduch
@khaduch
Feb 02 2018 05:37
@TonyRednil - I just tried it on my phone, and it looks like it's working (except that it is not loading the image,) but I can see that after adding that closing </iframe> tag and then re-running, your navbar stuff is being centered and your name shows up in white color... so I think that it's the right thing to do. I'm signing out now - I hope that it works on your laptop... good luck with that!
dheerajahuja000
@dheerajahuja000
Feb 02 2018 05:40
@RomchyFCC I can learn that also but as of now i only know just basics of JS
Roman Struna
@RomchyFCC
Feb 02 2018 05:41
I'm asking because a course I am doing right now teaches everything, but it's hard
-ish
oh wait nvm just figured it out
@dheerajahuja000
https://watchandcode.com/p/practical-javascript
there you go, this should cover it
dheerajahuja000
@dheerajahuja000
Feb 02 2018 05:48
Thanks a lot @RomchyFCC
CamperBot
@camperbot
Feb 02 2018 05:48
dheerajahuja000 sends brownie points to @romchyfcc :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @romchyfcc |http://www.freecodecamp.org/romchyfcc
Roman Struna
@RomchyFCC
Feb 02 2018 05:49
no worries, good luck, happy coding
dheerajahuja000
@dheerajahuja000
Feb 02 2018 05:49
does it have a real time application development also or just tutorial?
Roman Struna
@RomchyFCC
Feb 02 2018 05:49
you develop basics of a todo list
interactivity with the dom
you place elements into the website and remove them
was a great learning experience for myself
dheerajahuja000
@dheerajahuja000
Feb 02 2018 05:50
I appreciate the help
:)
Roman Struna
@RomchyFCC
Feb 02 2018 05:50
:)
Shiva Gaire
@geeksambhu
Feb 02 2018 05:53
Hello everyone, any example link on bootstrap collapsible tree table with modal popup in every row. I searched but couldn't find what i am looking for
Gaurav
@gauravmagan
Feb 02 2018 05:57
Screen Shot 2018-02-02 at 12.56.30 AM.png
hi the href link isnt working
i was using href="about.html"
is it the correct path to give inside
Screen Shot 2018-02-02 at 12.58.39 AM.png
Brad
@bradtaniguchi
Feb 02 2018 06:04
@gauravmagan what about views/about.html, idk how your serving it but that's my guess
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 06:20

@khaduch Yeah... I totally forgot I had to respond to you yesterday. Sorry about that.. So here it goes.
What you are saying about ids, their management and ensuring Ids are unique is logically well and good.
However, it is completely unnecessary.
The primary reason you need Ids in the first place is that the data fetching is not done in a standard way.
Second, the markup is generated in an asynchronous loop ($.getJSON inside forEach).
DOM operations are expensive and should be kept to a minimum and certainly not be done in any sort of async loop.

You have loop1 -> that makes async call1 -> which in turn makes async call2
async call 1 generates some markup. And to be able to access this element inside async call 2, you give an Id attribute to that markup. So that you can access it inside.

This scheme, although it works, is really bad for the reasons mentioned above.
So the only arguments for having an Id on the elements is just so that you could access it some place else.
And you need this scheme because the code is not written in javascript way.

So what is Javascript way? (speaking particularly in this context)

You compile all the data BEFORE you go for markup generation. Which means you would wrap your nested $.getJSON calls in a Promise. Fire all these promises in a loop, and then use Promise.all to capture all the responses. This will make sure you already have data from users and channels api before hand.

@Heathercoraje and I had a brief discussion about this later on and this is what we came up with

var users = [
  'ESL_SC2',
  'OgamingSC2',
  'cretetion',
  'freecodecamp',
  'storbeck',
  'habathcx',
  'RobotCaleb',
  'noobs2ninjas',
];
var base = 'https://wind-bow.gomix.me/twitch-api/';
var jsonp = '?callback=?';

function makeUrl(type, user) {
  //type is either channels or streams
  return base + type + '/' + user + jsonp;
}

function getAllDataForUser(user) {
  return new Promise(function(resolve, reject) {
    $.getJSON(makeUrl('streams', user), function(data) {
      data.status = data.stream === null ? 'offline' : 'online';
      $.getJSON(makeUrl('channels', user), function(response) {
        data.channels = response;
        resolve(data);
      });
    });
  });
}

var allData = users.map(getAllDataForUser);

// cache all the selectors so you don't redo them in the loop
var $online = $('#online'),
  $offline = $('#offline'),
  $all = $('#all');

Promise.all(allData).then(function(allResponses) {

  allResponses
    .filter(r => r.status === 'online')
    .map(r => getMarkupForUser(r, true))
    .forEach( r => r.appendTo($online));

  allResponses
    .filter(r => r.status !== 'online')
    .map(r => getMarkupForUser(r, false))
    .forEach( r => r.appendTo($offline));

  allResponses
    .map(r => getMarkupForUser(r, true))
    .forEach( r => r.appendTo($all));
});

function getMarkupForUser(user, isOnline) {
  // remember, user.channels has the channels now
  var $div = $('<div/>', {
    class: 'item',
  });

  var $img = $('<img/>', {
    class: 'logoImage rounded-circle',
    src: user.logo,
  });

  var $p = $('<p/>', {
    class: `detail ${isOnline ? 'online' : 'offline'}`,
    text: user.display_name,
  });

  var $a = $('<a/>', {
    href: user.url,
    target: '_blank',
  });

  var $i = $('<i/>', {
    class: 'fa fa-circle',
  });

  var $result = $div.append($img).append($p);
  if (isOnline) {
    $a.append($i);
    $result.append($a);
  }

  return $result;
}
LydaTech
@lydatech
Feb 02 2018 06:44
@SweetCodingInc Please dont post code walls in chat. Use a code hosting platform
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 06:45
@lydatech okay.. next time
Can't go back and edit now
TonyRednil
@TonyRednil
Feb 02 2018 07:06
Does anyone know a way to make text color responsive to the background? I have a really nice picture for the background of my webpage but no matter what color I make the text it's hard to read in some spots.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 07:12
@khaduch True, i quite like it actually
@TonyRednil You may be able to make it gradient, heres a guide to gradient colours: https://www.w3schools.com/graphics/svg_grad_linear.asp
Quick questions guys, you see in the FCC tutorial they teach a bit of bootstrap and u can put in classes for the styles to work. Has anyone got a reference/guide to all those bootstrap classes?
Claudio Restifo
@Marmiz
Feb 02 2018 07:16
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 07:17
Oh great thanks guys @Marmiz @lydatech
CamperBot
@camperbot
Feb 02 2018 07:17
muhammedkarim sends brownie points to @marmiz and @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 1142 | @marmiz |http://www.freecodecamp.org/marmiz
:star2: 2629 | @lydatech |http://www.freecodecamp.org/lydatech
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 07:18
Well, i just came across this one https://www.w3schools.com/bootstrap/default.asp wouldn't this be easier to keep referring to? I'm trying to make the portfolio at the moment...
i wanna make a portfolio similar to this http://andrewborstein.github.io/portfolio/. Is that possible with just HTML and CSS?
Claudio Restifo
@Marmiz
Feb 02 2018 07:21
@MuhammedKarim always better to use the official documentation than some external resource :)
Use the external in case you need some different reference / explanation
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 07:22
Well since i barely know bootstrap at all won't the w3schools guide be a better option for me? After i learn a bit then i can use the reference you guys provided?
@Marmiz
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 07:47
http://andrewborstein.github.io/portfolio/ How can i make a section which covers the whole page for each part of the portfolio like in the above one?
Claudio Restifo
@Marmiz
Feb 02 2018 07:53
@MuhammedKarim if you give each section a height of 100vh means it will take the whole screen height
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 07:55
ohh ok
same as width?
If i want a certain style for all <li> elements except the last, can i make an exception in the css?
How can i put a grey background to the header?
catalin560
@catalin560
Feb 02 2018 08:09
what header? you forgot to close the <nav>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
      <a class="navbar-brand">Muhammed Karim</a>
    </div>
<ul class="nav navbar-nav navbar-right">
  <li><a href="#" style="margin:0px 10px" class="navbarli">Home</a></li>
  <li><a href="#" style="margin:0px 10px">About</a></li>
  <li><a href="#" style="margin:0px 10px">Projects</a></li>
  <li><a href="#" style="margin:0px 10px">Skills</a></li>
  <li><a href="#" style="margin:0px 10px">Education</a></li>
  <li><a href="#" style="margin:0px 10px">Contact</a></li>
  <li><a href="#" style="margin:0px 30px 0px 10px">CV</a></li>
</ul>
  </nav>
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 08:10
closed it after the i closed the ul
Not header, i meant nav bar
LydaTech
@lydatech
Feb 02 2018 08:12
@MuhammedKarim ugh! dont use inline styles. and use background-size cover
@MuhammedKarim you dont need bootstrap for that
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 08:13
i have to use inline because the last one is different to the rest
what's the CSS for it? @lydatech
LydaTech
@lydatech
Feb 02 2018 08:18
@MuhammedKarim what?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 08:21
@lydatech What is background-size cover?
ohhh
what does that do?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 08:39
I should do that instead of using bootstrap?
LydaTech
@lydatech
Feb 02 2018 08:39
@MuhammedKarim i dont know what youre going for. but this just uses css without bootstrap. You shouldnt be using a framework if you dont have basic HTML and CSS down first
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 08:40
ohhh ok that's great
thanks a lot! @lydatech
CamperBot
@camperbot
Feb 02 2018 08:40
muhammedkarim sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2630 | @lydatech |http://www.freecodecamp.org/lydatech
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 08:46
Wait...but how can i make the nav bar a different colour?
LydaTech
@lydatech
Feb 02 2018 08:49
@MuhammedKarim you need to do a course on css
Either here or somewhere
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 08:50
I did it on w3schools
but im not sure which element to put it under
LydaTech
@lydatech
Feb 02 2018 08:51
you should go though our course on html and css. You didnt get what you needed from w3schools
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 08:52
i just went over it last night
the 3 hour course on HTML and CSS
*5
also, the responsice design with bootstrap ang jQuery. I'm working through it downwards
*responsive
LydaTech
@lydatech
Feb 02 2018 08:53
@MuhammedKarim you didnt learn the basics
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 08:54
i did go through the course...
the whole of it
they didnt teach about background-size...
LydaTech
@lydatech
Feb 02 2018 08:57
you need to learn from somewhere else
@MuhammedKarim Did you start the course work here?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 08:58
which coursework?
I'm working through the map...from top to bottom
LydaTech
@lydatech
Feb 02 2018 08:58
about @MuhammedKarim
CamperBot
@camperbot
Feb 02 2018 08:58
api offline
LydaTech
@lydatech
Feb 02 2018 08:59
@MuhammedKarim youre not in the system
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 08:59
about @lydatech
CamperBot
@camperbot
Feb 02 2018 08:59
:star2: 2630 | @lydatech |http://www.freecodecamp.org/lydatech
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 08:59
@lydatech youre in the system
LydaTech
@lydatech
Feb 02 2018 09:00
lol
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 09:00
different account, i used my email for FCC, but my github for gitter
That is I :P
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 09:04
that course looks good, do they teach it in a similar way to FCC?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 09:15
That seems to work now
Thank you :) @lydatech
CamperBot
@camperbot
Feb 02 2018 09:15
muhammedkarim sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
api offline
LydaTech
@lydatech
Feb 02 2018 09:16
ugh!
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 09:16
What's wrong??
@lydatech
LydaTech
@lydatech
Feb 02 2018 09:17
nothing. Carry on
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 09:18
Did i do something wrong?
@lydatech
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 09:26
Whenever i try to fix it at the top it disappears... @lydatech
Apollo
@enigmacipher
Feb 02 2018 11:36
any good resource to learn more about the table element?
Apollo
@enigmacipher
Feb 02 2018 11:38
thanks @MuhammedKarim The mdn explanation was a bit confusing
CamperBot
@camperbot
Feb 02 2018 11:38
enigmacipher sends brownie points to @muhammedkarim :sparkles: :thumbsup: :sparkles:
api offline
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 11:40
you're welcome :)
@enigmacipher
JivkoJelev91
@JivkoJelev91
Feb 02 2018 12:29
wazza
linkin-park
@linkin-park
Feb 02 2018 13:11
hi
Stephen James
@sjames1958gm
Feb 02 2018 13:13
Morning (UTC-6) all
linkin-park
@linkin-park
Feb 02 2018 13:14
@sjames1958gm hi
@sjames1958gm do you believe in parallel universe?
Stephen James
@sjames1958gm
Feb 02 2018 13:16
I would have to say no. I don't know enough about the physics to understand how possible it is.
Aditya
@ezioda004
Feb 02 2018 13:17
:wavy_dash:
Stephen James
@sjames1958gm
Feb 02 2018 13:18
:wave: y line
Nate Mallison
@NJM8
Feb 02 2018 13:21
@sjames1958gm : 0 .... zzzzzzzz(flash)zzzzzzz
Stephen James
@sjames1958gm
Feb 02 2018 13:21
@NJM8 Hey
Nate Mallison
@NJM8
Feb 02 2018 13:21
Still not working but I got another one for you.
Stephen James
@sjames1958gm
Feb 02 2018 13:21
@NJM8 :gun:
Nate Mallison
@NJM8
Feb 02 2018 13:21
router
  .route('/')
  .get(authMiddleware.loginRequired, (req, res, next) => {
    return res.render('index');
  });


exports.loginRequired = function(req, res, next){
  if (!req.session.user_id) {
    req.flash('error', 'Please log in');
    return res.redirect('/users/login');
  } else {
    next();
  }
};
The route to the index is recommended to have this middleware to serve the log in page if there is not a req.session.user_id
shouldn't that be if (req.session.user_id)......
because as it is now if there is no cookie you serve the log in page, but if there is no cookie they have never logged in. right?
I cleared my db and cookies and it immediately serves log in page. makes no sense
Stephen James
@sjames1958gm
Feb 02 2018 13:25
@NJM8 I believe you want the ! which is say if there is NOT a user_id in the session go to login page
Nate Mallison
@NJM8
Feb 02 2018 13:26
but what if they have never logged in
when they sign up the user_id is stored as a cookie
so if they have never signed up there will be no cookie, then you serve log in page, they can't log in because they never signed up
Stephen James
@sjames1958gm
Feb 02 2018 13:28
Not sure if you can tell the difference between not-logged in and never logged in
Which is why you generally get a login page and a button to say sign up
@NJM8 When you sign up are you automatically logged in?
Nate Mallison
@NJM8
Feb 02 2018 13:29
No, but it serves login page after signing up
my index page has the login and sign up buttons
but when I clear all data and cookies it serves login page automatically, that can't be right, I can't log in as all user data is gone
Stephen James
@sjames1958gm
Feb 02 2018 13:30
I am only speculating, but the cookie should only be if logged in?
Nate Mallison
@NJM8
Feb 02 2018 13:31
I double checked, yes cookie is set on log in
I removed the ! and it works the way I expect, although that may not be someone elses expected way. lol
Stephen James
@sjames1958gm
Feb 02 2018 13:32
Unless your code checks for no users and puts up the sign in page, how would it know if the user was in the database or not
@NJM8 so if you login, does it still take you to the login page?
Nate Mallison
@NJM8
Feb 02 2018 13:33
no it shows a showUser page, which atm does nothing
flash still isn't working. I forked the repo for the example I am working from and theirs works, code is all the same as far as I can see. ¯_(ツ)_/¯
Stephen James
@sjames1958gm
Feb 02 2018 13:34
@NJM8 hmm. :(
Nate Mallison
@NJM8
Feb 02 2018 13:34
Maybe the problem is I never added the log out button. so when I deleted the user data but still have the cookie it does funny things because i'm not really logged out
I'll add that and see
yeah it has to be without the !. with it the flow makes no sense, the home page to sign up never gets served, even when you log out.
but if you just close it and open it while logged in it serves login page.
Nate Mallison
@NJM8
Feb 02 2018 13:40
@sjames1958gm thanks for being my rubber duck today.
CamperBot
@camperbot
Feb 02 2018 13:40
njm8 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8930 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 02 2018 13:40
@NJM8 lol yw
Nate Mallison
@NJM8
Feb 02 2018 13:40
didn't you just hit 8000 pts like two weeks ago?
Nate Mallison
@NJM8
Feb 02 2018 13:47
@sjames1958gm uhhhhhhhhhhhhhh
app.use(flash());
app.use('/users', userRoutes);

app.get('/', (req, res, next) => {
  return res.redirect('/users');
});


// send flash messages to all routes
app.use(function(req, res, next){
  res.locals.message = req.flash('message');
  next();
});
doesn't work
app.use(flash());

app.get('/', (req, res, next) => {
  return res.redirect('/users');
});

// send flash messages to all routes
app.use(function(req, res, next){
  res.locals.message = req.flash('message');
  next();
});

// get routes
app.use('/users', userRoutes);
works
you have to load the routes after the handler to send flash messages to all the routes
Stephen James
@sjames1958gm
Feb 02 2018 13:50
@NJM8 Ah
I knew there were route ordering dependencies I didn't know that applied to middleware as well
Nate Mallison
@NJM8
Feb 02 2018 13:52
This is the kind of stuff that kinda falls through the cracks. And the npm page for connect-flash uses a different coding style to set things up so it isn't clear the required order
Some of them still don't show but most do.
Stephen James
@sjames1958gm
Feb 02 2018 13:54
I have taken to putting all my non-route app.use before any routes
Nate Mallison
@NJM8
Feb 02 2018 13:55
good idea
Ken Haduch
@khaduch
Feb 02 2018 13:55
@SweetCodingInc - re: :point_up: February 2, 2018 1:20 AM - that looks nice and elegant. Was it something that you mostly generated, or were you able to guide @Heathercoraje to mostly come up with that? It seems that it is beyond beginner level, so it's great to have as an example and as a goal to work toward, maybe I'm just reading too much into it, since I didn't see any progressive postings here. It looks good, I hope that it helped her - thanks for posting your followup.
CamperBot
@camperbot
Feb 02 2018 13:55
khaduch sends brownie points to @sweetcodinginc and @heathercoraje :sparkles: :thumbsup: :sparkles:
:cookie: 223 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
:cookie: 269 | @heathercoraje |http://www.freecodecamp.org/heathercoraje
Nate Mallison
@NJM8
Feb 02 2018 13:56
the only one that isn't working is because I am using res.render instead of res.redirect. interesting. I guess just just pop on another route for that to redirect to render
Ali Bulut
@ali27001
Feb 02 2018 14:07
I am having problems with the data I upload to LocalStorange https://codepen.io/alibulut/pen/YewpRd?editors=1010
I got the items: array working on the comments line. But I want to attract localstorange den
Stephen James
@sjames1958gm
Feb 02 2018 14:11

@ali27001 there is an error in the code. you don't use var inside a object.

  data: {
    var items = JSON.parse(localStorage.getItem(veriler));
      console.log(items)

should be

data: { 
     items:  JSON.parse(localStorage.getItem(veriler))
Ali Bulut
@ali27001
Feb 02 2018 14:14
@sjames1958gm I tried it on. I get this error Uncaught ReferenceError: veriler is not defined
Stephen James
@sjames1958gm
Feb 02 2018 14:15
@ali27001 Should that be a string? 'veriler'
I do see where you stored it later
Ali Bulut
@ali27001
Feb 02 2018 14:18
image.png
@sjames1958gm I have 2 pages. I add the data on the other page. the insert page works.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 14:19
whats the average size to have a background picture on a webpage? An average PC size?
Stephen James
@sjames1958gm
Feb 02 2018 14:20
@ali27001
You set the value with setItem("veriler", object) you need to use the same string to retrieve
items: JSON.parse(localStorage.getItem("veriler"))
@MuhammedKarim Here is another article : https://www.iteracy.com/blog/post/size-and-layout-of-a-web-page
Quantomistro3178
@Quantomistro3178
Feb 02 2018 14:29
Guys, I want to iterate through an array, comparing the current value with the next one. I don't think I can use .map for that, can I?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 14:31
@sjames1958gm after reading those. Do you reckon 1250*572 is a good size? For viewing on a desktop or laptop
Stephen James
@sjames1958gm
Feb 02 2018 14:31
@MuhammedKarim yeah, sounds about right
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 14:31
Ok lemme try that one then, thanks :)
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 14:32

@khaduch : thanks :) I came up with it for the most part and then walked @Heathercoraje through it step by step.
I focused mostly on 1 fundamental aspect of programming - Which is separation of concerns.
To give you an idea about it, all it means is that you need to identify all the concerns in your problem statement and then have at least one function for each of the concerns.

In this particular case of twich tv challenge, there are two major concerns
1) Get the data for each user
2) Convert this data to user readable html markup.

Then there is one more concern that supports concern 1, which is to combine data from 2 different API calls for one user.

To support this 3rd concern mentioned above, it opens up another convern, which is to combine data from each user into one single data structure. (Array in this case)

Once this is broken down, you form a function for each of these concerns.

Concern 1 is addressed by the function getAllDataForUser.
Concern 2 is addressed by the functiongetMarkupForUser.
Concern 3 is addressed by the way getAllDataForUser is implemented. In a way that you add data from 2nd $.getJSON to the response of 1st $.getJSON. Such that the output of that function is one single object that contains all the required data for 1 user. To do that, we;ve used the Promise API to track resolution of each of the two async requests

Finally the 4th concern is address by the Promise.all API.

The problem I see with most people, not just here but in the entire software industry, is that people tend to mix multiple concerns together. Like many people would fetch data and generate html markup in one monolithic piece of code. Which not only becomes hard to manage, maintain etc but it also requires you to add more of a guarding code. Example of guarding code would your approach to add Ids, and to handle that, you would also likely end up writing more code to manage integrity of those Ids.

Hope this makes sense. :)

Hopefully this will help you in your next code implementation. :+1:

Heathercoraje
@Heathercoraje
Feb 02 2018 14:50
@SweetCodingInc Thank you so much for explaining this concept of separation of concern Though I try to create one-purpose function, while writing codes I focus too much on 'codes that work at least.' I will keep it in mind.
CamperBot
@camperbot
Feb 02 2018 14:50
heathercoraje sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 224 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 14:56
@Heathercoraje :+1:
Ken Haduch
@khaduch
Feb 02 2018 15:01
@SweetCodingInc :+1: - so, freeCodeCamp should possibly try to impart some of this knowledge about separation of concerns in their lessons, although it might not be part of the scope of what they are attempting to bring the level of the students capabilities up to? I agree with you that it's too easy to write "spaghetti code" and you do see it all the time. I haven't gotten to the point of using the Promise API in a project up to this point, so I'm going to study that and learn from it as an example.
Quantomistro3178
@Quantomistro3178
Feb 02 2018 15:10
I've got an array [1,1,2,2,3,3,4,5,5] and I wanna remove all elements appearing once....
Heathercoraje
@Heathercoraje
Feb 02 2018 15:11
@Quantomistro3178 Check how many times it appears :) by adding count variable?
Quantomistro3178
@Quantomistro3178
Feb 02 2018 15:12
@Heathercoraje yeah, wait, I'm still trying to think of something. I'll try that, thanks!
CamperBot
@camperbot
Feb 02 2018 15:12
quantomistro3178 sends brownie points to @heathercoraje :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @heathercoraje |http://www.freecodecamp.org/heathercoraje
How can i put a h1 element on top of the background image?
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 15:20

@khaduch : Well.. I beg to differ on that part. FCC should focus only and specifically on writing code. Imagine having to read all this theory when you just wanna get your hands dirty with code.. Spaghetti code is a natural step in learning and unless you get fed up of maintaining it, you'd never be motivated enough to learn something that appears as common sense thing as, say, separation of concerns. Clean code is what you achieve by going through various revisions of the same code.

You will learn more about it as you put your code out there to be reviewed by people who have great understanding of programming. Stackoverflow code reviews is great for this.

Heathercoraje
@Heathercoraje
Feb 02 2018 15:21
@Quantomistro3178 :+1:
@SweetCodingInc I agree. I get very embarrassed showing my code under any circumstance but ironically having someone review my codes has been the most powerful way to learn
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 15:22
@Quantomistro3178
var x = [1,1,2,2,3,3,4,5,5];

var y = x.filter((c, i, o) => o.indexOf(c) !== o.lastIndexOf(c) );

console.log(y); // [ 1, 1, 2, 2, 3, 3, 5, 5 ]
@Heathercoraje :+1:
Stephen James
@sjames1958gm
Feb 02 2018 15:23
@Quantomistro3178 When you want to keep/remove values from an array - think filter.
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 15:24
Heathercoraje
@Heathercoraje
Feb 02 2018 15:24
Good night fellows! Happy coding
Quantomistro3178
@Quantomistro3178
Feb 02 2018 15:27
@sjames1958gm I did think about .filter, but I'm just really bad with using it, I always get errors when I try to use it.
Stephen James
@sjames1958gm
Feb 02 2018 15:28
@Quantomistro3178 with filter just remember the function returns true to keep a value and false to remove it.
Heathercoraje
@Heathercoraje
Feb 02 2018 15:30
reading docs always helps.
Quantomistro3178
@Quantomistro3178
Feb 02 2018 15:30
@SweetCodingInc Could you explain me your code? I don't understand how it works...
Heathercoraje
@Heathercoraje
Feb 02 2018 15:30
@Quantomistro3178 indexOf and lastIndexOf finds the location of the item in the array
LastIndexOf returns the location where the item was shown for the last time.
So, if there is one element, its first and last location will be the same because it appears only once.
Quantomistro3178
@Quantomistro3178
Feb 02 2018 15:32
@Heathercoraje Ohhhh, I see. And what about the (c, i, o) part?
Heathercoraje
@Heathercoraje
Feb 02 2018 15:33
x.filter((c, i, o) => o.indexOf(c) !== o.lastIndexOf(c) ) This means, check the filter and if c(target element)'s location and last location isn't the same(which means that it appears more than once) then return.
I belive c is a each item of array and o is an array and i is an index
Quantomistro3178
@Quantomistro3178
Feb 02 2018 15:34
@Heathercoraje I get it. I should check the docs again. And get a bit more used to arrow functions, they still confuse me....
Heathercoraje
@Heathercoraje
Feb 02 2018 15:34
Filter only returns if the condition is true. So y is now automatically an array of items that appear more than once.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 15:34
Can anyone answer my question please?
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 15:35

@Quantomistro3178

Filter callback takes in 3 parameters - current element, current index and original array.
indexOf gives you the first index at which the element appears
lastIndexOf gives you the last index at which the element appears

So if the number is repeating, it will have different values for first index and last index.
Consider 1 for example - it's first index is 0 and last index is 1 So that means 1 is a repeating number.
Consider 4 for example - it's first index is 6 and last index is 6 So that means 6 is not a repeating number.

And if filter callback function returns true, the current element is retained in the array. If it returns false, it will discard current element.

so you just want to keep the elements that have different first and last indices.

Heathercoraje
@Heathercoraje
Feb 02 2018 15:35
@Quantomistro3178 I am new as well but arrow function adds elegance in code I believe.
@SweetCodingInc :sparkles:
@Quantomistro3178 It gets better. hopes!
Quantomistro3178
@Quantomistro3178
Feb 02 2018 15:37
@SweetCodingInc No way, that's so clever. How do you people think of all this so quickly?!
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 15:40
@Quantomistro3178 : Hope this makes sense
var x = [1,1,2,2,3,3,4,5,5];

var y = x.filter(function( currentElement, currentIndex, originalArray){

  var firstIndexOfCurrentElement = originalArray.indexOf(currentElement);
  var lastIndexOfCurrentElement = originalArray.lastIndexOf(currentElement);
  if(firstIndexOfCurrentElement === lastIndexOfCurrentElement){
    return false; // discard the number since it's not repeating
  } else {
    return true; // retain the element
  }
});

console.log(y); // [ 1, 1, 2, 2, 3, 3, 5, 5 ]
the originalArray in this case will be x. Since that is how .filter works
Heathercoraje
@Heathercoraje
Feb 02 2018 15:42
@Quantomistro3178 Probably because he is a sweet coder..
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 15:43
:laughing:
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 15:44
lmao flirt in the private chat u two :P @Heathercoraje @SweetCodingInc
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 15:44
just a friendly banter, that's all
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 15:45
i know lool jk
Quantomistro3178
@Quantomistro3178
Feb 02 2018 15:46

function diffArray(arr1, arr2) {
  var newArr = [];
  // Same, same; but different.
  var both = arr1.concat(arr2);
  both.sort();
  function remove(a, b, c) {
    return c.indexOf(a) === c.lastIndexOf(a);
  }
  newArr = both.filter(remove);


  return newArr;
}

diffArray(["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]);
I wrote return c.indexOf(a) === c.lastIndexOf(a); and the code works just fine. Why is it working fine if .filter removes elements that return false?
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 15:49
@Quantomistro3178 because of c.indexOf(a) === c.lastIndexOf(a)
for non repeating things, it will return true
Victor Schofmann
@vscnn
Feb 02 2018 15:52
Could someone ask me how to check why the font does not apply? In CSS, everything is OK, the path to the font is correct, the font itself is where it should be. And visually nothing changes. What am I doing wrong? http://take.ms/S73fK
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 15:52
@vscnn have you applied font-family: 'your-font-name'; on body?
Kaz Baig
@kbaig
Feb 02 2018 15:53
@font-face is just to declare the font
Victor Schofmann
@vscnn
Feb 02 2018 15:54
@SweetCodingInc @kbaig I used FF for the desired element .heading
Quantomistro3178
@Quantomistro3178
Feb 02 2018 15:55
@SweetCodingInc You wrote that if indexOf(currentElement) === lastIndexOf(currentElement), then return false to remove the value. But I only wrote return indexOf(currentElement) === lastIndexOf(currentElement), I didn't add return false after that, yet it works just fine....
Mel Macaluso
@MelMacaluso
Feb 02 2018 15:56
@vscnn share the codepen or whatever
Agnel Nieves
@agnelnieves
Feb 02 2018 15:56

Hey guys!!! Just released an article on web dev! This is my first article! I'm looking for feedback! Would really appreciate it if you guys give me some feedback and share! Thanks!

https://medium.com/@agnelnieves/how-to-be-a-good-programmer-b7a96f3ce02b

Stephen James
@sjames1958gm
Feb 02 2018 15:58
@Quantomistro3178 That comparison will return true or false and you return whichever.
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 15:59

@Quantomistro3178 I see... === is a comparison operator.. It implicitly evaluates to either true or false. I put in that if/else just to give you an idea of whats going on. So

return indexOf(currentElement) === lastIndexOf(currentElement)

is exactly same as

if(indexOf(currentElement) === lastIndexOf(currentElement)){
  return true;
} else {
  return false;
}
or even
var found = indexOf(currentElement) === lastIndexOf(currentElement); 
// found will be true or false depending on value of currentElement
return found;
seemotions
@seemotions
Feb 02 2018 16:01
How to make my navigation go to the place it needs smoothly.
Stephen James
@sjames1958gm
Feb 02 2018 16:05
@agnelnieves
You might want to run a spell checker on it. withing this is one word I have found.
VIM has been support on windows - git bash, or cygwin, or MINGW for years.
You might want to have a friend proof it, I saw several grammatical errors.
It is a good article. I should have said this first.
LydaTech
@lydatech
Feb 02 2018 16:05
@agnelnieves This isnt the best room for posting that. This is a help focused chat. Try a general chat for getting feedback
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 16:06
Hey @lydatech :) nice to see you here, quick question. Can this account be linked to my FCC account?
LydaTech
@lydatech
Feb 02 2018 16:07
@MuhammedKarim only 1 github account can be linked to FCC
Quantomistro3178
@Quantomistro3178
Feb 02 2018 16:07

@SweetCodingInc Thats my point. If

return indexOf(currentElement) === lastIndexOf(currentElement)

is exactly the same as

if(indexOf(currentElement) === lastIndexOf(currentElement)){
  return true;
} else {
  return false;
}

then is this right or wrong:

if(firstIndexOfCurrentElement === lastIndexOfCurrentElement){
    return false; // discard the number since it's not repeating
  } else {
    return true; // retain the element
  }

???

The last piece of code is the one from your example...
So, does filter remove values that return false, or true?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 16:08
@lydatech This is my only github account
LydaTech
@lydatech
Feb 02 2018 16:10
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 16:10
Which button do i click there? @lydatech
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 16:11
@Quantomistro3178 The last piece from my code is wrong for diffArray challenge. Becuase you wanto to discard repeating elements in that challenge
If you take a look at my very first example, :point_up: I returned !== from the filter
Jan Shah
@JanShah
Feb 02 2018 16:15
function test(num) {    
    if(num>0) {
        console.log(num)
        test(num-=1)
        console.log(num+1)
    }
}


test(10)
can someone please explain how this is working? I was shown it today in class but I don't understand how it's getting back from one to ten after doing 10 to 1. the function returns 10 to 1 and then 1 to 10
it doesn't return anything, but it logs it..
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 16:15
The only way to understand recursion is to understand recursion ;)

it doesn't return anything, but it logs it..

because you don't have any explicit return statement?

Jan Shah
@JanShah
Feb 02 2018 16:16
I see the recursion but how is it printing 1 to 10 when the recursive function only goes 10 to 1
yeah, when I set return on line 4 the second set of values don't get logged, I assume the code doesn't get there if I'm returning
LydaTech
@lydatech
Feb 02 2018 16:18
@MuhammedKarim There is no direct way to relink to a different github account
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 16:18
i only have one github account
LydaTech
@lydatech
Feb 02 2018 16:18
@MuhammedKarim if you havent linked on yet you can link it there
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 16:18
that is weird... @lydatech
it says update, so it must be already linked. but my github account is on here and not my FCC one? @lydatech
LydaTech
@lydatech
Feb 02 2018 16:21
@MuhammedKarim why did you link 2 different accounts?
@MuhammedKarim you need to login here with whatever one you have linked to your fcc and github account
Jan Shah
@JanShah
Feb 02 2018 16:23
I found this excellent tool to help me visualise whats going on : http://latentflip.com/loupe
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 16:24

@JanShah It's becuase, when you call a function, the function gets put on whats called a call stack.
When you add something to the stack, the operation is called push and when you take something out of the stack, the operation is called pop.
Calling a function will cause that function to be pushed to call stack
Returning from a function will cause that function to be popped from the call stack

So when you call a function for the first time, you push it on't call stack.
Then without return, you recursively call test again, but only with n-=1

So this is how it goes

test(10)
Push test to call stack with n = 10 :: Log 10 :: Call test with n = 9
Push test to call stack with n = 9 :: Log 9 :: call test with n = 8
Push test to call stack with n = 8 :: Log 9 :: call test with n = 7
Push test to call stack with n = 7 :: Log 9 :: call test with n = 6
Push test to call stack with n = 6 :: Log 9 :: call test with n = 5
Push test to call stack with n = 5 :: Log 9 :: call test with n = 4
Push test to call stack with n = 4 :: Log 9 :: call test with n = 3
Push test to call stack with n = 3 :: Log 9 :: call test with n = 2
Push test to call stack with n = 2 :: Log 9 :: call test with n = 1
Push test to call stack with n = 1 :: Log 9 :: call test with n = 0

Now n > 0 is false, so your function will return
Pop test from call stack with n = 1 :: Log 1
Pop test from call stack with n = 2 :: Log 2
Pop test from call stack with n = 3 :: Log 3
Pop test from call stack with n = 4 :: Log 4
Pop test from call stack with n = 5 :: Log 5
Pop test from call stack with n = 6 :: Log 6
Pop test from call stack with n = 7 :: Log 7
Pop test from call stack with n = 8 :: Log 8
Pop test from call stack with n = 9 :: Log 9
Pop test from call stack with n = 10 :: Log 10

Jan Shah
@JanShah
Feb 02 2018 16:25
@SweetCodingInc thanks for that, wow!
CamperBot
@camperbot
Feb 02 2018 16:25
janshah sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 225 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 16:26
@lydatech how can i link two different github accounts? I only have one...
Jan Shah
@JanShah
Feb 02 2018 16:26
it baffled me for hours
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 16:26
@JanShah :+1:
LydaTech
@lydatech
Feb 02 2018 16:30
@MuhammedKarim now im confused . (FCC > github account) (gitter > github account) only one account then they should be the same
@MuhammedKarim you are not signed in here with the github account that youre using for freecodecamp
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 16:33
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 16:37
@lydatech lemme try to sign in again...
@lydatech i just joined recently and i dont think i could've made a FCC account with my github one because i cant sign in to my FCC with my github account, that's probs the issue
LydaTech
@lydatech
Feb 02 2018 16:41
@MuhammedKarim you linked me a github account earlier. Youre not seeing a link github profile in your FCC settings so yes you linked SOEM account
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 16:43
then my one must be linked already....but not working here for some reason
@lydatech
LydaTech
@lydatech
Feb 02 2018 16:44
@MuhammedKarim login here with that one
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 16:44
i am logged in with my github
@lydatech
Nate Mallison
@NJM8
Feb 02 2018 16:45
Is any one here familiar with pug or jade HTML templating?
if message === 'Invalid Username, do you need to sign up?'
    p #{message}
    form(action="/users/signup")
      input(type="submit" value="Sign up")
  else 
    p #{message}
I'm trying to render one thing or another based on the text in the message variable and it isn't working
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 16:46
@lydatech i am logged in here with my github
LydaTech
@lydatech
Feb 02 2018 16:50
@MuhammedKarim take a screenshot of your FCC account page and PM me with it
Ryan Christopher
@ryan-christopher
Feb 02 2018 16:56
Anyone have time to look at Pomodor code? I need assistance handling break functionality.
Nate Mallison
@NJM8
Feb 02 2018 17:01
@ryan-christopher if you post your code with question some one will eventually come along and help out
Ryan Christopher
@ryan-christopher
Feb 02 2018 17:02
// minutes = the session length passed in by user
function timer(minutes) {
    let breakTime = parseInt($("#breakLength").html());
    // if no break is specified, just throw the session length into the stopWatch and run it, else run the stopWatch forever at 
        the specific break interval converted from minutes to seconds; the setInterval in the else doesn't seem to work. 
     if (breakTime === 0) {
        stopWatch(minutes);
    } else {
        setInterval(stopWatch(minutes), breakTime*60000);
    }
}

function stopWatch (minutes) {
    let initialize = new Date();
    let deadLine = new Date(initialize.getTime() + minutes*60000);

    intervalHandle = setInterval(function() {
        let timeSet = Date.parse(deadLine) - Date.parse(new Date());
        if (timeSet > 0) {
            let total_seconds = (timeSet) / 1000;

            let hours = Math.floor(total_seconds / 3600);
            total_seconds = total_seconds % 3600;

            let minutes = Math.floor(total_seconds / 60);
            total_seconds = total_seconds % 60;

            let seconds = Math.floor(total_seconds);

            // display time as HH:MM:SS
            hours = pretty_time_string(hours);
            minutes = pretty_time_string(minutes);
            seconds = pretty_time_string(seconds);
            let currentTimeString = hours + ":" + minutes + ":" + seconds;
            timeRemaining = timeSet;
            console.log(currentTimeString);
            $("#displayHours").html(hours);
            $("#displayMins").html(minutes);
            $("#displaySecs").html(seconds);
        } else {
            stopTimer(intervalHandle);
        }
    }, 1000);
}
The problem is explained in the timer function comment.
Nate Mallison
@NJM8
Feb 02 2018 17:05
Is the variable coming through? what happens if you log breaktime?
Ryan Christopher
@ryan-christopher
Feb 02 2018 17:05
Breaktime comes through just fine.
Nate Mallison
@NJM8
Feb 02 2018 17:06
try console.log(typeof breakTime);
Ryan Christopher
@ryan-christopher
Feb 02 2018 17:06
k
Number
Nate Mallison
@NJM8
Feb 02 2018 17:08
oh you already have parseInt, reading is good
Ryan Christopher
@ryan-christopher
Feb 02 2018 17:08
Lol. S'ok.
Eric Weiss
@eweiss17
Feb 02 2018 17:09
@NJM8 could be your spacing
Nate Mallison
@NJM8
Feb 02 2018 17:10
and is breakTime 0 when you don't input anything?
Eric Weiss
@eweiss17
Feb 02 2018 17:11
make sure the if and else are parallel vertically
Nate Mallison
@NJM8
Feb 02 2018 17:12
@eweiss17 I didn't copy paste well.
body 
  if message === 'Invalid Username, do you need to sign up?'
    p #{message}
    form(action="/users/signup")
      input(type="submit" value="Sign up")
  else 
    p #{message}
Eric Weiss
@eweiss17
Feb 02 2018 17:12
oh
how are you grabbing the value of message
Ryan Christopher
@ryan-christopher
Feb 02 2018 17:13
Yes, by default breakTime is initialised at 0.
That's why if no break is specified, we just launch the stopWatch without thinking any further.
Nate Mallison
@NJM8
Feb 02 2018 17:17
No break time is set with the value that is in #breakthrough
so if no value is in the text box do you get 0?
Igotta run sorry if i wasnt much help
Ryan Christopher
@ryan-christopher
Feb 02 2018 17:21
When timer is caller, breakTime will always have a number in it. If the user didn't choose a break, it will be zero by default (breakLength is just a div tag whose HTML gets changed by a plus button and minus button). If the if statement is there to test whether or not the breakLength is greater than zero, if it is, we have a genuine break we need to observe, which throws use into the else statement (at least it should). That break becomes the second parameter in the setInterval function which calls the stopWatch and the break(in milliseconds).
No worries.
Nate Mallison
@NJM8
Feb 02 2018 17:42
I got it. I was focusing on the variable but that is fine. You want the set interval to delay the start of stopwatch. Right? To do that i think you will need to use a slightly different approach. You can only have one set interval
So use a function to run setinterval and pass it a parameter for time. Then run that set interval to run stopwatch. Does that make sense?
Then you can change that pararameter for time based on your breaktime variable
As it is now the second set interval is probably over writing the first. So there is a delay then your stopwatch runs as if there was no extra delay right?
My pen above doesn't seem to be formatting right on the HTML is it because I didn't finish yet?
Ryan Christopher
@ryan-christopher
Feb 02 2018 17:52
Not sure I follow. I do have a function running stopwatch, which contains my set interval and passes it time. Also, you can have as many set intervals on a page as you would like. No rule against this.
Sweet Coding :)
@SweetCodingInc
Feb 02 2018 18:00
Hi
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 18:02
Hi
LydaTech
@lydatech
Feb 02 2018 18:11
@ScorPump thats not written in html
krckyboy
@krckyboy
Feb 02 2018 18:21

How can I put a selected tag on an option that is currently the class that the professor teaches (which is what stays in the collection Professor? I'm working on the edit page for the Professor, and I want, when admin goes into the /edit specific Professor, to see which class will be selected as an option in the select tag, so he wouldn't get confused to what is the current class that the professor teaches.

My code:

<select>
                <% predmets.forEach(function(predmet){ %>
                    <option name="<%=predmet.id%>"><%=predmet.name%></option>
                <%}) %>
            </select>

Something that I want, kinda:

<select>
  <option value="" selected disabled hidden>This is the one that Professor currently teaches</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

So, basically.. I want to ask, with front end JavaScript.. if the option tag has a name value that equals the ID of the professor's class in MongoDB, I want it to be selected and hidden.

image.png
ScorPump
@ScorPump
Feb 02 2018 18:21
@lydatech thank you I will start over UGH
CamperBot
@camperbot
Feb 02 2018 18:21
scorpump sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2631 | @lydatech |http://www.freecodecamp.org/lydatech
Apollo
@enigmacipher
Feb 02 2018 18:29
Why does my border only apply to the outer level of the table?
Doomflake
@Doomflake
Feb 02 2018 18:30
@enigmacipher try adding the border to <th> and see if that helps
I got this
How can I give the entire thing a border
Doomflake
@Doomflake
Feb 02 2018 18:35
apply the class to the elements you want to have the border
that or create a couple entries in the CSS selecting the elements that way
You're wanting a table in a chart style, right>
*?
Apollo
@enigmacipher
Feb 02 2018 18:36
yeah. why doesnt applying the class to the div work?
走你飛艇
@gofighting123
Feb 02 2018 18:37
add class to table not th
LydaTech
@lydatech
Feb 02 2018 18:37
@enigmacipher dont use tables for layout
走你飛艇
@gofighting123
Feb 02 2018 18:39
bootstrap maybe a little hard for you..
Apollo
@enigmacipher
Feb 02 2018 18:40
https://codepen.io/enigmacipher/pen/ZrQaXx?editors=1000 I got this. Anyway i can fill the white gaps with red.
Should I wait till I learn bootstrap?
Doomflake
@Doomflake
Feb 02 2018 18:41
It would make it easier
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 18:41
do border-collapse
走你飛艇
@gofighting123
Feb 02 2018 18:42
oh I see what you want to do
Apollo
@enigmacipher
Feb 02 2018 18:43
https://codepen.io/enigmacipher/pen/ZrQaXx?editors=1000 Got it thanks @MuhammedKarim and everyone :)
CamperBot
@camperbot
Feb 02 2018 18:43
enigmacipher sends brownie points to @muhammedkarim :sparkles: :thumbsup: :sparkles:
:cookie: 114 | @muhammedkarim |http://www.freecodecamp.org/muhammedkarim
走你飛艇
@gofighting123
Feb 02 2018 18:44
there r so many predefined css framework, bs is the most popular one by now
LydaTech
@lydatech
Feb 02 2018 18:46
@enigmacipher dont use tables for layout. Tables should be used for listing tabular data
Apollo
@enigmacipher
Feb 02 2018 18:48
Oh Im just doing a project from colt steeles web dev bootcamp
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 18:54
@enigmacipher You're welcome!
Doomflake
@Doomflake
Feb 02 2018 18:56
@enigmacipher glad to try and help. I learn as much helping on here as asking for help
Nate Mallison
@NJM8
Feb 02 2018 19:04
@ryan-christopher sorry i was thinking you had both setInterval declared globally so one would overwrite. Have you tried setting the setInterval to a variable after the else statement? var delay = setInterval(stopWatch (minutes), breakTime * 60000);
Is stopTimer() your own function to cancel the interval?
Abhi
@abhishek737
Feb 02 2018 19:21
Can any one help me with any kind of link or explanation for Higher order components in react
It will be great , I am finding it a bit confusing
Ryan Christopher
@ryan-christopher
Feb 02 2018 19:23
@NJM8 Trying something else. Hold on.
@NJM8 Sadly, that wouldn't change anything and neither did what I just tried. <shrug>
Christopher McCormack
@cmccormack
Feb 02 2018 19:36
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 20:14
Would anyone please tell me a good in-depth guide to HTML which is free and can pratice as well as learning it...
Adel
@AdelMahjoub
Feb 02 2018 20:19
@MuhammedKarim jump start html5
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:22
@MuhammedKarim w3schools as well
Adel
@AdelMahjoub
Feb 02 2018 20:25
@MuhammedKarim w3schools as well :+1:
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 20:27
learnt from w3schools already @AdelMahjoub @mbosnjak01
Adel
@AdelMahjoub
Feb 02 2018 20:27
@MuhammedKarim try that link to html5 jump start book
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:28
yeah book seems good
time to refactor my app :'(
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 20:29
@AdelMahjoub it seems good but the issue is that i want to try and practice it as well as learning
so more like FCC where u can make a kind of project whilst learning it @mbosnjak01
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:30
@MuhammedKarim well ... when I was learning PHP, I used to go through whole documentation, looking at many functions and then test them (making my own tasks to do) in several ways
maybe you could do the same
although you might need soem css as well
or just make some practice website, that could probably be best way to learn. Even if you make tons of mistakes
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 20:32
i have tried everything
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:32
what do you mean by everything?
Adel
@AdelMahjoub
Feb 02 2018 20:32
@MuhammedKarim start by an overview of the http protocol then a backend language, php is good to learn html
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 20:32
but im still so terrible at programming i cant even make the portfolio project :( @mbosnjak01 @AdelMahjoub
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:32
have you tried making template for e-commerce?
or a blog? portfolio?
Adel
@AdelMahjoub
Feb 02 2018 20:32
@MuhammedKarim ah you don't only mean html right
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 20:33
i started learning PHP but then stopped because my HTML, CSS and JS are terrible
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:33
let me tell you a secret tho :P
Adel
@AdelMahjoub
Feb 02 2018 20:33
@MuhammedKarim no problem let it be terrible, all what you have to do is google search and the docs
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 20:33
no i mean u could make a portfolio with just html and css, but i can't...
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:33
you don't need to know much html to learn php :)
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 20:33
but i dont need php to make a portfolio, and i do need html...
as im working through the map on FCC
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:34
But as I said
try tomething
even if you make many mistakes
at least you'll know latter what is wrong and get ideas how to fix
after all
Adel
@AdelMahjoub
Feb 02 2018 20:34
@MuhammedKarim well keep going in the fcc map
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:34
there are many people here to help
Knowledge is aquired through time and practice, you can't know everything to perfection within a month :D
Adel
@AdelMahjoub
Feb 02 2018 20:37
@MuhammedKarim get the fcc front-end certificate
@MuhammedKarim at least for self satisfaction
Ryan Christopher
@ryan-christopher
Feb 02 2018 20:37
This timer logic is killing me.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 20:39
exactly....ive only been coding for a month lol but after a whole month i should at least be able to make a portfolio.... @AdelMahjoub @mbosnjak01
That's the issue, im stuck on the portfolio part of the FCC map coz idk how to make one :(
Adel
@AdelMahjoub
Feb 02 2018 20:40
@MuhammedKarim what they told you when you pass exams in school, if you get stuck on a question skip it and come back if you have time
Ryan Christopher
@ryan-christopher
Feb 02 2018 20:41
@MuhammedKarim Are you stuck on making a portfolio page?
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:41
at least try to make it complete, will all necesary elements ... doesn't matter if it's ugly, you will NOT get better at ANY language if you don't practice it a lot and learn from your mistakes. That's reality
Adel
@AdelMahjoub
Feb 02 2018 20:41
@MuhammedKarim the two hardest project in the fcc map, the trubute page and the portfolio
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:41
I made so many mistakes in all languages I learned I lost count long time ago. But I learned from it
Adel
@AdelMahjoub
Feb 02 2018 20:42
@MuhammedKarim because you need to create the content, all the other projects are specified
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:42
I also went to some proffesionals to review my crap and they instructed me what to change and what are some good practices, so it was actually great for me
Ryan Christopher
@ryan-christopher
Feb 02 2018 20:44
@MuhammedKarim In the Tribute page, they showed that you needed Jumbotron. That's a Bootstrap thing. Get comfortable reading about and using Bootstrap 3. NetNinja on YouTube has excellent videos on using Bootstrap. On your portfolio page, you could use the Bootstrap Navbar for the top and Thumbnails for the links to your projects.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 20:46
I tried to use bootstrap but i very well flopped, someone very kindly made the header for me in css and i was able to use that @mbosnjak01 @AdelMahjoub @ryan-christopher I am trying to do the portfolio but it says it is around 90 hours project right? That's probably because imma have to use a lot of time to search things up too...
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:48
Just take is slowly for the first time. But complete the project. Next one will be much easier.
Adel
@AdelMahjoub
Feb 02 2018 20:48
@MuhammedKarim build it in a blank canvas, a paper and a pen
@MuhammedKarim if you can't built in on paper, you can't with html
Ryan Christopher
@ryan-christopher
Feb 02 2018 20:49
@MuhammedKarim Hit up the NetNinja videos I mentioned. Bootstrap is very user friendly. If you are trying to learn it straight from docs from the beginning, it will be difficult. The videos will clarify everything.
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:50
@ryan-christopher Bootstrap does make some things easier, but I wouldn't recommend it to anyone who didn't learn at least some css in order to know how bootstrap works.
Adel
@AdelMahjoub
Feb 02 2018 20:50
why is that
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:50
Just like you shouldn't try to learn angular/react without knowing js
Adel
@AdelMahjoub
Feb 02 2018 20:51
so why using express without learning nodejs
or using jquery without be able to write your own jquery like lib
Ryan Christopher
@ryan-christopher
Feb 02 2018 20:52
@mbosnjak01 I assume basic knowledge of HTML, HTML attributes, and CSS. It's certainly nice to know that Bootstrap is a bunch of CSS that is written for you and beneath the hood. At times, you'll want to override!
Adel
@AdelMahjoub
Feb 02 2018 20:52
or using wordpress wihtout learning php
use bootstrap or bulma or foundation or pure or any
you'll get better at css using css libs
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 20:53
I have learnt CSS on w3schools so should be able to work it. Bootstrap does seem to be a bit difficult but can make the CSS styling a lot easier... I'll give it a shot guys, thank you so much :) @AdelMahjoub @ryan-christopher @mbosnjak01
CamperBot
@camperbot
Feb 02 2018 20:53
muhammedkarim sends brownie points to @adelmahjoub and @ryan-christopher and @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 297 | @ryan-christopher |http://www.freecodecamp.org/ryan-christopher
:cookie: 654 | @adelmahjoub |http://www.freecodecamp.org/adelmahjoub
:cookie: 225 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
Ryan Christopher
@ryan-christopher
Feb 02 2018 20:54
No prob. Now, if I could just get this timer to work. :shipit:
Adel
@AdelMahjoub
Feb 02 2018 20:55
use setInterval or requestAnimationFrame
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:56
i need to refactor about 500 lines of js code now :( good times
Ryan Christopher
@ryan-christopher
Feb 02 2018 20:57
I have a couple of setIntervals going. Trying to account for the break time. Want the timer to run, then the break to run, then the timer to auto start, but it ain't happening. I'm pretty much out of ideas. It is killing me.
LydaTech
@lydatech
Feb 02 2018 20:58
@ryan-christopher like a stopwatch?
Adel
@AdelMahjoub
Feb 02 2018 20:58
@ryan-christopher does the timers runs all together ?
@ryan-christopher or one timer at a time
Matej Bošnjak
@mbosnjak01
Feb 02 2018 20:59
so ... timer starts -> timer breaks -> if breaks -> pause script -> setInterval and run after interval is done? Idk XD
and everytime it pauses, set default interval = paused time value and make it begin count on that time
in case it resets to 0
Adel
@AdelMahjoub
Feb 02 2018 21:02
@ryan-christopher you can use the same requestAnimationFrame loop for all the timers, add some eventListeners on your inputs (buttons, keys, touch ...) each time an input is down some booleans changes
LydaTech
@lydatech
Feb 02 2018 21:04
he's gone
Nate Mallison
@NJM8
Feb 02 2018 21:06
@ryan-christopher I think you are running into problems because you can't tell when each setInterval is actually going to get popped off the stack
So use setInterval for your countdown timer. Then at the end call a setTimeout, that set timeout will call your setinterval with the specified break time. That way if there is no break it runs right away to the countdown.
LydaTech
@lydatech
Feb 02 2018 21:08
@NJM8 he's gone
Nate Mallison
@NJM8
Feb 02 2018 21:09
@lydatech May he rest in peace, amen
😂😂
Just kidding, I'm sure he will be back
Ryan Christopher
@ryan-christopher
Feb 02 2018 21:23
Back.
From the dead. :P
@lydatech It's the Pomodoro timer.
Bartek Lewandowski
@Jabarlew
Feb 02 2018 21:24
can anyone tell me why text stay of the top of menu http://c3ab9077.ngrok.io it doesnt make any sense lol
Ryan Christopher
@ryan-christopher
Feb 02 2018 21:25
@AdelMahjoub Going to stay away from requestAnimation frames because 1) never heard of them and 2) I should be able to do everything with what I do know about.
@NJM8 Worth a shot. Will try after lunch. Nom nom nom.
Nate Mallison
@NJM8
Feb 02 2018 21:26
@ryan-christopher :+1:
Adel
@AdelMahjoub
Feb 02 2018 21:26
@ryan-christopher requestAnimationFrame will pause if the window looses focus, and it updates according to the browser refresh rate, much more performant than setInterval and it don't waste cpu cycles
Nate Mallison
@NJM8
Feb 02 2018 21:27
requestAnimationFrame is also much more accurate, but for just making a simple timer for learning not needed
Adel
@AdelMahjoub
Feb 02 2018 21:28
@ryan-christopher you can still use the same setInterval loop for all the timers too
Ryan Christopher
@ryan-christopher
Feb 02 2018 21:29
Hmmm Certainly worth reading about and using in a refactor then, but best to proceed with what I've got.
Nate Mallison
@NJM8
Feb 02 2018 21:30
If you want to dive into the deep end with requestAnimationFrame: http://isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing
Ryan Christopher
@ryan-christopher
Feb 02 2018 21:31
Thanks! @NJM8
CamperBot
@camperbot
Feb 02 2018 21:31
ryan-christopher sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 294 | @njm8 |http://www.freecodecamp.org/njm8
Nate Mallison
@NJM8
Feb 02 2018 21:35
Sure thing! I needed to print it out and tuck it in my pillow for it to seep in but really helped me with some game stuff
AbrisM
@AbrisM
Feb 02 2018 21:46
@Jabarlew That site was blocked by my malware detection
Bartek Lewandowski
@Jabarlew
Feb 02 2018 21:48
@AbrisM dunno why its just ngrok
AbrisM
@AbrisM
Feb 02 2018 21:52
Is it a script? You can upload it to an IDE
Bartek Lewandowski
@Jabarlew
Feb 02 2018 21:53
its website i do for fun
AbrisM
@AbrisM
Feb 02 2018 21:53
Hmm alright
This is a tunnel yes? It auto-blocks tunnels
AFK
Bartek Lewandowski
@Jabarlew
Feb 02 2018 21:54
i would generate new link for you but i posted it on 2 more places :D
Matej Bošnjak
@mbosnjak01
Feb 02 2018 22:07
Free version of ngrok in most cases allows only 1 or 2 connections to a tunneled localhost link
every other get's blocked until those connected disconnect
Bartek Lewandowski
@Jabarlew
Feb 02 2018 22:08
oke solved thank you all for your time and help <3
aRtoo
@artoodeeto
Feb 02 2018 23:13
hey fam i got my front end cert but when i saved it, it has no name but its on my profile though
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 23:14
contact FCC support or something
@artoodeeto
aRtoo
@artoodeeto
Feb 02 2018 23:15
@MuhammedKarim i just finished just right now. ill wait
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 23:15
@artoodeeto oh ok cool
how long did it take u
aRtoo
@artoodeeto
Feb 02 2018 23:15
@MuhammedKarim a year bro. keep stoping. had some issues too.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 23:15
ohhh damn
i just started last night
aRtoo
@artoodeeto
Feb 02 2018 23:17
@MuhammedKarim i think you can finish this 3 months the most. check my github https://github.com/artoodeeto work really everyday.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 23:17
oh wow that takes 3 months
i spent the last month learning html css and js on w3schools
aRtoo
@artoodeeto
Feb 02 2018 23:18
@MuhammedKarim thats nice bro. ur ready. you can do it bro.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 02 2018 23:18
I'm trying bro, just sometimes i nearly give up tbh
Gulsvi
@gulsvi
Feb 02 2018 23:22
@artoodeeto Have you tried searching for the problem? This is the first thing that comes up in Google: https://github.com/freeCodeCamp/freeCodeCamp/issues/8238#issuecomment-213317449
Update your name in github, log in to freecodecamp, go to settings and update your profile from github
aRtoo
@artoodeeto
Feb 02 2018 23:24
@gulsvi let me try bro thanks
CamperBot
@camperbot
Feb 02 2018 23:24
artoodeeto sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2583 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Feb 02 2018 23:36
@artoodeeto :fist:
aRtoo
@artoodeeto
Feb 02 2018 23:41
@gulsvi hey bro the issue on github is just about displaying while using the link. mine is doing that. it display my name and date but not displaying when i download it. hmm
@gulsvi anyway bro thanks
CamperBot
@camperbot
Feb 02 2018 23:41
artoodeeto sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
Gulsvi
@gulsvi
Feb 02 2018 23:42
@artoodeeto Now that you are a certified front-end developer, you should try debugging why that happens. You'll see why.
Right-click -> Inspect
aRtoo
@artoodeeto
Feb 02 2018 23:43
@gulsvi yea inspect the script its just the screen size about the template, maybe this is on main script
Gulsvi
@gulsvi
Feb 02 2018 23:44
No, not quite
@artoodeeto It's absolute positioned text over a blank image. If you save the image, you don't get the text too.
image.png
aRtoo
@artoodeeto
Feb 02 2018 23:47
@gulsvi right. but isnt it supposed to render as a whole image?
Gulsvi
@gulsvi
Feb 02 2018 23:48
Not unless you take a screenshot of it
aRtoo
@artoodeeto
Feb 02 2018 23:54
@gulsvi hmm. right. but i think theres something they can do about this right? because i tried something like when the user print it wont display.
Gulsvi
@gulsvi
Feb 02 2018 23:55
@artoodeeto Yes, they could dynamically generate an image for you instead, but what they're doing is much easier.
aRtoo
@artoodeeto
Feb 02 2018 23:55
@gulsvi right. so no download then. i was about to create an issue. thanks to you bro
CamperBot
@camperbot
Feb 02 2018 23:55
artoodeeto sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
Gulsvi
@gulsvi
Feb 02 2018 23:56
image.png
:fist: @artoodeeto
aRtoo
@artoodeeto
Feb 02 2018 23:57
👊
thats mine bro. haha
@gulsvi
Gulsvi
@gulsvi
Feb 02 2018 23:57
:fireworks: