These are chat archives for FreeCodeCamp/HelpFrontEnd

18th
Feb 2018
Riadh
@KWFE
Feb 18 2018 00:14
HEY
LydaTech
@lydatech
Feb 18 2018 00:18
@VaseJS BS is a framework. It isnt only css
VaseJS
@VaseJS
Feb 18 2018 00:49

@lydatech how? A framework is an architecture. Frameworks call your code within their system. A library is used where ever you need it. BS does not call any code I write therefore it cannot be a framework. BS frames nothing. it provides components to be used in any manner i need to use them. Frameworks alone cannot do anything, but BS can handle all of my CSS needs without me coding anything custom (yes, i can add my own code, but it is not necessary). There is no framework that can do such a thing because its just that…a framework. my code is the picture to which it frames. BS is the is the picture (quite literally in this sense). Its not being framed by anything nor is it framing anything. Maybe the use of the term framework has shifted and I missed the memo, or BS 4 is radically different than those versions that came before it, but it started as a UI kit and still seems to be one. Now, i haven’t look at BS 4 so this may have changed. if so, then disregard everything I have said :D

But even by definition, BS is not a framework:

  1. A structure for supporting or enclosing something else, especially a skeletal support used as the basis for something being constructed.
    1. An external work platform; a scaffold.
    2. A fundamental structure, as for a written work.
      source: The American Heritage® Dictionary of the English Language, 4th Edition

What is the BS skeletal system? What is the scaffolding? What is the structure that I’m putting my code into and building upon? BS does that, itself.

By definition (same source as above) BS is a kit:

  1. A set of articles or implements used for a specific purpose: a survival kit; a shaving kit. [CSS being that specific purpose]
  2. A container for such a set. [BS literally has a container and its own parts are the set]
  3. A set of parts or materials to be assembled: a model airplane kit. [again, it is assembling its own parts]

So it may be better to say that a Kit can be a framework but a framework isn’t necessarily a kit. BS is not only provides its own container, but the parts to put in it, like a model plane. The designer doesn’t have to customize anything, but has the choice to. But in doing so, may run into CSS issues because it must be coded in a specific way or you will run into specificity issues due to the heavy use of !important and IDs.

So after a nice discussion with myself, a kit is above a framework because it includes a framework. Anyone who has bought a kit to build something understands this. So my point still is the same that BS is a UI kit (which is more than a framework). Calling it a framework is inaccurate though not totally wrong.

Good talk guys (hi fives self) :P

I know people online will simply dismiss everything i said so this is only a discussion with myself as i have defined all my terms. Many people don’t do such things and thus the argument is truly over the definition of the word or the popularity of it. if one disagrees, its ok. i’m only talking to myself in public :laughing:

Hope you all enjoyed another personal rant from Vase :+1:

