These are chat archives for FreeCodeCamp/HelpFrontEnd

20th
Nov 2017
Zachary
@Bazill03
Nov 20 2017 00:13

Any experts out there willing to do a quick code review of a small combat system I made? It works fine I just feel like there must be a much better way of going about it.

https://codepen.io/Bazill/pen/QOyxad

Ben Line
@Benwebdev
Nov 20 2017 00:14
I’ll take a look
Zachary
@Bazill03
Nov 20 2017 00:19
Thanks!
Christopher Susi
@chrisandsuch
Nov 20 2017 01:21
@Bazill03 You could start with a prompt and ask the user to choose. Then you could follow up with conditional statements based on the user’s input.
Zachary
@Bazill03
Nov 20 2017 01:22
Users choice for what attack they use?
Christopher Susi
@chrisandsuch
Nov 20 2017 01:26
@Bazill03 Yeah. You could make a nice switch statement to continue the story too.
喵星人
@dingjian333
Nov 20 2017 01:33
good morning
Christopher Susi
@chrisandsuch
Nov 20 2017 01:35
@Bazill03 Hey where did you get those cool old school sound effects?
Zachary
@Bazill03
Nov 20 2017 01:37
There’s a free sound effect site out there. Tons of great user submitted effects. Im on mobile right now but I can send it to you later.
Dustin Kreidler
@dkreidler
Nov 20 2017 01:42
Hey all, here's a possibly silly question: doing the portfolio project for the FCC front end devo projects: using Font Awesome icons for the social media links, I saw the awesome FreeCodeCamp icon. Yay! however... is there a publicly facing FCC "profile" page for various users? Clicking around on some of you just takes me back to github (also included with a swanky icon!) Thanks!
Dustin Kreidler
@dkreidler
Nov 20 2017 01:49
Ah, the magic of an incognito window... there IS a sort of profile page... freecodecamp.org/dkreidler reveals just how much of a n00b I am! yay!
Ken Haduch
@khaduch
Nov 20 2017 02:53
@dkreidler - yes, you can go to the freecodecamp.org/<yourUserName> page to see the lessons that were completed, etc.
dinesh
@1532j0004kg
Nov 20 2017 03:10
i have a doubt.
function load(){

  var nets = require('nets')
  nets({
    url: 'https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?',

    json : true
  },
    function(quot){
    $("p").text(quot.quoteText);

  });
}
it is not returning the quotetext !
what is the mistake?
Zachary
@Bazill03
Nov 20 2017 03:45
I may be wrong here, I’m pretty new as well. Looks like you’re targeting an element with the id of p. Not any p.
Kaz Baig
@kbaig
Nov 20 2017 04:11
@1532j0004kg do you have it in a pen or are you developing locally
are you using jquery with node?
Dylan Mayers
@DylanMayers
Nov 20 2017 04:11
Does anyone know how to remove an unwanted window in Sublime 3? I was installing a theme and had to edit my user settings in preferences to activate the theme but now I have a second window that i can't get rid off
_
Kaz Baig
@kbaig
Nov 20 2017 04:12
@DylanMayers might have a better time posting in the main room
dinesh
@1532j0004kg
Nov 20 2017 05:23
I am coding by codepen
Kaz Baig
@kbaig
Nov 20 2017 05:50
@1532j0004kg can you link it
require doesn't mean anything unless you're using node
what is nets?
Zachary
@Bazill03
Nov 20 2017 06:50
Anyone here have any good tips for doing branching dialogue? Having an object seems like the best way to do it but I run into issues when trying to apply eventhandlers to each dialogue response option.
Markus Kiili
@Masd925
Nov 20 2017 07:04
@Bazill03 Object oriented approach sounds good here.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 07:32
@Bazill03 You can take a look at the structure of that one: https://github.com/scottbw/dialoguejs (js code is here)
Zachary
@Bazill03
Nov 20 2017 07:35
I've actually been trying to impliment that but I'm running into some frustrating issues getting it to work.
I guess I need node? And browserify?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 07:36
@Bazill03 Oh, no. Just go to the js code and copy paste it and it should be fine ^^
Zachary
@Bazill03
Nov 20 2017 07:36
Okay, yeah I spent a solid 3 hours today trying to get it to work.
And I just need the js file correct? It also includes something called graffle in the repository.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 07:37
@Bazill03 The first line actually checks whether it is nodejs or browser js var Dialogue = (typeof exports !== 'undefined') ? exports : {};
Zachary
@Bazill03
Nov 20 2017 07:38
Do I just link it with a script tag?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 07:40

@Bazill03 Oh, and you need to change that:

Dialogue.load = function(actor, file){
    console.log(file);
    var fs = require('fs');
    fs.readFile(file, function (err, data) {
      if (err) {
        throw err; 
      }
      Dialogue.parse(actor, data.toString());
    });
}

Because var fs = require('fs') is a node module for loading files. You can either use xmlhttprequest, or jquery, or don't even load a file, but a string instead

