These are chat archives for FreeCodeCamp/HelpFrontEnd

12th
Feb 2018
Tom
@moT01
Feb 12 2018 00:03
@brittanyrutherford sounds like that would work
Dr-D-M
@Dr-D-M
Feb 12 2018 00:36
hi humans, you got a minute?
Tom
@moT01
Feb 12 2018 00:36
@Dr-D-M
Dr-D-M
@Dr-D-M
Feb 12 2018 00:36
I am revisiting functions and all and I can't get this to work
<script type="text/javascript">
var number = document.querySelector('.numberWrite');
var yourNumber = document.querySelector('p');
    function add7(num){
        return num + 7;
    }
    number.onchange = function(){
        var num = number.value;
        if(isNaN(num)){
            yourNumber.textContent = 'You need to write a number, sweetheart!';
        }else{
            yourNumber.textContent = add7(num), num;
        }
    }
</script>
if I do it in the console. i get the right result which is given any number must return that number plus 7
I can get it on the console but not on the html
you know why is that ?
Tom
@moT01
Feb 12 2018 00:38
try innerHTML instead of textContent maybe
might help to show the html
Stephen James
@sjames1958gm
Feb 12 2018 00:40
@Dr-D-M yourNumber.textContent = add7(num), num the result of add7(num), num is num which is not changed by add7
Dr-D-M
@Dr-D-M
Feb 12 2018 00:41
ah sorry for that, I've been playin around with it, and forgot to put '+' instead
but, anyway with '+' I got the same result @sjames1958gm how can I fix it? what do I need to do?
Stephen James
@sjames1958gm
Feb 12 2018 00:42
@Dr-D-M When you don't enter a number do you get the error message
Dr-D-M
@Dr-D-M
Feb 12 2018 00:43
@sjames1958gm yes, I get the error message and all, the only issue is that I cannot get the result of num + 7
for example, if you write 3 it should return 10
Stephen James
@sjames1958gm
Feb 12 2018 00:44
And what do you get?
I might be that var num is a string so you get 373?
Dr-D-M
@Dr-D-M
Feb 12 2018 00:45
that's right, I got that
but it should return an addition
Stephen James
@sjames1958gm
Feb 12 2018 00:46
in your else try
num = +num
or
num = Integer(num)
Dr-D-M
@Dr-D-M
Feb 12 2018 00:46
on the anonymous function?
Stephen James
@sjames1958gm
Feb 12 2018 00:46
@Dr-D-M yes
Dr-D-M
@Dr-D-M
Feb 12 2018 00:48
let me try it out
@sjames1958gm thank you very much man!!!
CamperBot
@camperbot
Feb 12 2018 00:50
dr-d-m sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8963 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Dr-D-M
@Dr-D-M
Feb 12 2018 00:50
why did that work??
Stephen James
@sjames1958gm
Feb 12 2018 00:51
@Dr-D-M When you pull the value out of the DOM element it is a string. If you don't convert it to a number then
num + 7 is string concatenation and not number addition
Dr-D-M
@Dr-D-M
Feb 12 2018 00:51
@sjames1958gm I see now, thanks again... May god sent you some sexy maid
CamperBot
@camperbot
Feb 12 2018 00:51
dr-d-m sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Stephen James
@sjames1958gm
Feb 12 2018 00:52
@Dr-D-M lol - thanks
CamperBot
@camperbot
Feb 12 2018 00:52
sjames1958gm sends brownie points to @dr-d-m :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @dr-d-m |http://www.freecodecamp.org/dr-d-m
Heathercoraje
@Heathercoraje
Feb 12 2018 01:42
@SweetCodingInc :) It took me ages
stevangrbic
@stevangrbic
Feb 12 2018 01:42
@sjames1958gm When you pull the value out of the DOM element it is a string. If you don't convert it to a number then
num + 7 is string concatenation and not number addition
Is it num=+num "shorter" version of Number(num)? or any other way converting num to integer would do? :)
Stephen James
@sjames1958gm
Feb 12 2018 01:45
@stevangrbic There are multiple ways to convert from string to number, some of them are less obvious than other.
Less obvious can often lead to bugs.
stevangrbic
@stevangrbic
Feb 12 2018 01:47
yes, that is what I was wondering, num=+num i most likely most obvious, isn't it? (could be used as most common way, at least in simple tasks)
Stephen James
@sjames1958gm
Feb 12 2018 01:48
@stevangrbic the leading + can be less obvious in some cases, maybe not in this one
stevangrbic
@stevangrbic
Feb 12 2018 01:49
gracias
Stephen James
@sjames1958gm
Feb 12 2018 01:53
@stevangrbic :+1:
dinesh
@1532j0004kg
Feb 12 2018 01:53
@moT01 @RomchyFCC thanks for ur feedbacks , i will make change
CamperBot
@camperbot
Feb 12 2018 01:53
1532j0004kg sends brownie points to @mot01 and @romchyfcc :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @romchyfcc |http://www.freecodecamp.org/romchyfcc
:cookie: 982 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Feb 12 2018 02:28
982
Dr-D-M
@Dr-D-M
Feb 12 2018 03:22
hello again humans
would you help me out here?

<script type="text/javascript">
var word = document.querySelector('.newText');
var newWord = document.querySelector('p');
    function capitalize(string){
        return string[0].toUpperCase() + string.slice(1);
    }

    word.onchange = function(){
        var string = word.toString();
        if(isNaN(word)){
            newWord.textContent = 'write one word, princess';
        }else{

            newWord.textContent = capitalize(string);
        }
    }

</script>
this code above is suppose to return any string with first letter capital, and, it is not returning what it should be because surely I am doing something wrong
and it happens that I don't have a clue
do you know why is that? Thanks in advance and thanks for reading, would you help me out? humans
Tom
@moT01
Feb 12 2018 03:28
what part isnt working
try this before the return string[0] = string[0].toUpperCase()
Claudio Restifo
@Marmiz
Feb 12 2018 03:30
@Dr-D-M the capitalise function itself is correct.
It's the onchange that leave me perplexed. Afaik it's supported on input, select and such...
To which element are you trying to listen the change?
Also would be nice to have a bin or a pen to actually see the code
Dr-D-M
@Dr-D-M
Feb 12 2018 04:12
@Marmiz well, it should change the string, I mean, when you type any word, it should return the same word but with a capital letter
@moT01 it does not return the same word but with capital
for instance: if you write "exwife" it should return "Exwife"
Claudio Restifo
@Marmiz
Feb 12 2018 04:23
@Dr-D-M the function does that, the point is that i think it never gets triggered because the onchange event is not firing up.
Have you tried adding a console.log in there to see if the function actually ever gets called?
Dr-D-M
@Dr-D-M
Feb 12 2018 04:24
@Marmiz yes, I tried it out in the console
and it works
it returns the whole function code on the console
Claudio Restifo
@Marmiz
Feb 12 2018 04:28
@Dr-D-M no I meant adding a console.log inside the function to see if the function ever gets called:
    function capitalize(string){
        console.log('capitalize has been called');  // let's see if this function ever gets called
        return string[0].toUpperCase() + string.slice(1);
    }