Gersho
@Gersho
Feb 18 2018 00:52
that's a long read
proper semantics are hard since there's so many useless buzzwords, as for me i only use boostrap css so it's a stylesheet :P
LydaTech
@lydatech
Feb 18 2018 00:54
BS Includes both css and JS components.
Gersho
@Gersho
Feb 18 2018 00:55
the js part would be called a plugin
Ismail Hozain
@ismailhozain
Feb 18 2018 00:55
Hey folks I need some CSS help here.So what i want to do is get the navbar to stay at the top when the user scrolls the site.How can that be done?
https://codepen.io/ismailhozain/pen/aqVvNV?editors=0100
Gersho
@Gersho
Feb 18 2018 00:55
and i don't know if the sum of those as a name or not
well there's nothing to scroll so the bar stays on top
i use fixed position but i'm sure some of the good css people will have something smarter
Ismail Hozain
@ismailhozain
Feb 18 2018 00:56
i am not done yet i have more content to add.
LydaTech
@lydatech
Feb 18 2018 00:57
@Gersho @VaseJS I cant chat right now but Id love to explore this later
Gersho
@Gersho
Feb 18 2018 00:57
yes i only mean, you should add some whatever copy paste text, so when you test your thing you can see if it works or not ;)
nav{
  position: fixed;
  z-index: 2;
}
that's what i use btw
Ismail Hozain
@ismailhozain
Feb 18 2018 00:58
thanks !
shrinking the viewport works for testing too
Gersho
@Gersho
Feb 18 2018 00:59
i assumed the text would have gotten smaller xD
Ismail Hozain
@ismailhozain
Feb 18 2018 01:01
no actually it shifted over to the left
Ismail Hozain
@ismailhozain
Feb 18 2018 01:02
i got no clue how to fix that
Gersho
@Gersho
Feb 18 2018 01:02
body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
Ismail Hozain
@ismailhozain
Feb 18 2018 01:06
thanks @Gersho
Gersho
@Gersho
Feb 18 2018 01:06
hmm mine is on the left by design so i can't really say, try wrapping the whole nav in a div and put text-align: center ?
Ismail Hozain
@ismailhozain
Feb 18 2018 01:09
but the nav is one giant div with each button begin given its own class?
Gersho
@Gersho
Feb 18 2018 01:10
to center stuff i ussually wrap it in a div and align it's text (whatever is inside it)
Ismail Hozain
@ismailhozain
Feb 18 2018 01:11
thanks
Kevin A Ko
@clickingmouse
Feb 18 2018 02:45
does anyone know if it's considered cheating if we are following this guide?
DMsalati
@DMsalati
Feb 18 2018 02:54
can someone tell me what im doing wrong here ?
https://codepen.io/Muradmsalati/pen/pawPVR?editors=1011
the json wont display in console
@clickingmouse i think so, because its basically you copying the code this guy is making, its no different from just going to codepen and looking up the project name and looking through it
Kevin A Ko
@clickingmouse
Feb 18 2018 03:12
strange..it's posted by fcc ... so kind of confused lol
hensn5250
@hensn5250
Feb 18 2018 03:38
@DMsalati check the browser console. There is an error there. ERROR: No 'Access-Control-Allow-Origin' header is present on the requested resource. Check your header.
LydaTech
@lydatech
Feb 18 2018 04:04
@clickingmouse No it isnt cheating if youre learning. The idea here isnt to stump you but to teach you and push you to learn
AbrisM
@AbrisM
Feb 18 2018 04:36
@clickingmouse I wouldn't consider it cheating, more of a tutorial
plus variations of it. Code praticually can look the same at times
English Papers yes, but code? Then we have a lot of RICH cheaters
Not only that but game companies have a tendency of using rehashes of assets, especially fan-funded projects off popular games
I mentioned a company that has an article written on the history and it got removed?
Seriously you can go to their site and see the founding how they started off circuit boards that werent their own
@clickingmouse Anyway, if they never tampered with those routers we would never have this company today and many others. It becomes more of a sense of Copyright Debates more
dinesh
@1532j0004kg
Feb 18 2018 04:49
hi guys , I have a keys a file and also i have nodemodules folder . So , what i need to do to hide thode data's in github (i dont want to show the keys to public ) . Can u please explain !
?
2018-02-17 at 20-50-53.png
2018-02-17 at 20-50-53.png
Brad
@bradtaniguchi
Feb 18 2018 04:54
@1532j0004kg You need to create a .gitignore file
and put the names of the files/folder into that file, and git will ignore them
dinesh
@1532j0004kg
Feb 18 2018 04:55
by giving the name ?
Brad
@bradtaniguchi
Feb 18 2018 04:55
But if you already have those files checked into source control you will need to remove them from being tracked, but then you may have a larger issue cuse your keys are technically saved in the git history. So you will need to do some more complicated stuff
@1532j0004kg So like for node_modules and the key file you can put this into the file:
node_modules
keys
dinesh
@1532j0004kg
Feb 18 2018 04:58
1.file->new->file(.gitignore)
  1. In that file i want to give the name of the file or folder.
  1. push that to the github thats all , right ?
@bradtaniguchi
Brad
@bradtaniguchi
Feb 18 2018 04:59
Uh, as I said before do you know if the key files/node_modules are already checked into github/git?
As if they are, you would have already exposed the keys
and node_modules is a waste of memory
dinesh
@1532j0004kg
Feb 18 2018 05:00
so , i want to give the name of nodemodule and key files right ?
Brad
@bradtaniguchi
Feb 18 2018 05:01
Yes, put into the .gitignore file, the names of the files/folders you want to ignore. Check that file into git and push your changes.
Kevin A Ko
@clickingmouse
Feb 18 2018 05:01
@AbrisM yeah, I think I read last night on the medium its all about repetition... got to start the first repetition somehow...
Brad
@bradtaniguchi
Feb 18 2018 05:01
@clickingmouse Its like learning anything, the more you do it the better you will become (or the most part)
dinesh
@1532j0004kg
Feb 18 2018 05:04
@bradtaniguchi if i want to clone that , i must need to remember my keys?
Brad
@bradtaniguchi
Feb 18 2018 05:05
@1532j0004kg Yes, you or anyone else getting the project will need to have the keys locally and put them into the key file. They will also need to run npm installto download the node_modules
dinesh
@1532j0004kg
Feb 18 2018 05:05
So , i want to maintain my keys in local !!!
Brad
@bradtaniguchi
Feb 18 2018 05:07
@1532j0004kg they wont go anywhere, they just wont be checked into git
dinesh
@1532j0004kg
Feb 18 2018 05:07
and also I want to push the nodemodule and keyfile ?
Brad
@bradtaniguchi
Feb 18 2018 05:08
@1532j0004kg You shouldn't need to push your node_modules, as anyone can download them with npm install
dinesh
@1532j0004kg
Feb 18 2018 05:08
after put those name in .gitignore ?
Brad
@bradtaniguchi
Feb 18 2018 05:08
You cant, otherwise I don't understand why you wanted to ignore them in the first place?
Amit Patel
@AmitP88
Feb 18 2018 05:08
hey all, I'm working on the Missing Letters algorithm and I have the first 1/2 done successfully, but I'm struggling on figuring out the undefined part. I've tried the obvious else statement on the bottom of my if statement but it won't work for some reason
letters.png
dinesh
@1532j0004kg
Feb 18 2018 05:09
ok so i dont want to add keys and nodemodules !! cools thanks @bradtaniguchi
CamperBot
@camperbot
Feb 18 2018 05:09
1532j0004kg sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Feb 18 2018 05:09
@1532j0004kg Yes, if you want to have the keys on other machines, or give them to someone else you need to do it outside of git security.
Amit Patel
@AmitP88
Feb 18 2018 05:10
I've been at this for about 2 hours now. I don't want the solution, but just a little direction :)
Brad
@bradtaniguchi
Feb 18 2018 05:12
@AmitP88 A high level thing you could do is return undefined at the end if the missing code is empty, (''is a falsy value)
Well maybe thats not high level at all
Amit Patel
@AmitP88
Feb 18 2018 05:12
@bradtaniguchi ahhhh I see. ok, i'll try that real quick. makes sense
@bradtaniguchi hmmm, I tried this, but it didn't work. I don't know why I'm not getting this. It should be easy right?
function fearNotLetter(str) {  
  var charCodes = [];  
  var missingCode = [];

  for (var i = 0; i < str.length; i++) { 
    charCodes.push(str.charCodeAt(i)); 
  }


  for(var j = 0; j < charCodes.length; j++) {
    if((charCodes[j+1] - charCodes[j] != 1) && (charCodes[j] != charCodes[charCodes.length - 1])){
      missingCode.push((charCodes[j] + charCodes[j+1])/2);
      missingCode = String.fromCharCode(missingCode);
    } else if (missingCode === '') {
      return undefined;
    }
  }

  return missingCode;

}