@Bazill03 You can download it and link with a script tag, or put it in at the top of your code
Zachary
@Bazill03
Nov 20 2017 07:41
Well as of now I'm trying to make a fairly large game. Having dialogue trees in separate files would be a better option. How would I go about converting that line to jquery?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 07:53
@Bazill03 I would use an object to store all the sounds in: const sounds = { witheredIntroSound: new Audio('...'), ...}. Same for the weapons. Also, you can take a look at const if you already use let ;)
And useWeapon and useFireball seems really similar to me: Don't repeat yourself. Keep DRY :P
Zachary
@Bazill03
Nov 20 2017 07:55
Ah, that's a good idea, I'll definitely move all my sounds into an object.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 07:55
Zachary
@Bazill03
Nov 20 2017 07:55
@Otto-AA That hurts me Otto.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 07:58
@Bazill03 Learning to google is one of the best lessons you can learn ;P
And seriously, I think every result on this page answers your question ^^
Zachary
@Bazill03
Nov 20 2017 07:59
Are you referring to the combat functions? They do mostly repeat themselves with a small amount of variation but enough of a variation that I'm unsure of how I'd place them into a single function. However, that's definitely going to do on my to-do list.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 08:01
@Bazill03 If you can't put all of them into the same function, you can also export only the common parts of them into functions
Zachary
@Bazill03
Nov 20 2017 08:03
I have done that to some extent with the combatPrint and calcHealthBars functions.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 08:06
@Bazill03 :thumbsup:
Zachary
@Bazill03
Nov 20 2017 08:08
Thanks for all the help @Otto-AA
CamperBot
@camperbot
Nov 20 2017 08:08
bazill03 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 391 | @otto-aa |http://www.freecodecamp.org/otto-aa
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 08:25
@1532j0004kg As @kbaig pointed out, require is a function used in node.js (basically an extended version of javascript for the backend) so you can't use it in browsers. To get what you want, you probably should take a look at this stackoverflow question: https://stackoverflow.com/questions/21715620/using-jsonp-to-get-json-data-from-another-server
dinesh
@1532j0004kg
Nov 20 2017 10:12
@Otto-AA require function only will work on the node.js?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 10:13
image.png
Yes, in normal javascript it is undefined
dinesh
@1532j0004kg
Nov 20 2017 10:14
okay thanks @Otto-AA
CamperBot
@camperbot
Nov 20 2017 10:14
1532j0004kg sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @otto-aa |http://www.freecodecamp.org/otto-aa
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 10:14
(Except you say something like request = 'myString' and define it yourself
but that won't help you to import nodejs modules
dinesh
@1532j0004kg
Nov 20 2017 10:15
ohh okay..
but if i used in node.js it will work or not?
i mean my code.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 10:22
@1532j0004kg maybe. I tried it and it said Cannot find module 'nets' but I am not familiar with nodejs so maybe I forgot something
@1532j0004kg Oh, and nodejs is not for displaying a webpage. (backend->server stuff). So it doesn't has document/window/body and therefore also no <p> where you could insert the quote. So no, it won't work
dinesh
@1532j0004kg
Nov 20 2017 10:25
ohhh ok.
What's a Simple way to add a navigation bar like the one on this page?
Bartek Lewandowski
@Jabarlew
Nov 20 2017 11:06
Hello all
Alekamil
@Alekamil
Nov 20 2017 11:19
Hii
Sly Fox
@Gurukorgi
Nov 20 2017 11:33
can anyon here tell me the color code of the a picture if i show them /
lordkingstar
@lordkingstar
Nov 20 2017 11:35
Send the picture
Sly Fox
@Gurukorgi
Nov 20 2017 11:50
guys come on why are yalll not responding
Eric
@ericzomar
Nov 20 2017 11:50
why are yall not sending the picture?
heroiczero
@heroiczero
Nov 20 2017 11:50
@ericzomar try using bootstrap navbar: https://v4-alpha.getbootstrap.com/components/navbar/ this is bootstrap 4.0. If you want to use the bootstrap FCC teaches, try searching for "bootstrap 3 navbar"
Eric
@ericzomar
Nov 20 2017 11:51
oh hey thank you so much @heroiczero
CamperBot
@camperbot
Nov 20 2017 11:51
ericzomar sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2067 | @heroiczero |http://www.freecodecamp.org/heroiczero
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 11:52
hi
Eric
@ericzomar
Nov 20 2017 11:52
how's it going @PhilippeMarcMeyer ??
A-J Roos
@Asjas
Nov 20 2017 11:53
@Gurukorgi If you don't post a picture no one can help you.
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 11:53
it's ok i'm curious about sharing and chating about web dev
@ericzomar do you comme here on a regular basis ?
Eric
@ericzomar
Nov 20 2017 11:54
well, that's one of the reason this chat is here! you're in the right place :D
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 11:54
Not used to
Eric
@ericzomar
Nov 20 2017 11:55
I'm on this chat whenever i'm coding, which I do as often as i can
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 11:55
I've entered a company 6 months ago
Eric
@ericzomar
Nov 20 2017 11:55
that
that's great!
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 11:55
I do front wtih jquery and several plugins like datatable
and for the back it's C#
very new for me !
Linq mapping classes to the db etc
Eric
@ericzomar
Nov 20 2017 11:56
so you're having trouble learning c#??
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 11:56
No not really
I love js @PhilippeMarcMeyer ut for the front I used to code with 4th dimension in a procédural way
I love js butut for the back I used to code with 4th dimension in a procédural way
but i love object expecially the js way !
th most difficult was not js or c# but git
Eric
@ericzomar
Nov 20 2017 11:58
that's exciting, I hear js and c# are very similar
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 11:59
Yes it's existing
we get our data from the back thru ajax queries
Eric
@ericzomar
Nov 20 2017 11:59
what is git exactly?
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 11:59
it's a versionning tool
Eric
@ericzomar
Nov 20 2017 12:00
oh okay just like github
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:00
it allos sharing code with the team
A-J Roos
@Asjas
Nov 20 2017 12:00
Github is based on git
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:00
when you've never used a versionning tool it's a bit dangerous at the beginning !
be cause you can overwrite the job of workmates !!!!
in freecodecamp you learn node and react
Eric
@ericzomar
Nov 20 2017 12:02
yea, exactly you don't want to accidentally destroy somebody's work or change a piece of code that causes unknown problems
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:02
i'm personnaly interested in vue.js
Eric
@ericzomar
Nov 20 2017 12:02
what's vue.js?
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:03
trying to watch videos during lunch time
it's a js framework
responsible for managing the vue
Eric
@ericzomar
Nov 20 2017 12:03
what's a vue?
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:03
it means rendering a div for example
Eric
@ericzomar
Nov 20 2017 12:04
OH okay
that's cool I can't wait to learn about all of this stuff
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:04
it full of tools enbling you to loop or test and generate html tables list very easily
are you following the tutorials on freecodecamp ?
they are great
Eric
@ericzomar
Nov 20 2017 12:05
yea, working through the tutorials now,
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:07
and you'll learn all your life ! Hope you like that ! :-)
Eric
@ericzomar
Nov 20 2017 12:07
haha yep! that's definitely one of the perks of this work
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:08
i've followed the css tuto even if i m not a beginner and i did me good
we use bootstrap at the company, very covenient
Eric
@ericzomar
Nov 20 2017 12:10
yea, i've never heard of bootstrap before but the front-end projects are forcing me to use it a lot and I can definitely see myself using it all the time
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:11
that's not difficult. very less that frameworks
Eric
@ericzomar
Nov 20 2017 12:12
yea, you just throw in some bootstrap classes here and there and you have a really nice website foundation in no time at all
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:12
it allows you to code the a nice design faster
modals are easily made, drop downs and so on
Eric
@ericzomar
Nov 20 2017 12:14
yea but what are the limits? if you're building a very unique custom webpage does bootstrap become less useful??
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:16
@Gurukorgi you can easily get a color code with a tool like http://www.photofiltre.com/
@Gurukorgi it just photo editing : you click on a pixel and get the color code
@Gurukorgi it's also usefull to mesure the width and the height of an element on a model and size your html accordingly
Sly Fox
@Gurukorgi
Nov 20 2017 12:19
oh thanks let me try it out
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:20
@Gurukorgi there is a free version !
@Gurukorgi it's the one i use
Sly Fox
@Gurukorgi
Nov 20 2017 12:20
how do i use it when the picture is in my computer ? @PhilippeMarcMeyer
secondly i ma using linux
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:22
@Gurukorgi just launch the app and oopen the picture or copy the picture to the clipboard as a new picture
linux is great i installed ubuntu on my daughter laptop this weekend but i dont know it very well as i work on windows
just upload your picture to this site ans clic on it : the color code is then given to you
Sly Fox
@Gurukorgi
Nov 20 2017 12:26
thanks
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:26
you are welcome
Sly Fox
@Gurukorgi
Nov 20 2017 12:27
let me try it out
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 12:35
Sly Fox
@Gurukorgi
Nov 20 2017 12:35
oooh
philippe MEYER
@PhilippeMarcMeyer
Nov 20 2017 12:44
:-)
tundeiness
@tundeiness
Nov 20 2017 12:45
hi folks. I have a concern that needs to be addressed. I don't know if it's only me, but I think codepen does not behave like a normal browser. I mean I have had to alter somethings in codepen and when I get to real browsers it's not what I viewd exactly in codepen. Anyone with heads up on how to go about this?
Sly Fox
@Gurukorgi
Nov 20 2017 12:48
@tundeiness thats very true
Eric
@ericzomar
Nov 20 2017 12:48
are you making sure to import namespaces to your "normal browser" code???
Sly Fox
@Gurukorgi
Nov 20 2017 12:48
especially when you try them out on chrome and firefox
korzo
@korzo
Nov 20 2017 12:49
@tundeiness that's because code on codepen runs inside iframe, not top frame
Sly Fox
@Gurukorgi
Nov 20 2017 12:49
but i think yoiu should use the @media key frames for the respective browsers
@korzo can media queries solve them or do you have a soluton ?
tundeiness
@tundeiness
Nov 20 2017 12:50
@Gurukorgi it's so frustrating right now ..I don't even know what to do @korzo
@Gurukorgi well...does that mean i have to use media frames for both desktop and mobile version all thorugh?
Eric
@ericzomar
Nov 20 2017 12:51
almost 5AM for me guys, it's time for bed goodnight everyone!
Simon Cordova
@gbsimon87
Nov 20 2017 12:53
Go canucks @ericzomar ;)
tundeiness
@tundeiness
Nov 20 2017 12:55
@Gurukorgi how?
@Gurukorgi webkit and other specifications?
Sly Fox
@Gurukorgi
Nov 20 2017 12:58
for example there are some annimatons that work very when done and then previewed on chrome for example but when you use that animation on a diffferent browser such as firefox it will not work
so you have to check if what you do is browser dependent or independent
korzo
@korzo
Nov 20 2017 13:00
@tundeiness @Gurukorgi codepen is not so good for portfolio types projects. If it cause so much trouble, use github pages, http://surge.sh/ or https://www.bitballoon.com/
tundeiness
@tundeiness
Nov 20 2017 13:02
@Gurukorgi yeah I know about that. however what I'm doing does not involve animations. just mere positioning and the elements keeps shifting when it gets to other browsers.
Sly Fox
@Gurukorgi
Nov 20 2017 13:05
then try editing it using the browsers inspector tools then you can copy the css to your main code , the inspector tool is just as easy as using code pen , but it is on your browser and offline
no i am about to try it after the class i am having right now
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:11
@tundeiness Can you give us an example? You probably just forget to include the linkings (e.g. bootstrap, jquery, ...) outside of codepen ;)
Sly Fox
@Gurukorgi
Nov 20 2017 13:12
thats true
tundeiness
@tundeiness
Nov 20 2017 13:17
@Otto-AA but I did.. this is the link to the jquery i'm using https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js and i'm not using bootstrap for this project though.
Sly Fox
@Gurukorgi
Nov 20 2017 13:18
thats not the project thats the jquery library
show the project
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:19
@tundeiness @Gurukorgi And I wouldn't suggest using the inspector tools for writing programs. They are definitely an amazing tool for finding bugs and looking into other websites, but for writing websites I would recommend real editors (vs code, brackets, atom, ...). Some of them also have a live preview and they all have useful editing features the inspector hasn't got.
@tundeiness Yeah, could you please link your codepen ?
Sly Fox
@Gurukorgi
Nov 20 2017 13:20
i use atom
but i dont think it has any preview
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:21
First search result for "atom live preview": https://atom.io/packages/atom-html-preview
Probably works ;)
Sly Fox
@Gurukorgi
Nov 20 2017 13:23
wait i dont have "npm" package manager on my linux and i dont know how to install it in my ubuntu (linux)
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:25
apm is bundled and installed automatically with Atom. You can run the Atom > Install Shell Commands menu option to install it again if you aren't able to run it from a terminal (macOS only).
its apm not npm
@Gurukorgi
Tom
@moT01
Nov 20 2017 13:29
fun fact: if you put an s at the beginning of the url it wont show the preview https://s.codepen.io/highness/pen/LjBZgr
tundeiness
@tundeiness
Nov 20 2017 13:29
@Otto-AA yeah I use sublime or visual code and I have a live server plugin to view the codes live.
@moT01 nice.....:)
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:30
@tundeiness :thumbsup:
image.png
And when I used the zip download from codepen it looks exactly the same...
At the right bottom in codepen
tundeiness
@tundeiness
Nov 20 2017 13:31
@Otto-AA but I don't want the buttons down there. it should be in the middle
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:32
@tundeiness But that has nothing to do with codepen, only with the screen size. (Which is different than in full screen because codepen has editor views)
Eric K
@EricK425
Nov 20 2017 13:33
Can someone help me with Bootstrap spacing? I'm trying to get rid of left margin that is default in rows and cannot do it using ml-0 or by just using CSS.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:33
@EricK425 Can you link to it somehow? (Codepen, ...)
tundeiness
@tundeiness
Nov 20 2017 13:33
@Otto-AA yes it does. you see the buttons that i placed relatively in codepen should reflect the same in the normal browser and that is my issue.
Sly Fox
@Gurukorgi
Nov 20 2017 13:34
@Otto-AA i still don't get it
Tiago Correia
@tiagocorreiaalmeida
Nov 20 2017 13:34
"Bootstrap4: Comes with .no-gutters out of the box. source: https://github.com/twbs/bootstrap/pull/21211/files"
@EricK425
A-J Roos
@Asjas
Nov 20 2017 13:34
@tundeiness Why not set .wrap { top: 50%; }? you are setting it to 72%which pushes it down
Eric K
@EricK425
Nov 20 2017 13:34
@Otto-AA https://codepen.io/EricK425/pen/oopeMz this is a very ugly start but do you see how the 1 button needs to remove its left margin to line up with the others?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:35
@tundeiness In the picture I sent: On the left side is codepen, on the right "normal browser". They are quite the same, aren't they? Or do I completely misunderstand your question?
tundeiness
@tundeiness
Nov 20 2017 13:35
@Asjas okay...I had done that earlier but let me try again.
A-J Roos
@Asjas
Nov 20 2017 13:36
@Otto-AA I think he wants the button middle center? Am I correct in thinking that? @tundeiness
tundeiness
@tundeiness
Nov 20 2017 13:37
@Asjas yes i do
A-J Roos
@Asjas
Nov 20 2017 13:37
@tundeiness It will be displaying incorrect in editor view. You can't use that reliably. You need to use Full Page view to see it in the middle
Sly Fox
@Gurukorgi
Nov 20 2017 13:37
the app is not workking or maybe its taking too long
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:37
@Gurukorgi amp is automatically installed with atom. It is the atom package manager. See https://github.com/atom/apm
tundeiness
@tundeiness
Nov 20 2017 13:37
@Asjas i actually did 50% but it's not working the way I think it should.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:38
@Asjas @tundeiness You can also move the code panel to the top if that helps
A-J Roos
@Asjas
Nov 20 2017 13:38
@tundeiness check this link
tundeiness
@tundeiness
Nov 20 2017 13:38
@Asjas but in full page I do not have access to the codes.
Sly Fox
@Gurukorgi
Nov 20 2017 13:38
@Otto-AA so how do i open or use the previewer on atom ?
Eric K
@EricK425
Nov 20 2017 13:38
@tiagocorreiaalmeida Thank you, I got rid of the left margin but now my buttons still dont fully align. I have the bottom set of rows that are slightly off https://codepen.io/EricK425/pen/oopeMz
CamperBot
@camperbot
Nov 20 2017 13:38
erick425 sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 447 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Sly Fox
@Gurukorgi
Nov 20 2017 13:38
@EricK425 your app is unresponsive
A-J Roos
@Asjas
Nov 20 2017 13:38
@tundeiness Correct. You write code in Editor View and use Full Page view to see how it looks for someone who isn't using editor view
tundeiness
@tundeiness
Nov 20 2017 13:39
@Otto-AA not helping. My code panel is actually on the left hand side.
Tiago Correia
@tiagocorreiaalmeida
Nov 20 2017 13:39
@EricK425 ally or use the entire width?
tundeiness
@tundeiness
Nov 20 2017 13:39
@Asjas yup
Sly Fox
@Gurukorgi
Nov 20 2017 13:39
hmmm
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:39
@Gurukorgi Most likely by typing apm install atom-html-preview into your console. But I don't use Atom, so I don't know
Tiago Correia
@tiagocorreiaalmeida
Nov 20 2017 13:40
align*
Eric K
@EricK425
Nov 20 2017 13:40
@Gurukorgi You mean not responsive design or its not working for you to preview?
A-J Roos
@Asjas
Nov 20 2017 13:40
@tundeiness Did you see that link I posted? It's a fork of your codepen. You'll see that the buttons are centre and in the middle of the screen. The option to do that is .wrap { top: 50%; }
Eric K
@EricK425
Nov 20 2017 13:40
@tiagocorreiaalmeida I know how I can work around it. I can place the upper buttons inside of another row and have them span the full width and they should all line up
tundeiness
@tundeiness
Nov 20 2017 13:41
@Asjas yes I did but it's not centered still
Eric K
@EricK425
Nov 20 2017 13:41
@Gurukorgi The buttons havent been coded yet Im just trying to get the design looking right
Tiago Correia
@tiagocorreiaalmeida
Nov 20 2017 13:41
image.png
you want it like the first button is?
A-J Roos
@Asjas
Nov 20 2017 13:42
@tundeiness It's on my side center.
Eric K
@EricK425
Nov 20 2017 13:42
@tiagocorreiaalmeida That doesn't matter to me if the button spans the width, I just want all the buttons to line up along the left and look like a real calculator
@tiagocorreiaalmeida I can go mess with it now, the no-gutters is what I needed. Thank you. I faced a lot of trouble trying to use ml-0 under the spacing documentation
CamperBot
@camperbot
Nov 20 2017 13:43
erick425 sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
api offline
tundeiness
@tundeiness
Nov 20 2017 13:43
@Asjas none bro
Tiago Correia
@tiagocorreiaalmeida
Nov 20 2017 13:44
image.png
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:46
@tundeiness Can you post a screenshot of his fork? For me it is prefectly centered aswell (In both firefox and chrome)
Eric K
@EricK425
Nov 20 2017 13:46
@tiagocorreiaalmeida very close. do you still see how the 1 button isnt lined up now tot he right of the 4 button? If i put the 3 top rows all inside a new row and have then all span 12 I think eeryting will line up nicely.. Do you know how I can make the = button span vertically down and fill?
A-J Roos
@Asjas
Nov 20 2017 13:46
@tundeiness Here is a link to a screenshot. https://imgur.com/a/TQXYN. Would you not say that is center?
tundeiness
@tundeiness
Nov 20 2017 13:47
@Otto-AA he sent me a link...let me try and get it for you
A-J Roos
@Asjas
Nov 20 2017 13:47
@tundeiness We don't need that link. We have it in chat
We need you to post a screenshot
Tiago Correia
@tiagocorreiaalmeida
Nov 20 2017 13:47
@EricK425 youy are nesting cols inside calls and in others youy dont do that that's where the issue is coming from some have marguins others dont
tundeiness
@tundeiness
Nov 20 2017 13:47
@Otto-AA check this link
Tiago Correia
@tiagocorreiaalmeida
Nov 20 2017 13:48
        <div class="row no-gutters">
          <div class="col-md-10 no-gutters">
            <div class="col-md-4">
              <button class="reg"> <p class="btn"> 1 </p></button>
            </div>
            <div class="col-md-4 no-gutters">
              <button class="reg"> <p class="btn"> 2 </p></button>
            </div>
            <div class="col-md-4">
              <button class="reg"> <p class="btn"> 3 </p></button>
            </div>
            <div class="col-md-12">
              <div class="col-md-8">
                <button class="reg btn-block"> <p class="btn"> 0 </p></button>
              </div>
              <div class="col-md-4">
                <button class="reg btn-default"> <p class="btn"> . </p></button>
              </div>
            </div>

          </div>
          <div class="col-md-2">
            <button class="reg"> <p class="btn"> &equals; </p></button>
          </div>
        </div>
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:48
@tundeiness I would add position: relative; to .scale, so the search positions itself relative to the image and not the body
A-J Roos
@Asjas
Nov 20 2017 13:48
@tundeiness Can you read my messages? I said we have that link. It's in the chat. We DO need a screenshot
Eric K
@EricK425
Nov 20 2017 13:48
@tiagocorreiaalmeida Exactly, that's what I was saying. The top 3 rows are not nested but I nested the bottom 2 bc I wanted to save that vertical space for the equals button
tundeiness
@tundeiness
Nov 20 2017 13:48
@Asjas okay...can you forward the same to him
A-J Roos
@Asjas
Nov 20 2017 13:49
@tundeiness I do not have access to your computer. YOU need to post a screenshot. I can't post your screenshot
tundeiness
@tundeiness
Nov 20 2017 13:49
@Asjas sorry about that
A-J Roos
@Asjas
Nov 20 2017 13:49
But do as @Otto-AA says. Add position: relative; and test
Eric K
@EricK425
Nov 20 2017 13:51
@tiagocorreiaalmeida Last question, can you fill buttons vertically in the same manner you can fill horizontally with btn-block?
Sly Fox
@Gurukorgi
Nov 20 2017 13:51
@Otto-AA i dont even know how to get to the consol its all messed up
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:51
@Gurukorgi lol
Eric K
@EricK425
Nov 20 2017 13:51
@tiagocorreiaalmeida I meant to ask, is there a vertical equivalent to btn-block.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:52
@Gurukorgi Then ask google how to open a terminal ;) Google knows soooo much ^^
tundeiness
@tundeiness
Nov 20 2017 13:54
@Otto-AA errrm well...but side margins are gone?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:55
@tundeiness #screenshot?
tundeiness
@tundeiness
Nov 20 2017 13:55
@Otto-AA worked like a charm
@Otto-AA tinkered somethings and it re-scaled.
@Otto-AA the sizing of .scaled is still altered and not centered
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 13:57
@tundeiness Nice to hear :)
Nonetheless, when someone asks for a screenshot please give it to them. It would be soooo much easier ;)
Tiago Correia
@tiagocorreiaalmeida
Nov 20 2017 13:57
@EricK425 not that I can remeber
tundeiness
@tundeiness
Nov 20 2017 13:58
@Otto-AA let me send you one please.
tundeiness
@tundeiness
Nov 20 2017 14:04
@Otto-AA i can't do screenshot please
@Otto-AA but as you can see, the positioning of the main container is still off.
A-J Roos
@Asjas
Nov 20 2017 14:05
@tundeiness You disabled margin: 35px auto;. Which is pushing everything to the left.
The auto part centers it in the middle. The 35px is top and bottom margin
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 14:06
@tundeiness Do you want that...?
tundeiness
@tundeiness
Nov 20 2017 14:07
@Otto-AA no
tundeiness
@tundeiness
Nov 20 2017 14:07
@Asjas yes I did. You see when I enabled it again, the buttons went off again
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 14:07
@tundeiness
tundeiness
@tundeiness
Nov 20 2017 14:07
@Otto-AA yeah
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 14:08
@tundeiness In the left of the picture is the code for it
tundeiness
@tundeiness
Nov 20 2017 14:10
@Otto-AA you changed it back to position: absolute?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 14:11
But why can't you do screenshots? Most computers have an print key which makes one (you could edit it to show only important parts), windows has a "snipping tool", other operating systems most likely something and similar, browsers have addons for that (firefox already automatically installed, just right click->take screenshot) and probably I forgot other methods...
There are so many options to do this O.o
@tundeiness
tundeiness
@tundeiness
Nov 20 2017 14:11
@Otto-AA i'm using chrome
@tundeiness yes, changed to absolute
tundeiness
@tundeiness
Nov 20 2017 14:17
wikiview.png
@Otto-AA wikiview.png
@Otto-AA still not working for me I guess...dunno why
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 14:18
did you add transform: translate(-50%, -50%)?
and does the pen I sent you works?
@tundeiness
tundeiness
@tundeiness
Nov 20 2017 14:21
@Otto-AA yes i did.. still the same
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 14:22

