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.
I’ll take a look
Thanks!
@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.
Users choice for what attack they use?
@Bazill03 Yeah. You could make a nice switch statement to continue the story too.
good morning
@Bazill03 Hey where did you get those cool old school sound effects?
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.
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!
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!
@dkreidler - yes, you can go to the freecodecamp.org/<yourUserName> page to see the lessons that were completed, etc.
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?
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.
@1532j0004kg do you have it in a pen or are you developing locally
are you using jquery with node?
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
_
_
@DylanMayers might have a better time posting in the main room
I am coding by codepen
@1532j0004kg can you link it
require doesn't mean anything unless you're using node
what is nets?
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.
@Bazill03 Object oriented approach sounds good here.
@Bazill03 You can take a look at the structure of that one: https://github.com/scottbw/dialoguejs (js code is here)
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?
@Bazill03 Oh, no. Just go to the js code and copy paste it and it should be fine ^^
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.
@Bazill03 The first line actually checks whether it is nodejs or browser js
var Dialogue = (typeof exports !== 'undefined') ? exports : {};
Do I just link it with a script tag?
@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
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?
@Bazill03 I would use an object to store all the sounds in:
And useWeapon and useFireball seems really similar to me: Don't repeat yourself. Keep DRY :P
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
Ah, that's a good idea, I'll definitely move all my sounds into an object.
@Otto-AA That hurts me Otto.
@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 ^^
And seriously, I think every result on this page answers your question ^^
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.
@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
I have done that to some extent with the combatPrint and calcHealthBars functions.
@Bazill03 :thumbsup:
Thanks for all the help @Otto-AA
bazill03 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 391 | @otto-aa |http://www.freecodecamp.org/otto-aa
@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
@Otto-AA require function only will work on the node.js?
Yes, in normal javascript it is undefined
okay thanks @Otto-AA
1532j0004kg sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @otto-aa |http://www.freecodecamp.org/otto-aa
(Except you say something like
request = 'myString' and define it yourself
but that won't help you to import nodejs modules
ohh okay..
but if i used in node.js it will work or not?
i mean my code.
@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
ohhh ok.
What's a Simple way to add a navigation bar like the one on this page?
Hello all
Hii
can anyon here tell me the color code of the a picture if i show them /
Send the picture
guys come on why are yalll not responding
why are yall not sending the picture?
@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"
oh hey thank you so much @heroiczero
ericzomar sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2067 | @heroiczero |http://www.freecodecamp.org/heroiczero
hi
how's it going @PhilippeMarcMeyer ??
@Gurukorgi If you don't post a picture no one can help you.
it's ok i'm curious about sharing and chating about web dev
@ericzomar do you comme here on a regular basis ?
well, that's one of the reason this chat is here! you're in the right place :D
Not used to
I'm on this chat whenever i'm coding, which I do as often as i can
I've entered a company 6 months ago
that
that's great!
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
so you're having trouble learning c#??
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
that's exciting, I hear js and c# are very similar
Yes it's existing
we get our data from the back thru ajax queries
what is git exactly?
it's a versionning tool
oh okay just like github
it allos sharing code with the team
Github is based on git
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
yea, exactly you don't want to accidentally destroy somebody's work or change a piece of code that causes unknown problems
i'm personnaly interested in vue.js
what's vue.js?
trying to watch videos during lunch time
it's a js framework
responsible for managing the vue
what's a vue?
it means rendering a div for example
OH okay
that's cool I can't wait to learn about all of this stuff
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
yea, working through the tutorials now,
and you'll learn all your life ! Hope you like that ! :-)
haha yep! that's definitely one of the perks of this work
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
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
that's not difficult. very less that frameworks
yea, you just throw in some bootstrap classes here and there and you have a really nice website foundation in no time at all
it allows you to code the a nice design faster
modals are easily made, drop downs and so on
yea but what are the limits? if you're building a very unique custom webpage does bootstrap become less useful??
@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
oh thanks let me try it out
@Gurukorgi there is a free version !
@Gurukorgi it's the one i use
how do i use it when the picture is in my computer ? @PhilippeMarcMeyer
secondly i ma using linux
@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
thanks
you are welcome
let me try it out
@Gurukorgi You can also use an addon for the browser
Firefox: https://addons.mozilla.org/en-US/firefox/addon/colorzilla/
Chrome: https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
Firefox: https://addons.mozilla.org/en-US/firefox/addon/colorzilla/
Chrome: https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
oooh
:-)
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?
@tundeiness thats very true
are you making sure to import namespaces to your "normal browser" code???
especially when you try them out on chrome and firefox
@tundeiness that's because code on codepen runs inside iframe, not top frame
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 ?
@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?
almost 5AM for me guys, it's time for bed goodnight everyone!
Go canucks @ericzomar ;)
@Gurukorgi how?
@Gurukorgi webkit and other specifications?
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
@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/
@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.
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
@tundeiness Can you give us an example? You probably just forget to include the linkings (e.g. bootstrap, jquery, ...) outside of codepen ;)
thats true
@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.
thats not the project thats the jquery library
show the project
@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 ?
i use atom
but i dont think it has any preview
First search result for "atom live preview": https://atom.io/packages/atom-html-preview
Probably works ;)
Probably works ;)
wait i dont have "npm" package manager on my linux and i dont know how to install it in my ubuntu (linux)
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
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
@Otto-AA yeah I use sublime or visual code and I have a live server plugin to view the codes live.
@moT01 nice.....:)
@tundeiness :thumbsup:
And when I used the zip download from codepen it looks exactly the same...
At the right bottom in codepen
At the right bottom in codepen
@Otto-AA but I don't want the buttons down there. it should be in the middle
@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)
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.
@EricK425 Can you link to it somehow? (Codepen, ...)
@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.
@Otto-AA i still don't get it
"Bootstrap4: Comes with .no-gutters out of the box. source: https://github.com/twbs/bootstrap/pull/21211/files"
@EricK425
@tundeiness Why not set
.wrap { top: 50%; }? you are setting it to 72%which pushes it down
@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?
@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?
@Asjas okay...I had done that earlier but let me try again.
@Otto-AA I think he wants the button middle center? Am I correct in thinking that? @tundeiness
@Asjas yes i do
@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
the app is not workking or maybe its taking too long
@Gurukorgi amp is automatically installed with atom. It is the atom package manager. See https://github.com/atom/apm
@Asjas i actually did 50% but it's not working the way I think it should.
@Asjas @tundeiness You can also move the code panel to the top if that helps
@tundeiness check this link
@Asjas but in full page I do not have access to the codes.
@Otto-AA so how do i open or use the previewer on atom ?
@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
erick425 sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 447 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
@EricK425 your app is unresponsive
@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
@Otto-AA not helping. My code panel is actually on the left hand side.
@EricK425 ally or use the entire width?
@Asjas yup
hmmm
@Gurukorgi Most likely by typing
apm install atom-html-preview into your console. But I don't use Atom, so I don't know
align*
@Gurukorgi You mean not responsive design or its not working for you to preview?
@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%; }
@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
@Asjas yes I did but it's not centered still
@Gurukorgi The buttons havent been coded yet Im just trying to get the design looking right
you want it like the first button is?
@tundeiness It's on my side center.
@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
erick425 sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
api offline
@Asjas none bro
@tundeiness Can you post a screenshot of his fork? For me it is prefectly centered aswell (In both firefox and chrome)
@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?
@tundeiness Here is a link to a screenshot. https://imgur.com/a/TQXYN. Would you not say that is center?
@Otto-AA he sent me a link...let me try and get it for you
@tundeiness We don't need that link. We have it in chat
We need you to post a screenshot
@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
@Otto-AA check this link
<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"> = </p></button>
</div>
</div>
@tundeiness I would add
position: relative; to .scale, so the search positions itself relative to the image and not the body
@tundeiness Can you read my messages? I said we have that link. It's in the chat. We DO need a screenshot
@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
@Asjas okay...can you forward the same to him
@tundeiness I do not have access to your computer. YOU need to post a screenshot. I can't post your screenshot
@Asjas sorry about that
But do as @Otto-AA says. Add
position: relative; and test
@tiagocorreiaalmeida Last question, can you fill buttons vertically in the same manner you can fill horizontally with btn-block?
@Otto-AA i dont even know how to get to the consol its all messed up
@Gurukorgi lol
@tiagocorreiaalmeida I meant to ask, is there a vertical equivalent to btn-block.
@Gurukorgi Then ask google how to open a terminal ;) Google knows soooo much ^^
@Otto-AA errrm well...but side margins are gone?
@tundeiness #screenshot?
@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
@tundeiness Nice to hear :)
Nonetheless, when someone asks for a screenshot please give it to them. It would be soooo much easier ;)
Nonetheless, when someone asks for a screenshot please give it to them. It would be soooo much easier ;)
@EricK425 not that I can remeber
@Otto-AA let me send you one please.
@Otto-AA i can't do screenshot please
@Otto-AA but as you can see, the positioning of the main container is still off.
@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
@tundeiness Do you want that...?
@Otto-AA no
@Asjas yes I did. You see when I enabled it again, the buttons went off again
@tundeiness
@Otto-AA yeah
@tundeiness In the left of the picture is the code for it
@Otto-AA you changed it back to position: absolute?
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
There are so many options to do this O.o
@tundeiness
@Otto-AA i'm using chrome
@tundeiness yes, changed to absolute
@tundeiness https://codepen.io/A_A/pen/eeVWdY?editors=1100
@Otto-AA 
@Otto-AA still not working for me I guess...dunno why
did you add
transform: translate(-50%, -50%)?
and does the pen I sent you works?
@tundeiness
@Otto-AA yes i did.. still the same
and does the pen I sent you works?
@tundeiness
@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
when you use
setInterval(function(), 5000) that should delay for 5 seconds before running the first time, correct?
correct
@tiagocorreiaalmeida it seems my computer doesn't understand that :laughing:
@rscales02 How comes that?
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);
}
...loseAudio plays immediately...
Or it played immediately before I used
setTimeout which has been removed...
@rscales02 If you wan't
loseTimer to run periodically, you need to pass the function into setInterval: repeatDelay = setInterval(loseTimer, dTime);
@Masd925 don't I do that with
repeatDelay = setInterval(loseTimer(combination), dTime);?
@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
Your code calls the function and actually passes the return value to setInterval, and that return value is undefined.
@Masd925 :thumbsup:
@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).
@Masd925 @Otto-AA @tiagocorreiaalmeida thanks!
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
@rscales02 you could either do
(In ES this would be
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))
@Otto-AA that was exactly my next question, thanks!
rscales02 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
api offline
hey guys
@kobe561 :wave:
can i get some criticism on this page im making?
im working on designing it first
@kobe561 Sure. Post what you have done.
@kobe561 - if you have a URL of something you're working on, post it and you can get some opinions...
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?
@orestegiacche Post the relevant code please.
Or a link if you have it on Codepen for example.
<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>
<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
@orestegiacche
col-md-2 etc
not
col-2-md
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>
<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?
@orestegiacche Post the whole html if it is not too big.
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?
@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.
I tried splice, but I got confused at one point
wait let me post the code
the instructions recommend the filter method for a reason -- i would use that @KshitijaaJaglan
@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?
@orestegiacche Are you sure that Bootstrap is imported?
@orestegiacche I get this: https://screenshots.firefox.com/lthdVABcsDBIxsju/codepen.io
Is that what you want?
Is that what you want?
Yea bootstrap is loaded for sure
@orestegiacche its working for me
@Otto-AA Yea so for me it looks different!
@orestegiacche If you are in my pen or in yours?
@Otto-AA In yours
Hmmm :/
And it still stacks horizontally.....
@orestegiacche try clearing cache
Yeah, ctrl+shift+r in my browser
@orestegiacche you want it to stack horizontlly or vertically?
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
can you post a screenshot of the code and result
Yea!
Can I just post the link in here?
ya! u can
or just copy paste the img
its vertical till here
and horizontal if i increase d width
@orestegiacche Seems fine to me
oh
with increased width
Oh..... Is it just because I have to make columns using different sizes then?
@orestegiacche you can add this to your class to also target small sizes:
col-xs-2
ya coz
md refers to medium sized screens
n after that, they stack vertically
and be responsive
Ok perfect thanks yea that makes sense
It was my first time using it
u can also try flex box
How does that work?
pure css
with
display: flex;
and a few other properties
Oh awesome ok thanks
:sparkles: :+1: :sparkles:
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);
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
@moigithub wow thanks!
michielhuijse sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3714 | @moigithub |http://www.freecodecamp.org/moigithub
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
@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
Or may be @chrisandsuch you need to remove anchors from a tags of timeline
@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.
@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.
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
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
looks like it only asks for that one - but i would put a few more in there if i were you
in that case I would like to dedicate that page for freeCodeCamp's status only 😄
@kbaig @rajanikantdeshmukh @sorinr @moT01 Thanks everyone. I’ll be sure to make changes
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
I’m new here on Gitter.. So what’s that about sending points?
click a name and say thanks or ty or one of the other keywords to send some point
@rajanikantdeshmukh Just a way to reward someone for helping out. A (likely) good indicator of how helpful/active they've been in the community
Cool! Far better than Slack I think
I also completed a project today, here https://codepen.io/alpharion/full/ZarXBz/
@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?
So darken the text color in results and ui interaction on result cards you mean?
@rajanikantdeshmukh Indeed
I'd darken the headings of the results
Hey, a quick question. Could anyone explain me this sintaxis?:
anything === value1 ? value2 : value1
@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'
@kbaig I did the changes but they aren’t much visible. Thanks for feedback!
rajanikantdeshmukh sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 436 | @kbaig |http://www.freecodecamp.org/kbaig
// return the lesser of two values
function (a, b) {
return a < b ? a : b;
}
@sharkantropo
@kbaig I understand now. Thanks a lot.
sharkantropo sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 437 | @kbaig |http://www.freecodecamp.org/kbaig
A pretty streamlined way compared to write if/ else if conditional. I think I'm going to use this instead from now on.
@sharkantropo Just be very careful about the readability tradeoff
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
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 ?
@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.
@Zerka1982 Are you looking for Feature Discovery?
@Zerka1982 Not quite clear, beyond you wanting to animate text
@sharkantropo Sounds like a plan
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
@Zerka1982 Check this http://materializecss.com/feature-discovery.html
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
@Zerka1982 You mean a modal?
kind of dialogs ...
@Zerka1982 Like this?
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
slider?
@Zerka1982 do you mean your local community group or the FCC chat group listings?
Sorry guys, i couldn't express my idea
Some websites provide user with dialog box indicating how to use the website etc ...
Maybe if you can find us an example
that's all there is as a guide .. things have been changed
@mstellaluna He was using it as an example of UI he wants to implement
@mstellaluna I guess you are not following me :D
@kbaig the reference probably no longer exists so I don't remember lol
@mstellaluna ah gotcha
user guide on how to use a website ...it appears once the user opens a page.
@Zerka1982 ohh that super long annoying introduction when you joined FCC for the first time
@Zerka1982 Your best bet for us to be able to help is prob to find an example of something similar to your idea
@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
Yeah that's a slider
oh wait no it's not
please guys I need examples with code so I can look at it ...
I don't know what to search for using Google
its a SlideShow
like @kbaig mentioned
Aha
google this "javascript slideshow code with buttons"
should turn up a bunch of stuff
Merci
I ll give it a try
Isn't fCC built using React? Why is my React DevTools not lighting up when I'm on it?
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
Gotcha
FCC existed before react came out
that I know
Are you sure guys about the slideshow ????
I know but I read in the React curriculum on the beta site that fCC is built using React
@Zerka1982 mhm
i don't know
Is there any example about the annoying introduction ?
I found something interesting guys
Are u there ?
Maybe I found what I am looking for
hey there, I have some questions about the pomodoro assignment and setting/clearing intervals properly
would someone be able to help?
to add an introduction we can use "introjs"
:D
here's my link: https://codepen.io/Benjmhart/pen/QjPWdQ?editors=0011
first - I can't seem to clear the interval at all - I think it's a scope issue but I can't tell
@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
hi
@Benjmhart in your HTML, change
id = ' reset' to id = 'reset'
bah! thank you @kbaig
benjmhart sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 440 | @kbaig |http://www.freecodecamp.org/kbaig
@Benjmhart no worries man
@kbaig so otherwise I'm on the right track?
If you change that I think it's doing what you want it to
@Benjmhart
@kbaig What did they use for the opening to FCC ?
@Zerka1982 idk
But intro.js isn't for slideshows and fCC's thing is a slideshow
@kbaig - it seems to be, yes!
how does one play a sound using JS on Codepen, there's nowhere to upload a file... how did others get around this?
@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.
taking a look
@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.
yeah, i was trying to do that with mediafire, but i think my code was broken
Also an option
thanks for the code snippet @khaduch , it worked like a charm. just running my final tests and I think I've completed pomodoro!
benjmhart sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3516 | @khaduch |http://www.freecodecamp.org/khaduch
thanks @kbaig - I'll study up!
benjmhart sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
api offline
@Benjmhart :+1: - great! Good luck finishing that project!
it's done! now I have tic-tac-toe and simon to polish off
Hi there guys! What do you think about css Grid for production !
@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
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 !
For sure it's just pure CSS
I think it's amazing, it just needs full support. Almost there
As I understand it, CSS Grid is supported in email styling? Am I off base here?
Are many here using jade/pug in a working environment?
@travisboss CSS Grid is for making 2D web page designs, row and column, positioning of things, not styling email
@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.
@travisboss a 2D page is a 2D page
@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 …
@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