fearNotLetter("abce");
Brad
@bradtaniguchi
Feb 18 2018 05:15
Your checking if the first letter in the loop is missing, if it ISN'T you return undefined. This is the wrong behavior, you want to return undefined if the missing code is empty after checking all letters
Amit Patel
@AmitP88
Feb 18 2018 05:16
I was thinking, would I need to make another if statement just for this?
just to check all the letters once to make the undefined statement
I was thinking of doing that, but I figured it would break the DRY rule and would be bad practice
Brad
@bradtaniguchi
Feb 18 2018 05:16
How would you know all the letters are in order without checking them?
Amit Patel
@AmitP88
Feb 18 2018 05:17
true
Brad
@bradtaniguchi
Feb 18 2018 05:17
And this isn't a DRY thing, this is a logic thing. DRY is more like repeating your loop again just to return undefined.
(so like having three loops instead of just the current two)
Amit Patel
@AmitP88
Feb 18 2018 05:22
function fearNotLetter(str) {  
  var charCodes = [];  
  var missingCode = [];

  for (var i = 0; i < str.length; i++) { 
    charCodes.push(str.charCodeAt(i)); 
  }


  for(var j = 0; j < charCodes.length; j++) {
    if((charCodes[j+1] - charCodes[j] != 1) && (charCodes[j] != charCodes[charCodes.length - 1])){
      missingCode.push((charCodes[j] + charCodes[j+1])/2);
      missingCode = String.fromCharCode(missingCode);
    }
  }

   for(var k = 0; k < charCodes.length; k++) {
     if((charCodes[k+1] - charCodes[k] === 1)) {
       missingCode.push(undefined);
     }
   } 





  return missingCode;

}

fearNotLetter("abce");
I tried this but it's still not working. I think i'm close, but I'm having trouble seeing it
Brad
@bradtaniguchi
Feb 18 2018 05:24
I said not being DRY would be to make a third loop
Amit Patel
@AmitP88
Feb 18 2018 05:24
I did make a 3rd look
*loop
oh, nvm lol
ok, hang on a sec
function fearNotLetter(str) {  
  var charCodes = [];  
  var missingCode = [];

  for (var i = 0; i < str.length; i++) { 
    charCodes.push(str.charCodeAt(i)); 
  }


  for(var j = 0; j < charCodes.length; j++) {
    if((charCodes[j+1] - charCodes[j] != 1) && (charCodes[j] != charCodes[charCodes.length - 1])){
      missingCode.push((charCodes[j] + charCodes[j+1])/2);
      missingCode = String.fromCharCode(missingCode);
    } else if (charCodes[j+1] - charCodes[j] === 1) {
      missingCode = '';
    }
  }





  return missingCode;

}