and does the pen I sent you works?

@tundeiness

tundeiness
@tundeiness
Nov 20 2017 14:24
@Otto-AA yes it does...the issue actually is that it has no more margin at the top and at the bottom of .scaled which is the main container
rscales02
@rscales02
Nov 20 2017 14:26
when you use setInterval(function(), 5000) that should delay for 5 seconds before running the first time, correct?
Tiago Correia
@tiagocorreiaalmeida
Nov 20 2017 14:30
correct
rscales02
@rscales02
Nov 20 2017 14:33
@tiagocorreiaalmeida it seems my computer doesn't understand that :laughing:
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 14:33
@rscales02 How comes that?
rscales02
@rscales02
Nov 20 2017 14:35
function loseTimer(combination) {
            $('#counter').val('! !');
            loseAudio.play();
            i = 0;
            patternInditcator(combination);
        }

function gameStart(combo, time) {
    var combination = combo || [];
    var next = callNext();
    var i = 0; //increment
    var score = $('#counter').val();
    var click = false; //var to check game time out
    var dTime = time || 5000;
    var repeatDelay = null;

    combination.push(next);
    console.log(combination);

    //interval to space out pattern activation
    patternInditcator(combination);

    //end-of-game timeout due to inactivity
    if (!click) {
        setTimeout(function() {
            repeatDelay = setInterval(loseTimer(combination), dTime);
        }, dTime);
    }
...
The loseAudio plays immediately...
Or it played immediately before I used setTimeout which has been removed...
Markus Kiili
@Masd925
Nov 20 2017 14:38
@rscales02 If you wan't loseTimer to run periodically, you need to pass the function into setInterval: repeatDelay = setInterval(loseTimer, dTime);
rscales02
@rscales02
Nov 20 2017 14:40
@Masd925 don't I do that with repeatDelay = setInterval(loseTimer(combination), dTime);?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 14:40
@rscales02 currently setInterval(loseTimer(combination), dTime); this will call loseTimer(combination) and return the result (=> setInterval(undefined, dTime);) instead of passing the function as argument
Markus Kiili
@Masd925
Nov 20 2017 14:40
Your code calls the function and actually passes the return value to setInterval, and that return value is undefined.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 14:40
@Masd925 :thumbsup:
Markus Kiili
@Masd925
Nov 20 2017 14:41
@rscales02 So you just pass the function into setInterval and the browser automatically calls it under the hood (you don't call it at all).
rscales02
@rscales02
Nov 20 2017 14:41
@Masd925 @Otto-AA @tiagocorreiaalmeida thanks!
CamperBot
@camperbot
Nov 20 2017 14:41
rscales02 sends brownie points to @masd925 and @otto-aa and @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @otto-aa |http://www.freecodecamp.org/otto-aa
:cookie: 448 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
:star2: 4577 | @masd925 |http://www.freecodecamp.org/masd925
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 14:42
@rscales02 you could either do setInterval(loseTimer, dTime) to pass the function without parameters or setInterval(function() {loseTimer(combination);}, dTime) to pass it the combination
(In ES this would be setInterval(() => loesTimer(combination), dTime))
rscales02
@rscales02
Nov 20 2017 14:52
@Otto-AA that was exactly my next question, thanks!
CamperBot
@camperbot
Nov 20 2017 14:52
rscales02 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
api offline
kobe561
@kobe561
Nov 20 2017 15:48
hey guys
Kaz Baig
@kbaig
Nov 20 2017 15:48
@kobe561 :wave:
kobe561
@kobe561
Nov 20 2017 15:49
can i get some criticism on this page im making?
im working on designing it first
Markus Kiili
@Masd925
Nov 20 2017 16:00
@kobe561 Sure. Post what you have done.
Ken Haduch
@khaduch
Nov 20 2017 16:16
@kobe561 - if you have a URL of something you're working on, post it and you can get some opinions...
orestegiacche
@orestegiacche
Nov 20 2017 16:29
Hey everyone, I'm working on the tribute page for the front end project. I'm trying to center a block of text using bootstrap container-row-column but for some reason it's stacking the columns vertically rather than horizontally... Does anybody know why this might be happening?
Markus Kiili
@Masd925
Nov 20 2017 16:30
@orestegiacche Post the relevant code please.
Or a link if you have it on Codepen for example.
orestegiacche
@orestegiacche
Nov 20 2017 16:30
<div class="container">
<div class="row">
<div class="col-2-md"><p>Hello</p></div>
<div class="col-8-md"><p>Test text</p></div>
<div class="col-2-md"><p>Hello</p></div>
</div>
</div>
This is inside of a well
Markus Kiili
@Masd925
Nov 20 2017 16:31
@orestegiacche col-md-2 etc
not col-2-md
orestegiacche
@orestegiacche
Nov 20 2017 16:33
So dumb of me...
Thanks
But actually I just changed it and the problem is the same
<div class="container">
<div class="row">
<div class="col-md-2"><p>Hello</p></div>
<div class="col-md-8"><p>Test text</p></div>
<div class="col-md-2"><p>Hello</p></div>
</div>
</div>
Like this?
Markus Kiili
@Masd925
Nov 20 2017 16:34
@orestegiacche Post the whole html if it is not too big.
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:36

hi,
For the challenge seek and destroy, I wrote this code

function destroyer(arr) {
  var argumentsArr = Array.from(arguments);
  var argLength = argumentsArr.length;
  var array = arr;
  var length = array.length;
  for(i=0;i<length;i++){
    if(argumentsArr.indexOf(array[i])!=-1){
      delete array[i];
    }
  }
  return array;
}

destroyer([1, 2, 3, 1, 2, 3], 2, 3);

and the result is
[1, null, null, 1, null, null]
so what should I change to not get null, and completely remove the element?

Markus Kiili
@Masd925
Nov 20 2017 16:36
@KshitijaaJaglan Don't use delete to remove array elements. Use array methods for that.
Those are actually holes in the array (elements that don't exist at all).
pop, shift, splice.
Here the filter method helps a lot.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 16:37
@orestegiacche What about this? https://codepen.io/A_A/pen/KyQXEw?editors=1000
(uses bootstrap 3)
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:37
I tried splice, but I got confused at one point
wait let me post the code
Tom
@moT01
Nov 20 2017 16:38
the instructions recommend the filter method for a reason -- i would use that @KshitijaaJaglan
orestegiacche
@orestegiacche
Nov 20 2017 16:38
@Otto-AA Yea so the same problem is showing up for me where it all gets stacked on top of eachother
Does it look different to you?
Markus Kiili
@Masd925
Nov 20 2017 16:39
@orestegiacche Are you sure that Bootstrap is imported?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 16:39
@orestegiacche I get this: https://screenshots.firefox.com/lthdVABcsDBIxsju/codepen.io
Is that what you want?
orestegiacche
@orestegiacche
Nov 20 2017 16:39
Yea bootstrap is loaded for sure
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:39
@orestegiacche its working for me
orestegiacche
@orestegiacche
Nov 20 2017 16:39
@Otto-AA Yea so for me it looks different!
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:39
image.png
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 16:40
@orestegiacche If you are in my pen or in yours?
orestegiacche
@orestegiacche
Nov 20 2017 16:40
@Otto-AA In yours
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 16:40
Hmmm :/
orestegiacche
@orestegiacche
Nov 20 2017 16:40
And it still stacks horizontally.....
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:40
@orestegiacche try clearing cache
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 16:40
Yeah, ctrl+shift+r in my browser
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:41
@orestegiacche you want it to stack horizontlly or vertically?
orestegiacche
@orestegiacche
Nov 20 2017 16:42
I wanted it horizontally... So weird, so now I cleared the cache and it worked in the pen that A_A made but it didn't work in the one I made
But the code is the same, I copy pasted it to make sure
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:43
can you post a screenshot of the code and result
orestegiacche
@orestegiacche
Nov 20 2017 16:44
Yea!
Can I just post the link in here?
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:46
ya! u can
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:46
or just copy paste the img
its vertical till here
image.png
and horizontal if i increase d width
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 16:47
@orestegiacche Seems fine to me
oh
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:47
image.png
with increased width
orestegiacche
@orestegiacche
Nov 20 2017 16:48
Oh..... Is it just because I have to make columns using different sizes then?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Nov 20 2017 16:48
@orestegiacche you can add this to your class to also target small sizes: col-xs-2
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:48
ya coz md refers to medium sized screens
n after that, they stack vertically
and be responsive
orestegiacche
@orestegiacche
Nov 20 2017 16:49
Ok perfect thanks yea that makes sense
It was my first time using it
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:49
u can also try flex box
orestegiacche
@orestegiacche
Nov 20 2017 16:49
How does that work?
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:49
pure css
with display: flex;
and a few other properties
orestegiacche
@orestegiacche
Nov 20 2017 16:51
Oh awesome ok thanks
Ghost
@ghost~593024a8d73408ce4f63eac0
Nov 20 2017 16:51
:sparkles: :+1: :sparkles:
Michiel
@MichielHuijse
Nov 20 2017 16:56
Hi I am working on the updated inventory project. This creates an infinite loop, but I am not sure why can someone see it?

function updateInventory(arr1, arr2) {
  // All inventory must be accounted for or you're fired!

  // Check if arr1 one has value of arr2.
  var updatedArr = arr1;
  var flatArr1 = [];

  // Makes a flat array of the current inventory.
  for (var h = 0; h < arr1.length; h++) {
    flatArr1.push(arr1[h][1]);
  }

  console.log(flatArr1);

  // Compares every newInventory article with every one in the current Inventory array.
  for (var j = 0; j < arr2.length; j++) {
    var newItem = arr2[j][1];
    console.log(newItem);
    for (var i = 0; i < arr1.length; i++) {
      if (flatArr1.indexOf(newItem)=== -1 && updatedArr.indexOf(newItem)===-1){
        updatedArr.push(arr2[j]);
        console.log('if');
      }
      else if (arr1[i][1] === newItem) {
        updatedArr[i][0] = arr1[i][0] + arr2[j][0];
        console.log(arr2);
      console.log('if else');
      }

      else {
        console.log('do nothing');
      }
    }
  }

  console.log(updatedArr);
}

// Example inventory lists
  var curInv = [
    [21, "Bowling Ball"],
    [2, "Dirty Sock"],
    [1, "Hair Pin"],
    [5, "Microphone"]
  ];

  var newInv = [
    [2, "Hair Pin"],
    [3, "Half-Eaten Apple"],
    [67, "Bowling Ball"],
    [7, "Toothpaste"]
  ];

  updateInventory(curInv, newInv);
Moisés Man
@moigithub
Nov 20 2017 16:57
var updatedArr = arr1;
that DONT creates a copy.. but a reference to the same array @MichielHuijse
soo when u do
for (var i = 0; i < arr1.length; i++) {
      if (flatArr1.indexOf(newItem)=== -1 && updatedArr.indexOf(newItem)===-1){
        updatedArr.push(arr2[j]); ///<-- u keep increasing the array u iterating (arr1) causing infinite loop
Michiel
@MichielHuijse
Nov 20 2017 17:00
@moigithub wow thanks!
CamperBot
@camperbot
Nov 20 2017 17:00
michielhuijse sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3714 | @moigithub |http://www.freecodecamp.org/moigithub
Christopher Susi
@chrisandsuch
Nov 20 2017 17:47
Hey all, I’m working through the FCC challenges at the moment. Can anyone give me some good feedback on this tribute page? I know my styling/design is pretty bad, so any tips there would be especially helpful lol
Kaz Baig
@kbaig
Nov 20 2017 17:52
@chrisandsuch I think that's a pretty good start to the projects. I'd add a little blurb about who the person. I don't know enough about bootstrap to comment too much but I see you put the heading in a navbar. You don't want to do that as it's not a navbar
And why are your timeline milestones anchor tags? Maybe I'm missing something there
Rajanikant Deshmukh
@aruke
Nov 20 2017 17:53
Or may be @chrisandsuch you need to remove anchors from a tags of timeline
Sorin Ruse
@sorinr
Nov 20 2017 17:54
@chrisandsuch i would not use <nav> tag in this page as u don't have any navigation in there. a <header> tag will be more semantic in this case.
Tom
@moT01
Nov 20 2017 17:58
@chrisandsuch looks good - good use of a video on the page, don't see that much in this project
yea - as they stated - i would not use ancor tags unless you're linking to somewhere or making something happen, feels misleading
the font and the picture at the bottom seem small for me, personal preference maybe.
  • get that code of yours properly spaced and indented, or at least make it consistent
Rajanikant Deshmukh
@aruke
Nov 20 2017 18:01
Hello! I need help with Twitchtv API project. Do I need to show the status of channels other than freeCodeCamp like shown in example? Because in user stories it is mentioned that “I can see whether Free Code Camp is currently streaming on Twitch.tv.” only
Tom
@moT01
Nov 20 2017 18:03
looks like it only asks for that one - but i would put a few more in there if i were you
Rajanikant Deshmukh
@aruke
Nov 20 2017 18:05
in that case I would like to dedicate that page for freeCodeCamp's status only 😄
Christopher Susi
@chrisandsuch
Nov 20 2017 18:06
@kbaig @rajanikantdeshmukh @sorinr @moT01 Thanks everyone. I’ll be sure to make changes
CamperBot
@camperbot
Nov 20 2017 18:06
chrisandsuch sends brownie points to @kbaig and @rajanikantdeshmukh and @sorinr and @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @rajanikantdeshmukh |http://www.freecodecamp.org/rajanikantdeshmukh
:cookie: 912 | @mot01 |http://www.freecodecamp.org/mot01
:cookie: 434 | @kbaig |http://www.freecodecamp.org/kbaig
:star2: 1361 | @sorinr |http://www.freecodecamp.org/sorinr
Rajanikant Deshmukh
@aruke
Nov 20 2017 18:07
I’m new here on Gitter.. So what’s that about sending points?
Tom
@moT01
Nov 20 2017 18:08
click a name and say thanks or ty or one of the other keywords to send some point
Kaz Baig
@kbaig
Nov 20 2017 18:08
@rajanikantdeshmukh Just a way to reward someone for helping out. A (likely) good indicator of how helpful/active they've been in the community
Rajanikant Deshmukh
@aruke
Nov 20 2017 18:08
Cool! Far better than Slack I think
I also completed a project today, here https://codepen.io/alpharion/full/ZarXBz/
Kaz Baig
@kbaig
Nov 20 2017 18:19
@rajanikantdeshmukh Good stuff. I'd try to contrast the search result heading and description a bit via color shades and also add a bit of interaction UI. Perhaps a button depress situation when you click a result?
Rajanikant Deshmukh
@aruke
Nov 20 2017 18:21
So darken the text color in results and ui interaction on result cards you mean?
Kaz Baig
@kbaig
Nov 20 2017 18:22
@rajanikantdeshmukh Indeed
I'd darken the headings of the results
sharkantropo
@sharkantropo
Nov 20 2017 18:46
Hey, a quick question. Could anyone explain me this sintaxis?:
anything === value1 ? value2 : value1
Kaz Baig
@kbaig
Nov 20 2017 18:47
@sharkantropo ternary operator
if this ? do this : otherwise, do this
It evaluates down to either the left or the right of the colon
So you can assign or return it
const a = 1 < 2 ? 'hello' : 'world'; // 'hello'
Rajanikant Deshmukh
@aruke
Nov 20 2017 18:49
@kbaig I did the changes but they aren’t much visible. Thanks for feedback!
CamperBot
@camperbot
Nov 20 2017 18:49
rajanikantdeshmukh sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 436 | @kbaig |http://www.freecodecamp.org/kbaig
Kaz Baig
@kbaig
Nov 20 2017 18:50
// return the lesser of two values
function (a, b) {
  return a < b ? a : b;
}
@sharkantropo
sharkantropo
@sharkantropo
Nov 20 2017 18:50
@kbaig I understand now. Thanks a lot.
CamperBot
@camperbot
Nov 20 2017 18:50
sharkantropo sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 437 | @kbaig |http://www.freecodecamp.org/kbaig
sharkantropo
@sharkantropo
Nov 20 2017 18:56
A pretty streamlined way compared to write if/ else if conditional. I think I'm going to use this instead from now on.
Kaz Baig
@kbaig
Nov 20 2017 18:57
@sharkantropo Just be very careful about the readability tradeoff
Zerka1982
@Zerka1982
Nov 20 2017 19:02
Hello guys,
I have a question if u don't mind. I created a page and I wanted to add some instructions for the users how to use the website. I don't know exactly the technical word, however, I am looking to add kind of animation text to indicate what each part is used for
you got my point ?
sharkantropo
@sharkantropo
Nov 20 2017 19:03
@kbaig of course, I'll try to add a doc comment everytime I use it. I saw this from a code without documentation comments, It was practically underadable for me, thus I'll try not to commit the same mistake.
Rajanikant Deshmukh
@aruke
Nov 20 2017 19:03
@Zerka1982 Are you looking for Feature Discovery?
Kaz Baig
@kbaig
Nov 20 2017 19:03
@Zerka1982 Not quite clear, beyond you wanting to animate text
@sharkantropo Sounds like a plan
Zerka1982
@Zerka1982
Nov 20 2017 19:04
Not animating the text but , for example once the user open the page, they can see a popup windows to indicate for example insert your location
Rajanikant Deshmukh
@aruke
Nov 20 2017 19:05
Zerka1982
@Zerka1982
Nov 20 2017 19:05
Let's say when have a form. IT contains input areas. Once the user opens the page, they can have kind of guide how to use the website
Kaz Baig
@kbaig
Nov 20 2017 19:06
@Zerka1982 You mean a modal?
Zerka1982
@Zerka1982
Nov 20 2017 19:06
kind of dialogs ...
Kaz Baig
@kbaig
Nov 20 2017 19:07
@Zerka1982 Like this?
Zerka1982
@Zerka1982
Nov 20 2017 19:07
you remember guys when first you registered to Free Code Camp. when you tried to use the chat application, there was a guide which appears indicating where to go and how to find a group ....
Not a modal
Kaz Baig
@kbaig
Nov 20 2017 19:07
slider?
mstellaluna
@mstellaluna
Nov 20 2017 19:08
@Zerka1982 do you mean your local community group or the FCC chat group listings?
Zerka1982
@Zerka1982
Nov 20 2017 19:09
Sorry guys, i couldn't express my idea
Some websites provide user with dialog box indicating how to use the website etc ...
Kaz Baig
@kbaig
Nov 20 2017 19:10
Maybe if you can find us an example
that's all there is as a guide .. things have been changed
Kaz Baig
@kbaig
Nov 20 2017 19:10
@mstellaluna He was using it as an example of UI he wants to implement
Zerka1982
@Zerka1982
Nov 20 2017 19:11
@mstellaluna I guess you are not following me :D
mstellaluna
@mstellaluna
Nov 20 2017 19:11
@kbaig the reference probably no longer exists so I don't remember lol
Kaz Baig
@kbaig
Nov 20 2017 19:12
@mstellaluna ah gotcha
Zerka1982
@Zerka1982
Nov 20 2017 19:13
user guide on how to use a website ...it appears once the user opens a page.
mstellaluna
@mstellaluna
Nov 20 2017 19:14
@Zerka1982 ohh that super long annoying introduction when you joined FCC for the first time
Kaz Baig
@kbaig
Nov 20 2017 19:14
@Zerka1982 Your best bet for us to be able to help is prob to find an example of something similar to your idea
Zerka1982
@Zerka1982
Nov 20 2017 19:14
@mstellaluna true
@mstellaluna exactly
long annoying introduction :D
That s what I am looking for :)
I wish to find some code examples that use the introduction ...
I don't know the technical word for that , sorry guys
I think this is it
well a portion of it
Kaz Baig
@kbaig
Nov 20 2017 19:17
Yeah that's a slider
oh wait no it's not
Zerka1982
@Zerka1982
Nov 20 2017 19:17
please guys I need examples with code so I can look at it ...
Zerka1982
@Zerka1982
Nov 20 2017 19:17
I don't know what to search for using Google
mstellaluna
@mstellaluna
Nov 20 2017 19:18
its a SlideShow
like @kbaig mentioned
Zerka1982
@Zerka1982
Nov 20 2017 19:18
Aha
mstellaluna
@mstellaluna
Nov 20 2017 19:18
google this "javascript slideshow code with buttons"
should turn up a bunch of stuff
Zerka1982
@Zerka1982
Nov 20 2017 19:19
Merci
I ll give it a try
Kaz Baig
@kbaig
Nov 20 2017 19:19
Isn't fCC built using React? Why is my React DevTools not lighting up when I'm on it?
mstellaluna
@mstellaluna
Nov 20 2017 19:19
yea sorry about that.. the site has changed since I joined last year . I couldn't remember what you were talking about
@kbaig I think only portion of it are up on react
I'm not sure I never looked at the codebase
Kaz Baig
@kbaig
Nov 20 2017 19:20
Gotcha
mstellaluna
@mstellaluna
Nov 20 2017 19:20
FCC existed before react came out
that I know
Zerka1982
@Zerka1982
Nov 20 2017 19:20
Are you sure guys about the slideshow ????
Kaz Baig
@kbaig
Nov 20 2017 19:20
I know but I read in the React curriculum on the beta site that fCC is built using React
@Zerka1982 mhm
mstellaluna
@mstellaluna
Nov 20 2017 19:20
i don't know
Zerka1982
@Zerka1982
Nov 20 2017 19:23
Is there any example about the annoying introduction ?
I found something interesting guys
Are u there ?
Maybe I found what I am looking for
Ben Hart
@Benjmhart
Nov 20 2017 19:27
hey there, I have some questions about the pomodoro assignment and setting/clearing intervals properly
would someone be able to help?
Zerka1982
@Zerka1982
Nov 20 2017 19:28
to add an introduction we can use "introjs"
:D
first - I can't seem to clear the interval at all - I think it's a scope issue but I can't tell
Kaz Baig
@kbaig
Nov 20 2017 19:29
@Zerka1982 You could indeed use intro.js if you want to. Not the same necessarily as the opening to fCC you were talking about but it works
shoaibahmed01
@shoaibahmed01
Nov 20 2017 19:29
hi
Kaz Baig
@kbaig
Nov 20 2017 19:33
@Benjmhart in your HTML, change id = ' reset' to id = 'reset'
Ben Hart
@Benjmhart
Nov 20 2017 19:33
bah! thank you @kbaig
CamperBot
@camperbot
Nov 20 2017 19:33
benjmhart sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 440 | @kbaig |http://www.freecodecamp.org/kbaig
Kaz Baig
@kbaig
Nov 20 2017 19:34
@Benjmhart no worries man
Ben Hart
@Benjmhart
Nov 20 2017 19:34
@kbaig so otherwise I'm on the right track?
Kaz Baig
@kbaig
Nov 20 2017 19:34
If you change that I think it's doing what you want it to
@Benjmhart
Zerka1982
@Zerka1982
Nov 20 2017 19:34
@kbaig What did they use for the opening to FCC ?
Kaz Baig
@kbaig
Nov 20 2017 19:34
@Zerka1982 idk
But intro.js isn't for slideshows and fCC's thing is a slideshow
Ben Hart
@Benjmhart
Nov 20 2017 19:35
@kbaig - it seems to be, yes!
Ben Hart
@Benjmhart
Nov 20 2017 19:53
how does one play a sound using JS on Codepen, there's nowhere to upload a file... how did others get around this?
Ken Haduch
@khaduch
Nov 20 2017 19:56
@Benjmhart - here is a code snippet that I saved that might work:
// Play audio
      var wav = 'https://s3.amazonaws.com/freecodecamp/simonSound4.mp3';
      var audio = new Audio(wav);
      audio.play();
I'm not sure what that sound file does - keep your volume low... :)
it might be a bad URL - try this one - I'll edit my code.
Ben Hart
@Benjmhart
Nov 20 2017 20:00
taking a look
Ken Haduch
@khaduch
Nov 20 2017 20:02
@Benjmhart - I see your question about uploading files - the way you have to do it is have an accessible URL for it, unless you pay for CodePen PRO service, that allows you to upload resources. People have used dropbox, or any other place where freely accessible sound files are available.
Ben Hart
@Benjmhart
Nov 20 2017 20:03
yeah, i was trying to do that with mediafire, but i think my code was broken
Also an option
Ben Hart
@Benjmhart
Nov 20 2017 20:04
thanks for the code snippet @khaduch , it worked like a charm. just running my final tests and I think I've completed pomodoro!
CamperBot
@camperbot
Nov 20 2017 20:04
benjmhart sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3516 | @khaduch |http://www.freecodecamp.org/khaduch
Ben Hart
@Benjmhart
Nov 20 2017 20:05
thanks @kbaig - I'll study up!
CamperBot
@camperbot
Nov 20 2017 20:05
benjmhart sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
api offline
Ken Haduch
@khaduch
Nov 20 2017 20:24
@Benjmhart :+1: - great! Good luck finishing that project!
Ben Hart
@Benjmhart
Nov 20 2017 20:27
it's done! now I have tic-tac-toe and simon to polish off
lfvpCO
@lfvpCO
Nov 20 2017 21:03
Hi there guys! What do you think about css Grid for production !
Kaz Baig
@kbaig
Nov 20 2017 21:04
@lfvpCO https://caniuse.com/#feat=css-grid Support isn't terrible so depending on your application, you may or may not want to add a query for grid support still
I know since my projects are just MVP/portfolio stuff and not a mass market app, I would probably use it without queries
lfvpCO
@lfvpCO
Nov 20 2017 21:26
I like css Grid.. I’m starting with this. The best thing is that I don’t need to add CDN and things like that !
Kaz Baig
@kbaig
Nov 20 2017 21:30
For sure it's just pure CSS
I think it's amazing, it just needs full support. Almost there
Henry
@GitHub-Henry
Nov 20 2017 21:41
@lfvpCO
here's a snapshot of FF Dev Edition, CSS Grid layout tool in action, cool stuff...
image.png
Ghost
@ghost~56c733f2e610378809c24d2c
Nov 20 2017 22:37
As I understand it, CSS Grid is supported in email styling? Am I off base here?
Ghost
@ghost~56c733f2e610378809c24d2c
Nov 20 2017 22:51
Are many here using jade/pug in a working environment?
Henry
@GitHub-Henry
Nov 20 2017 22:52
@travisboss CSS Grid is for making 2D web page designs, row and column, positioning of things, not styling email
Ghost
@ghost~56c733f2e610378809c24d2c
Nov 20 2017 22:54
@GitHub-Henry what I mean by that is using it for email blasts, the company I work for we build them quite a bit and this could give us a lot more “style” in our emails.
Henry
@GitHub-Henry
Nov 20 2017 22:56
@travisboss a 2D page is a 2D page
Ghost
@ghost~56c733f2e610378809c24d2c
Nov 20 2017 22:57
@GitHub-Henry the “D” of the page is not my concern, I am speaking of using css grid elements to style a email blast versus using inline styles which are limited, those who have seen what can happen in a outlook email …
Henry
@GitHub-Henry
Nov 20 2017 22:59
@travisboss as long as your designing web page layouts using rows and columns, then CSS Grid is a good way to go
speaking of going, gtg