if you don't see nothing in console means that there's something wrong in the word.onchange method.
p.s. again a pen or a bin to actually see the code would help in helping you out :)
Dr-D-M
@Dr-D-M
Feb 12 2018 04:37
@Marmiz no, is not being called
give me a century and I put it on codepen
Claudio Restifo
@Marmiz
Feb 12 2018 04:38
maybe just a jsbin with the relevant part is enough :)
but I stand with my original statement that onchange is used for input, forms and stuff... so mind where/what you are actually listening to :)
check it out, man
I don't know how to do a bin
Claudio Restifo
@Marmiz
Feb 12 2018 04:55

@Dr-D-M ok now makes sense:

1 - you have to access the value of the input:

var string = word.toString(); // wrong
var string = word.value.toString(); // you want the input value

2 - this means that you have to do your comparison here to the value as well:

if(isNaN(word))

( word is `<input type="..." />, you want word.value)

Dr-D-M
@Dr-D-M
Feb 12 2018 04:58
@Marmiz I changed that on the var string
and the last thing you said, but still got the same result
Claudio Restifo
@Marmiz
Feb 12 2018 04:58
3 - since you are using a type="text" input you should know thateven is a user type a number it will be passed as a string, so your isNan is pretty useless
Dr-D-M
@Dr-D-M
Feb 12 2018 04:59
damn! jaja
so, what should I do? erase that?
change that for if(!word)?
Claudio Restifo
@Marmiz
Feb 12 2018 05:05
you should check word.value and not just word.
also you want to check if is false, since you want to know when is "not not a number"
isNaN('37');      // false: "37" is converted to the number 37 which is not NaN
isNaN('123ABC');  // true:  parseInt("123ABC") is 123 but Number("123ABC") is NaN
probably a read to the documentation will help you
Bjorn van de Peut
@bjorno43
Feb 12 2018 05:08
'use strict';
isNaN('37'); // true
:trollface:
Wait, I stand corrected. Apperently strict doesn't work on that, lol
Claudio Restifo
@Marmiz
Feb 12 2018 05:11
@bjorno43 isNaN is a wild horse. If I had to do a validation I'd just use a regex in this case....
but I believe it's worth a try/test for him :)
i mean isNaN('blabla') gives true ;)
Bjorn van de Peut
@bjorno43
Feb 12 2018 05:12
Ye I think isNaN shouldn't be relied on rly. But regex should be a last resort as well. It's way to resource intensive
Claudio Restifo
@Marmiz
Feb 12 2018 05:12
also the infamous empty string that gets converted to 0
Heathercoraje
@Heathercoraje
Feb 12 2018 08:06
yo yo
does anyone know how to install these peer dependencies? I am setting up eslint for an react tutorial
npm WARN eslint-plugin-prettier@2.6.0 requires a peer of prettier@>= 0.11.0 but none is installed. You must install peer
dependencies yourself.
npm WARN eslint-plugin-react@7.6.1 requires a peer of eslint@^3.0.0 || ^4.0.0 but none is installed. You must install pee
r dependencies yourself.
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 08:14
@Heathercoraje just do npm update
Heathercoraje
@Heathercoraje
Feb 12 2018 08:52
@SweetCodingInc Done that.
What I am basically doing it I am editing config for eslint
module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },

  extends: ["airbnb", "prettier"],
  parserOptions: {
    ecmaFeatures: {
      experimentalObjectRestSpread: true,
      jsx: true
    },
    sourceType: "module"
  },
  plugins: ["react"],
  rules: {
    indent: ["error", "tab"],
    "linebreak-style": ["error", "unix"],
    quotes: ["error", "single"],
    semi: ["error", "always"]
  }
};
then when I try to lint an file, it says it can't find the airbnb and prettier config when I actually see them inside node.modules
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 08:56
@Heathercoraje I see.. What config is this?
eslint.config.json?
Heathercoraje
@Heathercoraje
Feb 12 2018 08:58
.eslintrc.js
I have another called .eslintrc.json
{
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["prettier"],
  "parserOptions": {
    "ecmaVersion": 2016,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}
This didn't work so I did eslint --init to see if it works then same errors. I see all of those congif-airbnb, plugins-prettier inside node_modules but it says it can't be found.
I can't think of any other solutions then I might just reinstall all depencies..
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 09:01
@Heathercoraje do your .eslintrc.js and node_modules exist at the same level?
Jefferson
@jeffersonnnn
Feb 12 2018 09:10

hi guys, i need help with my reactjs code. I can't get my code to output in the browser . Here is a link to a code pen with the index.html and the JSX

https://codepen.io/jeffersonnnn/pen/XZRoEK

as an alternative, here is the index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Indecision App</title>
</head>
<body>

    <div id="app"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="/public/scripts/app.js"></script>
</body>
</html>

-here is the jsx

 console.log('App.js is running!');

var template = <h1>You will figure this out</h1>;
var appRoot = document.getElementById('app');

ReactDOM.render(template, appRoot);

here is the complied javsascript


'use strict';

console.log('App.js is running!');

var template = React.createElement(
  'h1',
  null,
  'You will figure this out'
);
var appRoot = document.getElementById('app');

ReactDOM.render(template, appRoot);
Claudio Restifo
@Marmiz
Feb 12 2018 09:19
@jeffersonnnn I'm seeing an h1 that says you will figure this out, so I guess it's working.
what were you expecting?
Jefferson
@jeffersonnnn
Feb 12 2018 09:25
@Marmiz it isn't printing on my browser.
Claudio Restifo
@Marmiz
Feb 12 2018 09:27
@jeffersonnnn try refreshing :)
are you using codepen or are you trying to run it by yourself
Jefferson
@jeffersonnnn
Feb 12 2018 09:29
@Marmiz thanks for talking me through this, first of all.
CamperBot
@camperbot
Feb 12 2018 09:29
jeffersonnnn sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1154 | @marmiz |http://www.freecodecamp.org/marmiz
Jefferson
@jeffersonnnn
Feb 12 2018 09:31
@Marmiz i am running the project on my local machine. When i opened my devtools, i found an error marker attached to <script src="/public/scripts/app.js"></script> which says failure to load resource, the server responded with error of 404 (not found)
Claudio Restifo
@Marmiz
Feb 12 2018 09:32
@jeffersonnnn if you want to use JSX you need Babel to transpile the code.
so either you set it up or you use react without jsx
Jefferson
@jeffersonnnn
Feb 12 2018 09:34
@Marmiz thanks man. i figured it out. My path to the app.js file was a little skewed. Thanks for talking me through this again!
CamperBot
@camperbot
Feb 12 2018 09:34
jeffersonnnn sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
api offline
Claudio Restifo
@Marmiz
Feb 12 2018 09:38
:+1: happy to help.
Heathercoraje
@Heathercoraje
Feb 12 2018 09:46
@SweetCodingInc Yes it does.
Dany Din
@danydin
Feb 12 2018 10:19
If i only declare class for col-md what happens when it is being viewed by other size devices?
Claudio Restifo
@Marmiz
Feb 12 2018 10:26
@danydin goes from that size to bigger. So in this case sm is untouched but lg and xlg will take the md property.
or at least was so in v3. Don't know about v4
Dany Din
@danydin
Feb 12 2018 10:27
oh ok and what will be shown to the sm devices for example?
if i state nothing
@Marmiz thanks
CamperBot
@camperbot
Feb 12 2018 10:28
danydin sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1156 | @marmiz |http://www.freecodecamp.org/marmiz
Claudio Restifo
@Marmiz
Feb 12 2018 10:28
won't be any css, so whatever is inherit
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 10:48
@Heathercoraje Sorry.. I was away.. Were you able to get it working?
Dany Din
@danydin
Feb 12 2018 10:51
@SweetCodingInc can you help me change my col-md to have more offset because when i try do it the text in the cetner moves too
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 10:52
@danydin You have codepen?
If so post it
Dany Din
@danydin
Feb 12 2018 10:52
its on my site :)
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 10:52
link?
@danydin alright.. what do you want to fix here?
Dany Din
@danydin
Feb 12 2018 10:56
basically i want to make it smaller
more center
its too wide
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 10:57
You mean the content?
Dany Din
@danydin
Feb 12 2018 10:57
yes the whole blog section
something like col-md-8
but when i try it confuse my text.. even with offset/push etc
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 10:59
have you tried doing class="col-md-8 col-md-offset-2" instead of class="col-lg-8 col-lg-offset-2"?
I could see it center aligned properly
Dany Din
@danydin
Feb 12 2018 11:01
moment will check again
Stephen James
@sjames1958gm
Feb 12 2018 11:03
@danydin It appears you have a col-lg-8 style in your style.css ?
Remove that and the offset works fine
Dany Din
@danydin
Feb 12 2018 11:04
yay james is here wow i remmber you from year + ago
Stephen James
@sjames1958gm
Feb 12 2018 11:04
@danydin :wave:
Dany Din
@danydin
Feb 12 2018 11:04
in the js chat
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 11:05
@sjames1958gm good catch
Stephen James
@sjames1958gm
Feb 12 2018 11:05
@danydin The key is to use the devtools inspector - then you can tell where certain characteristics come from.
Where is my margin, padding, etc. being used from.
Dany Din
@danydin
Feb 12 2018 11:06
ah yes lol my mistake :p removed it now
@SweetCodingInc @sjames1958gm thanks!
CamperBot
@camperbot
Feb 12 2018 11:06
danydin sends brownie points to @sweetcodinginc and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
:star2: 8964 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Dany Din
@danydin
Feb 12 2018 11:06
yes i know how to use it the problem is that i dont have enough experince to always detect where i need to edit to make it works as i want to
Stephen James
@sjames1958gm
Feb 12 2018 11:08
Sometimes, just going there even when you don't have problems to get a feel for how it works.
Dany Din
@danydin
Feb 12 2018 11:10
yes i use it a ton overall.. i still though didnt figured how to fix it :/
there are so many divs i dont know where to apply it to make it works properly @sjames1958gm
i put col-md-10 col-md-offset-1 text-center on the whole content
anywhere i can learn how to find the right place to add the col classes with all the divs that are out there? @sjames1958gm @SweetCodingInc for once and ever ;)
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 11:16
@danydin If something is right or wrong depends on the context.
I guess, experimentation is the only way to know for sure
Dany Din
@danydin
Feb 12 2018 11:23
ok
thanks
Long Nguyen
@longnt80
Feb 12 2018 11:26

@danydin

anywhere i can learn how to find the right place to add the col classes with all the divs that are out there?

learn the devtools

Dany Din
@danydin
Feb 12 2018 11:26
i know it well so just try put it on each palce and see the result lol?
i thought there's a strcture for the div's and where to put classes in them
Long Nguyen
@longnt80
Feb 12 2018 11:28
@danydin for anything related to bootstrap's classes, you have to read bootstrap's docs
Dany Din
@danydin
Feb 12 2018 11:30
@longnt80 thanks
CamperBot
@camperbot
Feb 12 2018 11:30
danydin sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 679 | @longnt80 |http://www.freecodecamp.org/longnt80
Dany Din
@danydin
Feb 12 2018 11:32
but in general what each div does? it take a whole row and put it as block? @longnt80
Long Nguyen
@longnt80
Feb 12 2018 11:33
@danydin you mean what the actual css styles behind those classes?
like what col-md-10 does?
Dany Din
@danydin
Feb 12 2018 11:33
just about div element itself ..
so ill get the reason why they use 1 for containr , 1 for row etc..
no this i know already ;)
Long Nguyen
@longnt80
Feb 12 2018 11:34
div is just a block element
not sure what you want to know?
div is the same without class
Dany Din
@danydin
Feb 12 2018 11:36
to understand why for example bootstrap use 1 div for cotnainer 1 for row and then 1 for the col.. whats it purpose
just for my understanding
Long Nguyen
@longnt80
Feb 12 2018 11:36
the difference is their classes
Dany Din
@danydin
Feb 12 2018 11:36
yes but you can ptu them all together
Long Nguyen
@longnt80
Feb 12 2018 11:37
just open the devtool and inspect those class
Dany Din
@danydin
Feb 12 2018 11:37
why need to create them in seperated divs
okk
Long Nguyen
@longnt80
Feb 12 2018 11:39
because there's no way you can divide a div into parts
Dany Din
@danydin
Feb 12 2018 11:42
so one is responsible for the outer most strcutre of the page then the row for th whole content in it etc
like square in square in square
i need to warp my head think more like this haha
but at least i grasped it .. ;)
@longnt80 thanks
CamperBot
@camperbot
Feb 12 2018 11:43
danydin sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
api offline
LydaTech
@lydatech
Feb 12 2018 11:46
@danydin figure out the BS reasoning?
Dany Din
@danydin
Feb 12 2018 11:46
kind of lol
notreally bs more practical but yea ;)
Stephen James
@sjames1958gm
Feb 12 2018 11:47
@danydin
You start with container
  • container can have one or more rows
    • rows can have one or more cols
      • You can then embed a container in the col and it starts over
LydaTech
@lydatech
Feb 12 2018 11:48
almost ^
Dany Din
@danydin
Feb 12 2018 11:48
what you mean have one or mor rows/cols? @sjames1958gm
LydaTech
@lydatech
Feb 12 2018 11:48
@danydin what version of BS are you wanting to use?
Dany Din
@danydin
Feb 12 2018 11:49
ahh bootstrap i thought u meant bullshit loll
im on 3.5
aren't rows/cols are already ready to be used inside any div element? @sjames1958gm
or any other element?
LydaTech
@lydatech
Feb 12 2018 11:51
@danydin bootstrap versions are 3.3.7 or 4.0 which one do you want to use
Stephen James
@sjames1958gm
Feb 12 2018 11:51
@danydin here is a container with two rows, with each row have two columns
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
Dany Din
@danydin
Feb 12 2018 11:53
ohh now i get it.. and each row take part from the 'box' of it parent (container) element?
so in this example there are 2 boxes splited 50% 50%, if you would add another row it would be splitted to 3
boxes of 33% each from it parent container and then how many cols you put in each row will take whatever % from the % of the row box depends how many % the row is of it parent element right? @sjames1958gm
Stephen James
@sjames1958gm
Feb 12 2018 11:56
@danydin Yes. Rows divide up vertical content and columns divide up horizontal content.
Dany Din
@danydin
Feb 12 2018 11:57
so if i've 2 rows they will go one below the other where col will use the same width
Stephen James
@sjames1958gm
Feb 12 2018 11:57
yes
Dany Din
@danydin
Feb 12 2018 11:58
whats the purpose of the container ? to make it more arranged for the eye?
i love your eli5 if you know what it is haha
Stephen James
@sjames1958gm
Feb 12 2018 11:59
@danydin there are css settings in the container class that affect the whole container
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 11:59

eli5

Just do what I tell you or be ready to get spanked

Dany Din
@danydin
Feb 12 2018 11:59
noooooo its explain like im 5 :o
you've blue mind code cody
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 11:59
That's how 5 year olds need to be talked to :P
Dany Din
@danydin
Feb 12 2018 11:59
you wanna program my new home made porn site?
i think it will fits u good ;)
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 12:00
:laughing:
I'd love to but I'll just end up watching it instead of coding ;)
Dany Din
@danydin
Feb 12 2018 12:00
this is what they meant with the pharse business & pleasure
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 12:01
Exactly
but usually, I tend to place emphasis on pleasure, vastly more than I do for business
Dany Din
@danydin
Feb 12 2018 12:02
for sure
but i hope you dont combine them ah ;)
@sjames1958gm ok thank you very much sir
CamperBot
@camperbot
Feb 12 2018 12:03
danydin sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Stephen James
@sjames1958gm
Feb 12 2018 12:03
@danydin :+1:
Dany Din
@danydin
Feb 12 2018 12:07
nevermind i figured it just will effect the content in it but not the style
wow man so proud i figured finally all about the strcture of bootstrap gridddd system
Stephen James
@sjames1958gm
Feb 12 2018 12:07
@danydin :checkered_flag:
Dany Din
@danydin
Feb 12 2018 12:09
ohh papaa
why when i change it to xs it dissaper lol
as if I want this style on all kind of devices
LydaTech
@lydatech
Feb 12 2018 12:11
not sure of your question
Dany Din
@danydin
Feb 12 2018 12:12
change the col to xs instad of md
it dissaper papa
LydaTech
@lydatech
Feb 12 2018 12:13
look again. I just didnt style the col.xs
Dany Din
@danydin
Feb 12 2018 12:15
ahh i thought bootstrap style it all already?
i mean at least the basic.. like why it dissaper lol or it just covered by the other styles that u added?
LydaTech
@lydatech
Feb 12 2018 12:16
nothing is styled 100% its a framework. A framework is just a set of building blocks for you to build upon
Dany Din
@danydin
Feb 12 2018 12:17
cool something else that i learned from you pen is that height infleunce the background color and surface and not the actually content :o
LydaTech
@lydatech
Feb 12 2018 12:17
look again at my pen. Then resize to a smaller screen size
Dany Din
@danydin
Feb 12 2018 12:18
yes they stay horizontal becasue the xs :)
but the height surprised me.. why it changed the background and not the actual text
LydaTech
@lydatech
Feb 12 2018 12:19
all i set in my css was the height. I didnt style the font size
Dany Din
@danydin
Feb 12 2018 12:19
i thoguht the height will infelucne the position of the text or someting
LydaTech
@lydatech
Feb 12 2018 12:20
dont talk like that. It isnt appropriate for this chat
Dany Din
@danydin
Feb 12 2018 12:21
ok papa
only you can speak like that
wthh who removed my messages?? im just tryin to wake up the chat a little bit
LydaTech
@lydatech
Feb 12 2018 12:25
@danydin I did. Like I said it isnt appropriate
Dany Din
@danydin
Feb 12 2018 12:26
but why don't remove what i said above it
LydaTech
@lydatech
Feb 12 2018 12:27
no need
Dany Din
@danydin
Feb 12 2018 12:27
how can i be also papa
so i can also speak how i want when i want where i want?
LydaTech
@lydatech
Feb 12 2018 12:28
not exactly
Dany Din
@danydin
Feb 12 2018 12:28
i thought usa had a free speech law papa i guess trumped fckd it all ah :clap:
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 12:29
@danydin Not Trump... Stupid people
Dany Din
@danydin
Feb 12 2018 12:29
ohhhh here is my friend
Dany Din
@danydin
Feb 12 2018 12:29
i was confusing between you too just now i realized it
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 12:29
technically you do have free speech here, but people go to social media and shame you.. Making you reluctant to engage in speaking your mind
Dany Din
@danydin
Feb 12 2018 12:31
yes you are 100% right @SweetCodingInc
papa my mistake i thought u were sweet coding for a moment cuz i spoke with him about those stuff earlier
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 12:31
:laughing:
Dany Din
@danydin
Feb 12 2018 12:31
what u laugh ** .. i almost got banned becasue u didnt come earlier to save me
nice comics papa i think ajit pai would love to use it too
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 12:34
@danydin You were on the verge of getting banned because of me? How is that possible?
Dany Din
@danydin
Feb 12 2018 12:36
because i was allegedly accused to seduce mod on fcc chat for some explicit activites
because i thought it' was you!!!
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 12:41
geez
"seduce" :laughing:
what the hell
Dany Din
@danydin
Feb 12 2018 12:42
yes well , i need to ask papa first for premission to tell you what exactly happened..
LydaTech
@lydatech
Feb 12 2018 12:50
too early for trolls
Roman Struna
@RomchyFCC
Feb 12 2018 14:21
does anyone know why FCC weather API is so inconsistent with the weather image?
sometimes it shows, usually doesn't, same code, could it be too many requests?
LydaTech
@lydatech
Feb 12 2018 14:24
@RomchyFCC could be. Also could be timing out on the request to your browser
Roman Struna
@RomchyFCC
Feb 12 2018 14:24
hmm is there anyway to fix it? what could cause the time out?
Stephen James
@sjames1958gm
Feb 12 2018 14:26
@RomchyFCC You should be able to see any errors like that in the console.
Too many requests certainly is a possibility.
Roman Struna
@RomchyFCC
Feb 12 2018 14:26
oh, no errors in the console :/
Stephen James
@sjames1958gm
Feb 12 2018 14:27
@RomchyFCC Odd
Roman Struna
@RomchyFCC
Feb 12 2018 14:27
when i was working on the weather app, it always showed the result for weather icon, now i console logged it and it sais it's undefined :/
oh wow, i found the reason!
i didn't know there are more possible object in the array
there was always only one when i was working on the project
Roman Struna
@RomchyFCC
Feb 12 2018 14:34
nope, didn't work, the api is missing the info for my current position....
can some try this and tell me if they see an icon
Aditya
@ezioda004
Feb 12 2018 14:37
@RomchyFCC Works for me.
Marianissimus
@Marianissimus
Feb 12 2018 14:37
@RomchyFCC works for me. maybe style the C / F like an actual button, so that we know it is one
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 14:37
@RomchyFCC No issues on my end either
alpox
@alpox
Feb 12 2018 14:38
@RomchyFCC There is no icon at my place for the weather data at index 0
Roman Struna
@RomchyFCC
Feb 12 2018 14:38
SUPER thanks @ezioda004 and @Marianissimus ...the button is google style :D
thanks @SweetCodingInc aswell! feeling much better now
CamperBot
@camperbot
Feb 12 2018 14:38
romchyfcc sends brownie points to @ezioda004 and @marianissimus and @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
:cookie: 463 | @marianissimus |http://www.freecodecamp.org/marianissimus
:cookie: 453 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Roman Struna
@RomchyFCC
Feb 12 2018 14:38
@alpox where are you from :O?
I'm from eu and it worked in the morning
and when i check out different locations, they all have an icon at position 0
alpox
@alpox
Feb 12 2018 14:39
@RomchyFCC switzerland
image.png
Roman Struna
@RomchyFCC
Feb 12 2018 14:39
exactly
I have that too
and if you try to get the icon in place 1
you don't get a link so you are again left empty handed
alpox
@alpox
Feb 12 2018 14:40
Yes
Roman Struna
@RomchyFCC
Feb 12 2018 14:41
well i guess the api isn't perfect, as long as the issues are out of my hands, i'm good,
thanks for the input @alpox :)
CamperBot
@camperbot
Feb 12 2018 14:41
romchyfcc sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
alpox
@alpox
Feb 12 2018 14:41
Looks like there is a problem with the api
CamperBot
@camperbot
Feb 12 2018 14:41
:star2: 1537 | @alpox |http://www.freecodecamp.org/alpox
Raghav Mundra
@Raghav17
Feb 12 2018 14:44
How can I access the key-value pairs from this code?
([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" })
Say I want to access "Mercutio".
Mark Pearyer
@marcusp619
Feb 12 2018 14:46
hey @Raghav17
you there
Marianissimus
@Marianissimus
Feb 12 2018 14:46
@Raghav17 should that be an array of objects? close the []
Raghav Mundra
@Raghav17
Feb 12 2018 14:47
@Marianissimus It is closed and another key value has started after that
@marcusp619 Hey, yes!
Marianissimus
@Marianissimus
Feb 12 2018 14:48
oh, i see, ok
so just find the right index of the array item, then use .first to access Mercutio
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 15:05
@Raghav17 store itin some variable and access using index
Markus Kiili
@Masd925
Feb 12 2018 15:06
@Raghav17 You need to loop over the keys of source (the parameter that holds the object, { last: "Capulet" } in this test case).
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 15:07
also, why do you have it wrapeed in ()?
Markus Kiili
@Masd925
Feb 12 2018 15:07
@SweetCodingInc That is one of the test calls to the function.
Stephen James
@sjames1958gm
Feb 12 2018 15:07
@SweetCodingInc It's the input to a function that he copied from the challenge.
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 15:07
@Masd925 I see
@sjames1958gm :+1:
what challenge is this?
Stephen James
@sjames1958gm
Feb 12 2018 15:10
@SweetCodingInc I forget, its the one where you filter out the objects from an array that don't have the props/values of the second parameter
Dany Din
@danydin
Feb 12 2018 15:10
@sjames1958gm why <p class="text-center"><a href="The-Power-Of-Self-Brainwash">Continue Reading...</a></p> works but when i put the class in the a element it doesn't work?
Stephen James
@sjames1958gm
Feb 12 2018 15:11
@danydin Doesn
@danydin Doesn't work? like it doesn't center?
Dany Din
@danydin
Feb 12 2018 15:11
yep inside a doesnt work
Stephen James
@sjames1958gm
Feb 12 2018 15:11
@danydin What does your css associated with the class text-center look like?
Marianissimus
@Marianissimus
Feb 12 2018 15:11
@danydin you want to center an a tag?
Dany Din
@danydin
Feb 12 2018 15:11
but on the parent it does
i thought that child override parent
but maybe the p is the element and not the a itself thats why the a doesnt effect the position?!
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 15:12
@danydin p is a block level element so it fills the container.. a tag is inline element so it scales to fit it's content. So setting center alignment on a works but you don't see it as there is no place for content movement
Stephen James
@sjames1958gm
Feb 12 2018 15:13
@SweetCodingInc :+1:
Dany Din
@danydin
Feb 12 2018 15:14
i seeee brother :) thanks again guyss @sjames1958gm @SweetCodingInc @Marianissimus
CamperBot
@camperbot
Feb 12 2018 15:14
danydin sends brownie points to @sjames1958gm and @sweetcodinginc and @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 464 | @marianissimus |http://www.freecodecamp.org/marianissimus
:cookie: 282 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
:star2: 8966 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
ogwel5
@ogwel5
Feb 12 2018 15:23
hey i need help...kindly
anyone around..it is about my html
Sweet Coding :)
@SweetCodingInc
Feb 12 2018 15:23
@ogwel5 ask away :D
Heathercoraje
@Heathercoraje
Feb 12 2018 15:33
@SweetCodingInc I could not figure it out yet. It might have to do with wrong versions of modules.
Thanks anyways
dinesh
@1532j0004kg
Feb 12 2018 15:50
anybody know good templates for college websites ? If u know please share
@1532j0004kg
dinesh
@1532j0004kg
Feb 12 2018 15:53
nocost :smile:
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 12 2018 15:56
No i mean just have a look at them and design your own page accordingly? @1532j0004kg
dinesh
@1532j0004kg
Feb 12 2018 15:56
ohh ok
i need templates
for free download
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 12 2018 15:57
what you can do is just go to a college website you like and save it
then download the application called Dreamweaver and you can edit it
@1532j0004kg
dinesh
@1532j0004kg
Feb 12 2018 15:57
i need free templates !
ok
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 12 2018 15:58
try wix.com or weebly
dinesh
@1532j0004kg
Feb 12 2018 15:59
ok :+1:
@MuhammedKarim thanks'
CamperBot
@camperbot
Feb 12 2018 15:59
1532j0004kg sends brownie points to @muhammedkarim :sparkles: :thumbsup: :sparkles:
:cookie: 118 | @muhammedkarim |http://www.freecodecamp.org/muhammedkarim
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 12 2018 16:01
:+1: @1532j0004kg
Bradkittle
@Bradkittle
Feb 12 2018 17:45
Can someone help me figure out why my anchor tag isnt working with my button
VaseJS
@VaseJS
Feb 12 2018 17:46
@Bradkittle show code
Ah wait, it didn't update
Stephen James
@sjames1958gm
Feb 12 2018 17:47
@Bradkittle Which anchor tag?
Bradkittle
@Bradkittle
Feb 12 2018 17:47
nvm it did
the button tags
Stephen James
@sjames1958gm
Feb 12 2018 17:48
@Bradkittle cool
Bradkittle
@Bradkittle
Feb 12 2018 17:48
But when I click on the button, I get nothing
dinesh
@1532j0004kg
Feb 12 2018 17:48
is passportjs is must for authorizing ?
Stephen James
@sjames1958gm
Feb 12 2018 17:49
@1532j0004kg it is the predominant library for that.
dinesh
@1532j0004kg
Feb 12 2018 17:50
it is also possible by checking on the records right ?
in the database
i ask is it must ? and if it is . then what is the speciality ?
@sjames1958gm can u please say ?
bcauz i confused in that . :worried:
Stephen James
@sjames1958gm
Feb 12 2018 17:53
@1532j0004kg
it is not a must, just that it has features that support a number of different auth methods
user/password, github, facebook, twitter, etc.
dinesh
@1532j0004kg
Feb 12 2018 17:54
user/password we using in mongodb right ?
socialmedias supports are pretty cool !
Stephen James
@sjames1958gm
Feb 12 2018 17:55
@1532j0004kg user/pass is mongo (could be other databases as well)
dinesh
@1532j0004kg
Feb 12 2018 17:56
thanks @sjames1958gm
CamperBot
@camperbot
Feb 12 2018 17:56
1532j0004kg sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8968 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
dinesh
@1532j0004kg
Feb 12 2018 17:56
:+1: got it !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Roman Struna
@RomchyFCC
Feb 12 2018 18:06

pseudo code

for element in array
    getJSON()=>
        use JSON info to form li's and append them to html

the problem I face is that my elements are not in order, all the sollutions to this problem on the stack overflow are too complicated to implement,
do any of you ahve an idea how I could solve an ordering problem in fetch JSON data

i also tried setting a timeout on the loop with no success xD

obviously, any help will be appreciated, as always :)
Stephen James
@sjames1958gm
Feb 12 2018 18:12
@RomchyFCC You know the number of values to request. Then as you receive the data, push to an array.
When the arr.length === number of requests, you can process them all at once (sorting the array as needed)
dinesh
@1532j0004kg
Feb 12 2018 18:12
please tell the use of jsonp=?
and what is jsonp = jsonp
in ajax
@sjames1958gm
Roman Struna
@RomchyFCC
Feb 12 2018 18:13
@sjames1958gm that's what i tried now but my arrays stay empty for some reason, i'll post the code
Stephen James
@sjames1958gm
Feb 12 2018 18:14
@1532j0004kg jsonp=? (assuming this is jquery) tells jquery to use the jsonp parameter for the
function that is built into the <script> tag. You'll need to read up on jsonp on wikipedia to better understand
Roman Struna
@RomchyFCC
Feb 12 2018 18:14
for (let i = 0; i < channels.length; i++) {
    let dataArray = [];
    $.getJSON(`${url}${channels[i]}${url2}`, data => {
      dataArray.push(data);
      })
    console.log(dataArray)
  }
this only stores the last one :/
utuniyal12
@utuniyal12
Feb 12 2018 18:14
can someone help me ....i am not able to add css class using javascript https://gist.github.com/anonymous/a56a8670f3644a63d4301996cb877766
Roman Struna
@RomchyFCC
Feb 12 2018 18:15
i should not have used let, I fixed it using a var which has bigger scope
Stephen James
@sjames1958gm
Feb 12 2018 18:15
@RomchyFCC Each loop has a different dataArray so you only get one entry per.
Move the dataArray outside the loop
@RomchyFCC I would move the array outside the loop, it makes it clearer that the array is for all of the loops not just one
Roman Struna
@RomchyFCC
Feb 12 2018 18:16
lol, i tried it once before but didn't work, but yea did it now and it did with let
Stephen James
@sjames1958gm
Feb 12 2018 18:16
@RomchyFCC :+1:
Roman Struna
@RomchyFCC
Feb 12 2018 18:16
yea silly mistake, need to go to sleep
thanks man @sjames1958gm
CamperBot
@camperbot
Feb 12 2018 18:16
romchyfcc sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8969 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 12 2018 18:16
@RomchyFCC :+1: :sleepy:
dinesh
@1532j0004kg
Feb 12 2018 18:18
@sjames1958gm :+1:
Happy night james bond :smile: :fire:
DMsalati
@DMsalati
Feb 12 2018 19:49
how can i make the search bar centered ?https://codepen.io/Muradmsalati/pen/MQpOGM?editors=1000
Eric Weiss
@eweiss17
Feb 12 2018 19:56
just gotta make sure your columns are set up correctly
your input also has 2 classes
you may want to try bootstrap 4 instead of 3
image.png
DMsalati
@DMsalati
Feb 12 2018 20:03
@eweiss17 ok thank you
CamperBot
@camperbot
Feb 12 2018 20:03
dmsalati sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 608 | @eweiss17 |http://www.freecodecamp.org/eweiss17
Eric Weiss
@eweiss17
Feb 12 2018 20:03
i switched it to bootstrap 4, put in justify-content-center, got rid of the offset
aRtoo
@artoodeeto
Feb 12 2018 20:20

hey guys i have a question. i have a file

mainStyle.scss
index.html
main-js.js

the main css is for the homepage. and on my home page i want to make a modal that pops up but i dont want the modal style to be put in the main.scss i dont want to clutter things. should i make a whole new different files? like this?

indexModal.html
modalStyle.scss
jsModal.js

or i can import the modal? any idea?

Eric Weiss
@eweiss17
Feb 12 2018 20:23
have you considered having a styles folder and js folder if you don't want clutter
DMsalati
@DMsalati
Feb 12 2018 20:29
@eweiss17 https://codepen.io/Muradmsalati/pen/MQpOGM?editors=1000 it does this when i use bootstrap 4, what am i doing wrong
Eric Weiss
@eweiss17
Feb 12 2018 20:31
probably some of the classes were renamed between 3 and 4
DMsalati
@DMsalati
Feb 12 2018 20:33
@eweiss17 ok ill go check the new documentations :worried:
Eric Weiss
@eweiss17
Feb 12 2018 20:34
i'm messing with it right now i'll fork it for u
DMsalati
@DMsalati
Feb 12 2018 20:35
@eweiss17 ok
may need some additional tweeking but looks more like what you had
DMsalati
@DMsalati
Feb 12 2018 20:41
@eweiss17 thank you so much, whenever i try to center stuff with bootstrap 4 i dont know how thats why i was using bootstrap 3
CamperBot
@camperbot
Feb 12 2018 20:41
dmsalati sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
api offline
Eric Weiss
@eweiss17
Feb 12 2018 20:42
justify-content-center and text-center
DMsalati
@DMsalati
Feb 12 2018 20:43
@eweiss17 thank you, what does justify content center do exactly ? do i need to use both of them text-center and justify ?
CamperBot
@camperbot
Feb 12 2018 20:43
dmsalati sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
api offline
Eric Weiss
@eweiss17
Feb 12 2018 20:43
if you switch line 3 from col-sm-6 to a larger number the search box will be larger
i switched it to 10 and it looks better
on the link i sent earlier you can see what it does
DMsalati
@DMsalati
Feb 12 2018 20:45
@eweiss17 yes it does you are right
@eweiss17 thanks again man
CamperBot
@camperbot
Feb 12 2018 20:45
dmsalati sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
api offline
Eric Weiss
@eweiss17
Feb 12 2018 20:45
it makes the columns of the row start at the center instead of the left
DMsalati
@DMsalati
Feb 12 2018 20:45
i see
Eric Weiss
@eweiss17
Feb 12 2018 20:47
the grid itself is built upon flexbox
Bradkittle
@Bradkittle
Feb 12 2018 20:47
What is a site I can use for background images
Eric Weiss
@eweiss17
Feb 12 2018 20:48
if you want to know more about that this is my favorite link https://css-tricks.com/snippets/css/a-guide-to-flexbox/
DMsalati
@DMsalati
Feb 12 2018 20:48
@eweiss17 sounds goo ive been using https://hackerthemes.com/bootstrap-cheatsheet/ but urs seems more detailed
Eric Weiss
@eweiss17
Feb 12 2018 20:50
that cheatsheet looks pretty cool
DMsalati
@DMsalati
Feb 12 2018 20:50
@eweiss17 yeah its fairly useful
Eric Weiss
@eweiss17
Feb 12 2018 20:51
I would recommend trying out a project not using a framework at all, makes you realize how much a framework makes things so much easier
@Bradkittle try this for photos
Bradkittle
@Bradkittle
Feb 12 2018 20:52
@eweiss17 Thank you
CamperBot
@camperbot
Feb 12 2018 20:52
bradkittle sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 609 | @eweiss17 |http://www.freecodecamp.org/eweiss17
Eric Weiss
@eweiss17
Feb 12 2018 20:52
for backgrounds where you don't want an image, someone else used this and looks like a good idea
@Bradkittle btw how to use the photos from unsplash, https://source.unsplash.com/ , scroll down to the 'Specific Photo' section
Ken Haduch
@khaduch
Feb 12 2018 20:57
@Bradkittle - I found a page with interesting backgrounds, too - http://lea.verou.me/css3patterns/ - even if you don't use them, it's interesting to see the possibilities. Although that page seems to be empty, currently. Here is http://lea.verou.me/2011/04/css3-patterns-gallery-and-a-new-pattern/ an article about it... I'm looking for some other link to it.
Aga
@aga87
Feb 12 2018 21:02
Hi, I'm building my first website which consists of more than one site. let's say i have index.html projects.html and contact.html. My question is: do i simply copy the head element and paste it into projects.html and contact.html ? or is it enough to have it just in the index.html ? Thanks
Ken Haduch
@khaduch
Feb 12 2018 21:03
@aga87 - each page has to have the <head> section, if it is loading important things like your CSS, etc. If you are creating discrete pages, then I would say that you have to copy the head section into each.
Aga
@aga87
Feb 12 2018 21:04
Thanks @khaduch Ken
CamperBot
@camperbot
Feb 12 2018 21:04
aga87 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3730 | @khaduch |http://www.freecodecamp.org/khaduch
Aga
@aga87
Feb 12 2018 21:06
by discrete pages do you mean contact.html? (in this example)
Ken Haduch
@khaduch
Feb 12 2018 21:12
@aga87 - I was thinking more of a scenario where you are having pages generated by a server - using PHP or Node, where you might "build" the pages on the fly and include the head section, for example, so you only have to have it represented in one place. But the browser has to "see" the head section for each page, if each page is distinct. Another way to look at it is when you switch to one of the other pages, say, from index.html to contact.html, if you have things in the <head> section of index.html, and contact.html is an entirely separate page being loaded, then you would not have the <head> from index.html any longer, so you need to have it as part of the HTML that is rendering contact.html. If you did some other construction of the page, for example just make one page with all of the content in separate <div> or <section> elements, and then hide / display them separately, they could be using the same <head> because they would all be part of one HTML page. It is possible that someone will chime in with other options...
DMsalati
@DMsalati
Feb 12 2018 21:17
@eweiss17 thats really cool
Ken Haduch
@khaduch
Feb 12 2018 21:18
@Bradkittle - that link that I posted for the CSS3 patterns http://lea.verou.me/css3patterns/ seems to load fine on Chrome, not on Opera (at least not on windows 10)...
Aga
@aga87
Feb 12 2018 22:04
thanks again @khaduch
CamperBot
@camperbot
Feb 12 2018 22:04
:star2: 3731 | @khaduch |http://www.freecodecamp.org/khaduch
aga87 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
Aga
@aga87
Feb 12 2018 22:20
Following from that- the website will consist of 7 sections - the common elements on each site is the navigation, a graphic displayed above the nav bar and the footer. So I created 7 .html files and I was going to copy paste all the common elements into each of my .html files. But now I am wondering whether it's a good practice to repeat the code like that? e.g. does it mean that my graphics will have to reload each time the user goes to a different section of this website? or should i do something along the lines @khaduch suggested? hiding/ displaying sections differently?
its a basic website - using only html and css
with perhaps some javascript at later stage
Gulsvi
@gulsvi
Feb 12 2018 22:23
@aga87 Usually it is a bad idea to duplicate HTML - if you make a fix in one place, you have to duplicate that fix across all the duplicate content. This is a limitation of HTML and CSS - and where JavaScript comes in handy to generate the HTML for you.
When the JS is generating the HTML, you just need to make a fix in one place (in the JavaScript code)
Aga
@aga87
Feb 12 2018 22:27
thanks @gulsvi
CamperBot
@camperbot
Feb 12 2018 22:27
aga87 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2601 | @gulsvi |http://www.freecodecamp.org/gulsvi
DMsalati
@DMsalati
Feb 12 2018 22:29
Gulsvi
@gulsvi
Feb 12 2018 22:30
@DMsalati Give your body element a height
Kaz Baig
@kbaig
Feb 12 2018 22:31
@DMsalati It'll work if you remove bootstrap (which is throwing an error). See console for error message
Aga
@aga87
Feb 12 2018 22:31
so that's why I haven't come across a topic on how to create a multi-page website in the html/css lessons? (i'm using w3school.com as well as codecamp). this topic should be covered in javascript tutorials?
Kaz Baig
@kbaig
Feb 12 2018 22:31
@aga87 You just need a tags to connect the pages
Gulsvi
@gulsvi
Feb 12 2018 22:31
@kbaig Are you sure? :) I don't think JS errors prevent CSS from working
Kaz Baig
@kbaig
Feb 12 2018 22:32
@gulsvi Try it
Gulsvi
@gulsvi
Feb 12 2018 22:32
body{
  background-image: linear-gradient( 135deg, #52E5E7 10%, #130CB7 100%);
  min-height: 100vh;
}
Aga
@aga87
Feb 12 2018 22:32
(I realised that my approach was wrong for exactly the reason you described @gulsvi .. having to correct all the files
Gulsvi
@gulsvi
Feb 12 2018 22:32
@kbaig Still no background because the body has no height
@aga87 Yes, maintainability is important - saves a lot of time and headaches down the road
Gulsvi
@gulsvi
Feb 12 2018 22:34
@kbaig Bootstrap css is not throwing an error though - yeah, if you remove the Bootstrap CSS, it works.
This person obviously wants to use bootstrap though :)
DMsalati
@DMsalati
Feb 12 2018 22:35
@gulsvi what should i put in height ?
@kbaig but what if i still want to use bootstrap for other stuff?
Kaz Baig
@kbaig
Feb 12 2018 22:35
I'm not knowledgeable about bootstrap, but you should be able to override its styling
Gulsvi
@gulsvi
Feb 12 2018 22:35
body{
  background-image: linear-gradient( 135deg, #52E5E7 10%, #130CB7 100%);
  min-height: 100vh;
}
Kaz Baig
@kbaig
Feb 12 2018 22:35
@gulsvi Is that a bootsrap thing? That you need to add a min-height
You don't under normal circumstances
Gulsvi
@gulsvi
Feb 12 2018 22:36
Yeah, bootstrap includes it's own normalize.css
Kaz Baig
@kbaig
Feb 12 2018 22:36
ohh it's a normalize thing
Gulsvi
@gulsvi
Feb 12 2018 22:36
which sets up different defaults to "normalize" it across all browsers
Kaz Baig
@kbaig
Feb 12 2018 22:36
gotcha
Gulsvi
@gulsvi
Feb 12 2018 22:36
That jQuery missing error will prevent bootstrap javascript from working, but won't affect CSS
(still a good idea to get dependencies sorted @DMsalati - jquery needs to be listed before bootstrap.js in the settings)
DMsalati
@DMsalati
Feb 12 2018 22:37
@gulsvi whats normalize ? and thank you for your help with the background
CamperBot
@camperbot
Feb 12 2018 22:37
dmsalati sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2602 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Feb 12 2018 22:38
@DMsalati Here is some more information on it: https://getbootstrap.com/docs/4.0/content/reboot/
It makes it so bootstrap looks the same in all browsers
DMsalati
@DMsalati
Feb 12 2018 22:39
ok i fixed the jquery and bootstrap order, ill make sure to read the link
Gulsvi
@gulsvi
Feb 12 2018 22:39
Well, to be specific, not the "same" but similar at least - because different browsers have different default styling settings
@DMsalati You have two versions of bootstrap.js - by the time you start the wikipedia project, it's time to understand what those files are for and how to set them up.
This introduction page shows which files are needed for full bootstrap functionality: http://getbootstrap.com/docs/4.0/getting-started/introduction/
DMsalati
@DMsalati
Feb 12 2018 22:57
@gulsvi ok thank you so much for your help, I know I should have been familiar with these things already, but I just kept putting them off haha. i prefer making things and learning while doing rather than reading and then doing if that makes sense ?
CamperBot
@camperbot
Feb 12 2018 22:57
dmsalati sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
Gulsvi
@gulsvi
Feb 12 2018 23:09
@DMsalati I'm the same way lol :) makes perfect sense
Here's a codepen with everything set up - helps to make this into a template for when you want to use bootstrap: https://s.codepen.io/gulsvi/pen/aqwLra?editors=1001
DMsalati
@DMsalati
Feb 12 2018 23:18
@gulsvi fr lol, thank you for the template. whats popper?
CamperBot
@camperbot
Feb 12 2018 23:18
dmsalati sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
Gulsvi
@gulsvi
Feb 12 2018 23:44
@DMsalati It's for Popovers and Tooltips: https://popper.js.org/