fearNotLetter("abce");
ugh, this is starting to drive me nuts
Brad
@bradtaniguchi
Feb 18 2018 05:28
If I asked you to describe to me in plain english (don't but maybe right it down to help yourself) what your program is doing right now line by line would it seem like it would solve the problem, or at least it should solve the problem?
Amit Patel
@AmitP88
Feb 18 2018 05:30
probably. ok, i'll write down in plain english and take a look at that and then my code.
@bradtaniguchi thanks bro :)
CamperBot
@camperbot
Feb 18 2018 05:30
amitp88 sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 378 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Feb 18 2018 05:30
Then if you don't get any ideas, approach the problem again in plain english or use pseudocode to understand the problem and approach
Your current code technically almost works, but IMO it seems too complicated for the problem at hand (so its working, but not good code, no offence)
Amit Patel
@AmitP88
Feb 18 2018 05:32
none taken. I had a feeling it would be, but it was the solution that stood out to me the most, so I just went with it
but yeah, I definitely got to learn how to pseudocode more
Brad
@bradtaniguchi
Feb 18 2018 05:35
I mean just using plain english is usually good enough, I personally use numbered steps in a notebook to get through tricky problems
DMsalati
@DMsalati
Feb 18 2018 05:50
why isnt my json request showing on the console https://codepen.io/Muradmsalati/pen/pawPVR?editors=1011
Brad
@bradtaniguchi
Feb 18 2018 05:52
@DMsalati Your getting a CORS error
DMsalati
@DMsalati
Feb 18 2018 05:53
whats that
Brad
@bradtaniguchi
Feb 18 2018 05:53
@DMsalati If you open your browsers console, instead of the codepen one it should give you a message about what exactly it is
here's what firefox prints:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://en.wikipedia.org/w/api.php?action=opensearch&format=json&requestid=&search=&namespace=&profile=fuzzy. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Matt Reynolds
@mareynolds
Feb 18 2018 05:54
I'm struggling with how to share my Random Quote on Twitter. I have the HTML so when you click the Twitter icon, it opens a new window to share a tweet, but I can't seem to figure out how to convert the data pulled from my Ajax query and cause that to be automatically entered in the tweet box.
$(document).ready( function() {
newQuote(); //runs this function once page has loaded
generateNewQuote.onclick = function() {
  $("quote-area").addClass("load");
  newQuote();
};

function newQuote() {
$.ajax({
  url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous',
  type: 'POST',
  data: {},
  dataType: 'json',
  success: function(data) {
    $("#quote-area").text("\"" + data.quote + "\"");
    $("#author-area").text("- " + data.author);
  },
  error: function(err) {
    alert(err);
  },
  beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "FKSYxDmGwQmshlJcLZzpH0MusqNnp1egiVGjsn4MNXWLffnN5e");
  }
}); //END ajax
} //END newQuote function

var tweet = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(data.quote + ' \n' + data.author);
window.log(tweet);
});
Brad
@bradtaniguchi
Feb 18 2018 05:56
@DMsalati Now CORS(Cross origin request) basically means you can't make a JSON request from 1 front-end side to another site. Its a security thing, otherwise I could run some javascript on 1 website and send the data to some malicious site. You can sidestep this issue by making a jsonp request. Do some googling on this and check the hints in the challenge on how to change your request
DMsalati
@DMsalati
Feb 18 2018 05:56
@bradtaniguchi ok thank you, i really hate this api lol
CamperBot
@camperbot
Feb 18 2018 05:56
dmsalati sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Feb 18 2018 05:57
@mareynolds I figured this out by going to the example and clicking on the share on twitter link, then it takes you to twiter the URL should actually contain the queryParam information required to auto populate the boxes
@DMsalati Yea, in most real work scenarios you will be able to use simpler methods to get data from your backend. But this sort of stuff is required if you have no backend (which you don't)
Matt Reynolds
@mareynolds
Feb 18 2018 05:59
Sounds good, I'll check it out, thanks.
DMsalati
@DMsalati
Feb 18 2018 05:59
@bradtaniguchi ill look into it hopefully i figure it out haha
Brad
@bradtaniguchi
Feb 18 2018 06:00
@DMsalati Goodluck, if you need more help with it don't be afraid to come back and ask for it
@mareynolds np :D
DMsalati
@DMsalati
Feb 18 2018 06:00
@bradtaniguchi thank you
CamperBot
@camperbot
Feb 18 2018 06:00
dmsalati sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
api offline
Tai Jones
@taiJones00
Feb 18 2018 06:02
Could I have help on the JavaScript chat?
Brad
@bradtaniguchi
Feb 18 2018 06:03
Just sent a reply on there
G-4-R-Y
@G-4-R-Y
Feb 18 2018 06:08
image.png
hye guys
anyone can tell me whats wron g with this regex?
DMsalati
@DMsalati
Feb 18 2018 06:09
@bradtaniguchi if i add &origin=* to the link it works fine
Brad
@bradtaniguchi
Feb 18 2018 06:10
@DMsalati Interesting, never knew about that feature of the api
DMsalati
@DMsalati
Feb 18 2018 06:12
neither did i someone just suggested it to me
but if i used jsonp instead it would have worked too right ?
Brad
@bradtaniguchi
Feb 18 2018 06:13
@DMsalati Yea that's how a lot of people do the challenge, but I mean personally I feel like learning all of that is very hacky, so if you kept your code cleaner and used what the api provided for you its fine
DMsalati
@DMsalati
Feb 18 2018 06:18
@bradtaniguchi yeah i guess so lol. when i was working on the quote generator project one i found a quote database that had the same issue. i just switched to a different api instead lol just cuz it was faster and i really want to move on to the advanced algorithms lol
Brad
@bradtaniguchi
Feb 18 2018 06:19
@DMsalati Yea its a huge pain figuring out you need JSONP and actually using it, especially for an "easier" challenge/project
DMsalati
@DMsalati
Feb 18 2018 06:20
@bradtaniguchi i watched a tuto on it and it wasnt like hard and stuff, i just didnt want to do it cuz i was too lazy tbh
but i propably would have to look it up again if i have to usse it
Brad
@bradtaniguchi
Feb 18 2018 06:21
@DMsalati I mean if you think its easy (cuse technically it isn't complex, just awkward) its good knowledge to know that it might be required,but not something you need to pull out of your pocket on a day to day basis
DMsalati
@DMsalati
Feb 18 2018 06:27
@bradtaniguchi yeah thats what i meant lol
Kartikeya Gupta
@kartikeya100
Feb 18 2018 11:11
hello
i started web development by learning it from freecodecamp and now i have created my own blog and i am very thankful to freecodecamp. I started from ZERO and 1 year fast forward, i started my own wordpress blog
http://topperslist.com/
buiphuking
@buiphuking
Feb 18 2018 11:15
anyone good at css? plz help me?
Matej Bošnjak
@mbosnjak01
Feb 18 2018 11:16
@buiphuking just ask question
:)
buiphuking
@buiphuking
Feb 18 2018 11:19
@mbosnjak01
https://codepen.io/buiphuking/pen/jYMPdZ
i want to set
.nav ul li ul li {width: ???} to show full length of li
.nav ul li ul li ul{
left: ?????; to show this next to .nav ul li ul li
top: 0;
}
LydaTech
@lydatech
Feb 18 2018 12:33
@buiphuking you are way over-complicating this. If youre using bootstrap look at this and consider restructuring your nav: https://getbootstrap.com/docs/4.0/components/navs/
fejkens
@fejkens
Feb 18 2018 14:30

https://codepen.io/fejkens/pen/oEprQy

Can anyone please tell me why my navbar overflows to the right when I use position: fixed on it?

Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 18 2018 14:35
@fejkens Does that answer your question?
fejkens
@fejkens
Feb 18 2018 14:39
@MuhammedKarim No, I want to have a fixed navbar on top of the page, but when I use position:fixed on it, it overflows to the right. I want it to be the same width as the background for the main content.
Joshua Swift
@joshuaswift
Feb 18 2018 14:41
Hey guys, I'm getting a "Cross origin request blocked" error when I view my pen in Firefox
I'm using https for the JSON request so I thought this would avoid any issues
It works fine in chrome
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 18 2018 14:44
@fejkens that's the best i can do
https://codepen.io/MuhammedK/pen/GQybaL?editors=0100
Quantomistro3178
@Quantomistro3178
Feb 18 2018 14:44
@joshuaswift Maybe its because of some sort of a firewall on firefox or something?
@fejkens You can use top/bottom/right/left to position it probably
@fejkens Add left: 0; to your navbar css
Hammad
@newnewb
Feb 18 2018 14:48

Guys does anyone know what happened to audio ended event listener?

It was working before in my pen but not it stopped working

audio.addEventListener("ended", function(){ console.log('end'});
fejkens
@fejkens
Feb 18 2018 14:48
@MuhammedKarim @Quantomistro3178 Thanks! Is there a way to have it the same width as the background below?
CamperBot
@camperbot
Feb 18 2018 14:48
fejkens sends brownie points to @muhammedkarim and @quantomistro3178 :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @muhammedkarim |http://www.freecodecamp.org/muhammedkarim
:cookie: 268 | @quantomistro3178 |http://www.freecodecamp.org/quantomistro3178
Stephen James
@sjames1958gm
Feb 18 2018 14:49
@newnewb You have a syntax error in the code, missing closing ) after 'end'
Quantomistro3178
@Quantomistro3178
Feb 18 2018 14:51
@fejkens You could try setting the left and right properties to the same value as the background you're talking about.
or change the margins to adjust its position. But i'm bad with css, so im not too sure
fejkens
@fejkens
Feb 18 2018 14:53
@Quantomistro3178 Got it working by setting both left and right to 100, thank you!
CamperBot
@camperbot
Feb 18 2018 14:53
fejkens sends brownie points to @quantomistro3178 :sparkles: :thumbsup: :sparkles:
api offline
Hammad
@newnewb
Feb 18 2018 15:03
@sjames1958gm yeah sorry that was on my part shortening the code as I had a larger piece of code with actual logic, but the event handler isn't being called anymore
audio.addEventListener("ended", function(){ console.log('end')});
Alex Iveson
@AlexIveson_twitter
Feb 18 2018 15:32
hey friends,
can someone help me with something super basic
and I’m trying to learn the keyboard shortcuts to have code autofilled
for example, I type “div” and hit shift and the remaining html comes in
does that make sense
what is that reffered to as?
any help would be amazing
Hammad
@newnewb
Feb 18 2018 15:38
code snippets?
@AlexIveson_twitter what editor are you using btw?
Alex Iveson
@AlexIveson_twitter
Feb 18 2018 15:43
hey @newnewb
oh ok cool code snippets, that’s good to know
using codepen, still very early in FCC
@newnewb thanks
CamperBot
@camperbot
Feb 18 2018 15:45
alexiveson_twitter sends brownie points to @newnewb :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @newnewb |http://www.freecodecamp.org/newnewb
Alex Iveson
@AlexIveson_twitter
Feb 18 2018 15:46
@newnewb are code snippets universal across all editors typically?
Hammad
@newnewb
Feb 18 2018 15:47
@AlexIveson_twitter Not really, it's editor dependent and someone times you have to install extras to get the snippets that you want
let's say you want Bootstrap4 snippets, you might have to download something like this https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode
sometimes*
can u plz find out where i am doing wrong.
function findLongestWordLength(str) {
var str1 = str.split(' ');
for ( var i = 0; i < str1.length; i++){
str1[i] = str1[i].length;
}
str1.sort();
return str1[0];
}
findLongestWordLength("The quick brown fox jumped over the lazy dog");
Hammad
@newnewb
Feb 18 2018 16:25
why are you using the beta?
tptynlr
@tptynlr
Feb 18 2018 16:26
i am trying to complete all the modules of beta
so i am going that.
so i am doing that.
Hammad
@newnewb
Feb 18 2018 16:30
okay
so you're returning the wrong number
function findLongestWordLength(str) {
var str1 = str.split(' ');
for ( var i = 0; i < str1.length; i++){
str1[i] = str1[i].length;
}
str1.sort();
return str1[0]; // this will return the first number which is the least from the sort
}
you need to return
str1[str1.length-1];
@tptynlr
tptynlr
@tptynlr
Feb 18 2018 16:36
thanks
Hammad
@newnewb
Feb 18 2018 16:36
No probs mate
@tptynlr try to trace your code better, debugging is a good skill to have
Darren
@DarrenfJ
Feb 18 2018 17:56
morning fCC
today is :tea: and podcasts :D
hope to coding is going well
coderNewby
@coderNewby
Feb 18 2018 18:01
hey @DarrenfJ thanks for the help yesterday
CamperBot
@camperbot
Feb 18 2018 18:01
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2393 | @darrenfj |http://www.freecodecamp.org/darrenfj
Darren
@DarrenfJ
Feb 18 2018 18:06
no worries.. anytime
AbrisM
@AbrisM
Feb 18 2018 18:07
Hi all :)
Does anyone use the Java Directory to code?
or is it just for look-up purposes
DaneshaIynan
@DaneshaIynan
Feb 18 2018 18:43
Hi all,
does anyone know how to put react-image carousel in a page after the navbar?
AbrisM
@AbrisM
Feb 18 2018 18:51
after navbar?
What do you mean?
Do you want it to go below or besided the navbar?
DaneshaIynan
@DaneshaIynan
Feb 18 2018 18:52
below
AbrisM
@AbrisM
Feb 18 2018 18:52
Im sure since it's a image you would be referencing it, even if its animated
like a regular image
img src
DaneshaIynan
@DaneshaIynan
Feb 18 2018 18:52
yap
infact it should use react js code to do that
AbrisM
@AbrisM
Feb 18 2018 18:55
doesnt do it?
DaneshaIynan
@DaneshaIynan
Feb 18 2018 18:55
ok
AbrisM
@AbrisM
Feb 18 2018 18:56
ugh diaper chat. Was looking for networking
mmasales
@mmasales
Feb 18 2018 19:28
Hi all, I am getting to ready to build my tribute page, however when I sign up for Code Pen, it ask me to choose a plan...is there not a free version, or do I have to pay in order to complete this project?
Tiago Correia
@tiagocorreiaalmeida
Feb 18 2018 19:32
@mmasales there's indeed a free version of it
mmasales
@mmasales
Feb 18 2018 19:36
i only see three options: starter, developer, and super...
can you point me in the right direction for the free version? @tiagocorreiaalmeida
i found it! thank you @tiagocorreiaalmeida
CamperBot
@camperbot
Feb 18 2018 19:40
mmasales sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 501 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Ahmed Al-Gallad
@A-Gallad
Feb 18 2018 19:58
Hello Guys
I am working on Project "Tribute Page"
and for some reason <img src="URL" alt=""> is not showing the image and only showing the alt...I researched a bit and some people were suggesting imgur. I uploaded the pics on imgur and still not working...any idea??
Stephen James
@sjames1958gm
Feb 18 2018 20:02
@Gallad23 When you put the URL into the address bar of your browser does it show the image?
Ahmed Al-Gallad
@A-Gallad
Feb 18 2018 20:04
I see :D :D ok let me try again and tell you
Thanks!!
it should work or not?
Ahmed Al-Gallad
@A-Gallad
Feb 18 2018 20:11
nvm I got it ...Thank you though...Sorry still a beginner trying to figure everything out :sparkles:
santhoshbalaguru001
@santhoshbalaguru001
Feb 18 2018 20:11
how to create two div box like this https://edwisor.com
Alex
@alex1ptb
Feb 18 2018 20:13
@santhoshbalaguru001 Do you mean the divs being side by side or the fact that it does a slight zoom effect when hovered over?
santhoshbalaguru001
@santhoshbalaguru001
Feb 18 2018 20:13
@alex1ptb yes
Alex
@alex1ptb
Feb 18 2018 20:13
@santhoshbalaguru001 Which one lol?
@santhoshbalaguru001 side by side is in-line block with html
@santhoshbalaguru001 to do the zoom feature an easy way of doing that would be to use jquery and apply the animation library to your toolbox
santhoshbalaguru001
@santhoshbalaguru001
Feb 18 2018 20:15
side by side
Alex
@alex1ptb
Feb 18 2018 20:16
@santhoshbalaguru001 Do you need css or html on this?

@santhoshbalaguru001 Found a basic fiddle demo of what you ask with css

http://jsfiddle.net/filoxo/U8L6R/

Alex
@alex1ptb
Feb 18 2018 20:23
@santhoshbalaguru001 And here is one I just made off the fly https://jsfiddle.net/5jrbjvfb/3/
@santhoshbalaguru001 See the css display being set to inline block? That has the desired effect you wish?
Matej Bošnjak
@mbosnjak01
Feb 18 2018 21:15
@santhoshbalaguru001
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:31
Hi Guys,
I would like to try building a tribute page, I have done the other stuff in free code camp but I have never started building something.
How long time should it take, and do you have any tips in my journey. I would like to become a good web developer with an eye for design
Tom
@moT01
Feb 18 2018 21:33
maybe start with a drawing or a photoshop image of what you want the end product to look like
since it's the first project - i would aim for something simple
and when it comes time to create your drawing - break it down into manageable chunks
one way to go about it anyway
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:38
Thanks @moT01, would the tribute page need to look the same as the Tribute page in the example or can I do what ever I like?
CamperBot
@camperbot
Feb 18 2018 21:38
:star2: 1007 | @mot01 |http://www.freecodecamp.org/mot01
hensn5250
@hensn5250
Feb 18 2018 21:40
@nicolaimagnussen if you would like to increase your strengths in design I would suggest trying to master CSS
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:41
@hensn5250 yes, you are correct. But would you recommend bootstrap or just really learning everything about CSS?
hensn5250
@hensn5250
Feb 18 2018 21:41
find a good design and develop it, its basically practice. Copy a webpage so you can see where your weaknesses are
CamperBot
@camperbot
Feb 18 2018 21:41
find a good design and develop it its basically practice copy a webpage so you can see where your weaknesses are
nothing found
hensn5250
@hensn5250
Feb 18 2018 21:42
um, ??? .ok CamperBot
CSS no BootStrap
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:44
@hensn5250 yes that is what I would like to do.
hensn5250
@hensn5250
Feb 18 2018 21:44
BootStrap is great but you should know the basics well before relying on a library/framework/etc
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:44
I have done the css course on free code camp, but that is all and watched some videos on it.
But css has always been annoying because I don´t really master it
do you recommend flex box and all the stuff people are talking about? or the css grid system
hensn5250
@hensn5250
Feb 18 2018 21:45
You have to practice.
What helped me a lot was whenever I learned something new I made a example program of it so that I don't forget and can always come back to an actual working example
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:47
I would like to really master web design and css
hensn5250
@hensn5250
Feb 18 2018 21:47
Flex Box and Grid are part of CSS
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:47
I am currently studying computer programming and I am learning about algorithms and stuff, but I think I can become an decent designer if I practice
thanks @hensn5250
CamperBot
@camperbot
Feb 18 2018 21:48
nicolaimagnussen sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:
hensn5250
@hensn5250
Feb 18 2018 21:48
FlexBox is for postioning specfic items while Grid is for creating / positioning the layout
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:49
So for example if I would like to have a div with grey stuff in the middle as the example tribute page, what should I look for then?
hensn5250
@hensn5250
Feb 18 2018 21:49
@nicolaimagnussen Yup. Best advice I can give is try to figure it out by yourself first.
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:50
Okey, so even though I make a lot of nasty mistakes it should be ok?
hensn5250
@hensn5250
Feb 18 2018 21:50
Most times you will get the answer quicker
If you learn from the mistakes, then yes.
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:51
but will you recommend w3 schools on my other screen?
hensn5250
@hensn5250
Feb 18 2018 21:52
best thing ever recommended to me was devdoc.io
saved me tons of time with reference , searches .... devdocS.io
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:52
devdocs, thanks I check it out, looks nice
hensn5250
@hensn5250
Feb 18 2018 21:53
sure thing
DMsalati
@DMsalati
Feb 18 2018 21:54
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:57
do you need the body and head stuff inside code pen?
Tom
@moT01
Feb 18 2018 21:57
@nicolaimagnussen yes, your page can look however you want - it does not have to look like the example
the html section on codepen - is the <body> tag - so that section would be what goes in the body tag
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:59
so you will not need the body tag inside codepen?
DMsalati
@DMsalati
Feb 18 2018 21:59
not
Tom
@moT01
Feb 18 2018 21:59
right - codepen will put it for you
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:59
is it a bad practice to use position absolute?
DMsalati
@DMsalati
Feb 18 2018 21:59
no its not required
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:59
I am really new at CSS, thanks guys for the friendly answers
Tom
@moT01
Feb 18 2018 21:59
there's a settings area for <head> stuff and adding libraries
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 21:59
I am like a child learning to walk...
Tom
@moT01
Feb 18 2018 22:00
nothing wrong with absolute
depends how you use it i suppose
DMsalati
@DMsalati
Feb 18 2018 22:00
im just using an external editor so i keep ctrl +a, ctrl +c, ctrl + v, all the time lol
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 22:00
Al, you don´t like code pen? you want the autocomplete?
DMsalati
@DMsalati
Feb 18 2018 22:00
yeah lmao its a lot fater
faster
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 22:01
I have webstorm and vscode, but i am trying what they recommended
But yeah you are probably right
DMsalati
@DMsalati
Feb 18 2018 22:01
personally i use atom
its really nice cuz you can use it for python, js, html, css, and many other languages
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 22:02
yeah, we use atom for arduino at my university
DMsalati
@DMsalati
Feb 18 2018 22:03
i like atom better
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 22:03
Even though I am really bad at css and I am just starting out, it is actually fun to play around trying to build this tribute page, I managed to center the div :) haha
I also like to have a border around the div to see what I am doing, is that a common practice?
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 22:04
Thanks, but I am trying without bootstrap actually
DMsalati
@DMsalati
Feb 18 2018 22:04
hey try using this site, it helped me when i was just starting off
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 22:04
haha
DMsalati
@DMsalati
Feb 18 2018 22:05
lmao ok
it would look ugly probably tho
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 22:05
but maybe that is a bad idea, I don´t know. But I think it can bee cool
yeah....
But like can I make the css nice without bootstrap ?
Or will that be really difficult?
DMsalati
@DMsalati
Feb 18 2018 22:05
you can do many things with css you just need to be good at it
Tom
@moT01
Feb 18 2018 22:06
@DMsalati there's a typo json[1][o]
DMsalati
@DMsalati
Feb 18 2018 22:06
personally i still cant function without bootstrap lol
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 22:06
Cool, I would like to really learn it
Tom
@moT01
Feb 18 2018 22:06
i cant function with bootstrap
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 22:06
even though I hate it right now... But that is just because I suck
DMsalati
@DMsalati
Feb 18 2018 22:06
@moT01 ooooh ok thank you
CamperBot
@camperbot
Feb 18 2018 22:06
dmsalati sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1008 | @mot01 |http://www.freecodecamp.org/mot01
DMsalati
@DMsalati
Feb 18 2018 22:06
lmao true
Tiago Correia
@tiagocorreiaalmeida
Feb 18 2018 22:07
@nicolaimagnussen focus on css only frameworks come afterde, at certain point those frameworks gonna lose their use in my opinion, with flexbox and tthe grid, so just css as a starter and to make easier the use of bootstrap after
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 22:08
thanks @tiagocorreiaalmeida, I will follow your tips. I believe in the same thing.
It is the same as learning c first instead of python, because you actually understand what is really going on under the hood instead of the computer fixing everything for you :P because that is not the reality in real life :D hehe
CamperBot
@camperbot
Feb 18 2018 22:08
nicolaimagnussen sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 502 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Aditya
@ezioda004
Feb 18 2018 22:09
Why not use both grid/flexbox and bootstrap ¯(ツ)
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 22:12

https://codepen.io/nicolaimagnussen/pen/RQQWXv

I am trying to get the red div to be a quare that is kind off in the middle and holds the green tribute div in place like the tribute page example, am I onto something?

I am not really understanding the box model though, but I am just trying stuff at this point
I found out
hensn5250
@hensn5250
Feb 18 2018 22:24
@nicolaimagnussen A simplified explanation of the box model is like this. Imagine you have the letter A inside of a clear box. A is the content. The space inside the box surrounding A is the padding, the actual box itself is the border and the space outside of the box is the margin. content->padding-> border-> margin , where padding and margin are space
Anders Nicolai Magnussen
@andersnicolaimagnussen
Feb 18 2018 22:27
Thanks
I am now trying to put the unordered list in the middle
so I tried text align but that just moved the text and the bullet point was on the left.
Is this the case where I should use css to talk to inner elements
div.someting
@hensn5250 thanks, it actually made sense I am drawing it on a piece of paper right now
CamperBot
@camperbot
Feb 18 2018 22:28
nicolaimagnussen sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:
api offline