These are chat archives for FreeCodeCamp/HelpFrontEnd

30th
Sep 2017
iso
@iso1048
Sep 30 2017 00:34
@flyfishingbarbara @SkyC0der is in spain - i do not think he is coding for the 10 months that he is there.
you tried it!
@you-tried-it
Sep 30 2017 00:36
;)
hi :P
:O
piteto
@piteto
Sep 30 2017 01:19
:sparkles: :wave: :sparkles:
akosuadenell
@akosuadenell
Sep 30 2017 01:42

*{
margin: 0;
padding: 0;
border: 0;
}
html, body{
height: 100%;
}

body{
background: url(chase.jpg) no-repeat center center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;

}
img{

}
.container{
max-width: 600px;
margin: 0 auto;
text-align: center;
}

h1{
color: #FFFFFF;
font: 900 90px 'Pacifico', cursive;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
margin-bottom: 24px;
opacity: 0.5;
}

<!DOCTYPE html>

<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Chase Your Dreams</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Pacifico" rel="stylesheet">
<link href="style2.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="dreamchasers.png" alt="logo" width="120"/>
<nav>
</nav>
</header>
<div class = "container">
<h1>Chase Your Dreams</h1>

</div>
</body>
</html>

can anyone tell me why my logo isnt in the upper lefthand corner?
Screen Shot 2017-09-29 at 9.31.24 PM.jpg
sorry was trying to put a screenshot up
Screen Shot 2017-09-29 at 9.31.24 PM.jpg
iso
@iso1048
Sep 30 2017 01:47
@akosuadenell try removing html from this:
html, body{
  height: 100%;
}
akosuadenell
@akosuadenell
Sep 30 2017 01:48
@gothamknight wow thank you!! it worked !!!
CamperBot
@camperbot
Sep 30 2017 01:48
akosuadenell sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 437 | @gothamknight |http://www.freecodecamp.com/gothamknight
akosuadenell
@akosuadenell
Sep 30 2017 01:50
when I do that the background image doesn't fill up the whole screen
@gothamknight do you know how to make it fill up the whole page? the background image?
Ken Haduch
@khaduch
Sep 30 2017 02:27
@akosuadenell - try using background-size: cover; on the background and see?
@akosuadenell - oh, you might already have that, looking back at your posted code above.
Johnny
@jtan3
Sep 30 2017 02:53
is it better to use vanilla js over jquery?
korzo
@korzo
Sep 30 2017 02:55
@jtan3 at FCC definitely
Johnny
@jtan3
Sep 30 2017 02:56
@korzo thanks
CamperBot
@camperbot
Sep 30 2017 02:56
jtan3 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 558 | @korzo |http://www.freecodecamp.com/korzo
Johnny
@jtan3
Sep 30 2017 03:05
@korzo fcc doesn't have lessons on javascript dom?
piteto
@piteto
Sep 30 2017 03:07
When I started, I thought it was required to use jQuery here
korzo
@korzo
Sep 30 2017 03:07
@jtan3 Yeah, only jQuery. But there is a lot of free resources available online
Johnny
@jtan3
Sep 30 2017 03:10
Ive been trying to switch from jquery.
Johnny
@jtan3
Sep 30 2017 03:11
@korzo thanks
CamperBot
@camperbot
Sep 30 2017 03:11
jtan3 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
api offline
Adam Faraj
@adamfaraj
Sep 30 2017 03:29
i'm having trouble accessing my input in JS
<input type="text" class="search-text" id="search-text" placeholder="Search">
var input = document.getElementsByClassName("search-text")[0].value;
var buttonSearch = document.getElementById("button-search");

var onUserSearch = function() {
  console.log(input)
};  
buttonSearch.addEventListener("click", onUserSearch);
korzo
@korzo
Sep 30 2017 03:38
@adamfaraj you should preventDefault on submit button
Adam Faraj
@adamfaraj
Sep 30 2017 03:41

@korzo

var onUserSearch = function(e) {
  e.preventDefault();
  console.log(input);
};

?

korzo
@korzo
Sep 30 2017 03:41
@adamfaraj also you check input before button is clicked
@adamfaraj Move 1.line inside onUserSearch function and it should work;
@adamfaraj
var buttonSearch = document.getElementById("xxx");
var input = document.getElementsByClassName("search-text")[0];

var onUserSearch = function() {

  console.log(input.value)
};  
buttonSearch.addEventListener("click", onUserSearch);
Adam Faraj
@adamfaraj
Sep 30 2017 03:53
@korzo this worked
var input = document.getElementsByClassName("search-text")[0];
var buttonSearch = document.getElementById("button-search");

var onUserSearch = function() {
  // e.preventDefault();
  console.log(input.value);
};  
buttonSearch.addEventListener("click", onUserSearch);
@korzo why should it be inside the function vs having it set up in my variable?
korzo
@korzo
Sep 30 2017 03:54
@adamfaraj Oh, I forgot my xxx id there :)
Adam Faraj
@adamfaraj
Sep 30 2017 03:55
@korzo lol
korzo
@korzo
Sep 30 2017 03:56
@adamfaraj because input is assigned on page load, when there is no text yet.
you need to check value, when button is clicked
Adam Faraj
@adamfaraj
Sep 30 2017 03:56
@korzo gotcha. makes sense. it's set up when the document loads
thanks @korzo !
CamperBot
@camperbot
Sep 30 2017 03:57
adamfaraj sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 560 | @korzo |http://www.freecodecamp.com/korzo
korzo
@korzo
Sep 30 2017 03:57
@adamfaraj exactly
glad to help
Maria Theresa Arruda
@arrudamt
Sep 30 2017 04:03
hello guys!
is it possible change the logo align to center of the navbar with css only after i resize the screen?
Nikita
@Nik1910
Sep 30 2017 06:27
Hello everyone! Please help with adding some space between header buttons , here's a link to the question https://forum.freecodecamp.org/t/first-challenges-build-portfolio-how-to-add-space-between-buttons-if-i-use-bootstrap-col-xs/150614
Maria Theresa Arruda
@arrudamt
Sep 30 2017 07:43

@Nik1910 why don't you use something like that:

<nav>
<div class="collapse navbar-collapse nav-collapse navbar-responsive-collapse" id="nav">
<ul class="nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>

Ken Haduch
@khaduch
Sep 30 2017 13:48
@arrudamt - if it's a matter of centering it on a smaller screen, you could probably set up a media query to be enabled at the smaller screen size and apply the desired CSS styling to your navbar logo.
ehutchllew
@ehutchllew
Sep 30 2017 14:44
@Nik1910 look into flexbox, you could do something like:
.someContainer: {
display: flex;
justify-content: space-around;
}
@Nik1910 this is responsive and will always maintain a space ratio between the child elements.
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 15:33
good morning code friends
fefo360
@fefo360
Sep 30 2017 15:34
Morning
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 15:45
heyas @fefo360 .. Hows it going?
Fabien SHAN
@X140hu4
Sep 30 2017 15:46
Good evening :D
edisket
@edisket
Sep 30 2017 15:48
good evening guys
piteto
@piteto
Sep 30 2017 15:50
good afternoon, good morning, good evening :sunrise: :sunrise_over_mountains: :sunny:
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 15:51
hellos @X140hu4 @edisket and @piteto :)
edisket
@edisket
Sep 30 2017 15:51
do you guys have on going proj
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 15:51
11:51 am here..nearly noon..I've been trying to work the bugs out of my podomoro timer
edisket
@edisket
Sep 30 2017 15:52
Can you give me any advices on how to start in freelance world
piteto
@piteto
Sep 30 2017 15:53
I'm still waking up and drinking coffee :coffee:
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 15:53
I'm taking my first steps for finding my own clients..I don't have enough experienceto give advice..
piteto
@piteto
Sep 30 2017 15:54
getting started with freelance takes some friends who need help and can trust you, once you build up a portfolio and show experience, it gets easier
edisket
@edisket
Sep 30 2017 15:55
Some devs told me that to make yourself expose in the world of freelance you have to work in the open-source first
or pick a client and work for them for free
i dont know if it is a right thing to do
piteto
@piteto
Sep 30 2017 15:57
volunteer work is a good idea - local church or nonprofit that may need help
edisket
@edisket
Sep 30 2017 15:58
i would like to offer my service in open source community so that may i introduce my self to the other devs
making connection is really hard for me, idont know how will i get connect to the others, luckily i found this gitter and i found you guys
this time, i get tons of ideas because of you
piteto
@piteto
Sep 30 2017 15:59
meetup.com can be good - or you could start your own group and have others join
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 16:00
my personal website is umm...not the greatest...
I need to update actually
edisket
@edisket
Sep 30 2017 16:04
how do you up this?
did you pay for this?
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 16:06
i pay for hosting...i coded the website..then loaded it my host server via ftp
edisket
@edisket
Sep 30 2017 16:06
how much did you pay for hosting
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 16:08
i purchased this domain with host for 1 year through goDaddy on a special deal for $0.99 per month for 1 year....to renew..which is coming up soon..is going to cost more.
for testing purposes you can use a free host...there are several...find them via google...
Henry
@GitHub-Henry
Sep 30 2017 16:59
@Rogue00 I'm guessing this is your favorite show.
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 17:00
black sails is decent aye
im a bigger fan of vikings
Henry
@GitHub-Henry
Sep 30 2017 17:00
@Rogue00 I like vikings also
I wonder what percent is story and what percent is history
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 17:02
its a mashup of story legends that span several hundred years
the people the show portrays are real but the time lines are all screwy
rollo was real but a couple hundred years later than when ragnar roamed..or so ive read..
Henry
@GitHub-Henry
Sep 30 2017 17:05
Rollo (the guy in France) wasn't Ragnar's brother, really
talk about literary liberty for a story
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 17:06
aye
Henry
@GitHub-Henry
Sep 30 2017 17:07
I couldn't watch Black Sails because there were to many 'badass' women written into the story line
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 17:07
also byern...ivar...both legendary but again....different timelines...
I read a cool historical dissectionof the show a while back...it was pretty interesting.
I like black sails but i dont have stars and I lost track of it.
Henry
@GitHub-Henry
Sep 30 2017 17:10
Modern writers put in to many 'badass' women and children into story lines for my liking. Like the 10 year old girl queen Lyanna in Game of Thrones
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 17:14
i skipped got
Henry
@GitHub-Henry
Sep 30 2017 17:20
For some reason the women warriors seemed OK in Vikings, but things like having a 10 year old girl spout wisdom that astounded a room of adults was a bit much for me
piteto
@piteto
Sep 30 2017 17:21
I think it all adds to the fantasy of the series - people so willing to follow another person simply because of their bloodline
modern day monarchies make no sense to me either, but there's a certain fantasy about them that makes it intriguing
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 17:23
That doesnt make sense to me either.
Henry
@GitHub-Henry
Sep 30 2017 17:24
I think it's the things they do that bother me, for example, 10 year old kids don't have wisdom that astounds 40 year old adults, they just don't.
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 17:24
id be more apt to follow someone whose worth is proven like ragnar or lagatha
lagertha
Henry
@GitHub-Henry
Sep 30 2017 17:28
@Rogue00 when ever you've got time you've got to check out Game of Thrones
Ghost
@ghost~56bd2077e610378809c105cd
Sep 30 2017 17:30
I have friends on facebook who post about it all the time
I don't spend a lot of time with shows...vikings is really all im watching..and nothing really in between seasons
Jerzz
@2cool4school
Sep 30 2017 19:48
hey whats up, can i ask a seemingly simple css question?
Maria Theresa Arruda
@arrudamt
Sep 30 2017 20:28
@khaduch thank you for the tip. I'll take a time to study media query functionality. =)
CamperBot
@camperbot
Sep 30 2017 20:28
arrudamt sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3326 | @khaduch |http://www.freecodecamp.com/khaduch
Eric Weiss
@eweiss17
Sep 30 2017 20:43
@2cool4school just as
Maria Theresa Arruda
@arrudamt
Sep 30 2017 21:35
what code should i use on media query to display logo in the center when in a mobile mode?
piteto
@piteto
Sep 30 2017 21:39
@arrudamt It depends on how you have built your navbar
pure css/html, bootstrap 3, bootstrap 4?
piteto
@piteto
Sep 30 2017 21:45
If it's bootstrap 3 or 4, this should work, but it depends on your code in the end:
@media (max-width: 768px) {
  .navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
  }
}
Maria Theresa Arruda
@arrudamt
Sep 30 2017 21:49
@piteto the width attribute at 100% makes a distortion when displaied. I'm trying to fix this project:
https://codepen.io/arrudamt/pen/wgVYxv?editors=1100
piteto
@piteto
Sep 30 2017 21:52
@arrudamt You have made a lot of customizations to get that logo placed correctly - remove the floats and make your image + logo text inline-blocks
To fix the background image, use background-size: cover; instead of background-size: 100% 100%;
you tried it!
@you-tried-it
Sep 30 2017 21:59
hi :sparkles:
piteto
@piteto
Sep 30 2017 21:59
welcome back @you-tried-it
you tried it!
@you-tried-it
Sep 30 2017 22:01
@piteto aww thnx
CamperBot
@camperbot
Sep 30 2017 22:01
you-tried-it sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 172 | @piteto |http://www.freecodecamp.com/piteto
you tried it!
@you-tried-it
Sep 30 2017 22:01
@camperbot stop doing that :angry:
piteto
@piteto
Sep 30 2017 22:01
haha thx @you-tried-it
CamperBot
@camperbot
Sep 30 2017 22:01
piteto sends brownie points to @you-tried-it :sparkles: :thumbsup: :sparkles:
api offline
you tried it!
@you-tried-it
Sep 30 2017 22:02
@camperbot what did you say?
@camperbot camperbot?
piteto
@piteto
Sep 30 2017 22:04
cbot
CamperBot
@camperbot
Sep 30 2017 22:04
you called?
you tried it!
@you-tried-it
Sep 30 2017 22:04
@camperbot i did ;)
piteto
@piteto
Sep 30 2017 22:05
I don't know all of cbot's commands :(
Gersho
@Gersho
Sep 30 2017 22:21
find a job
CamperBot
@camperbot
Sep 30 2017 22:21
find a job
nothing found
Mohamed Nabil Ayoub
@MohNabil
Sep 30 2017 22:44
Hi guys,i want to know why is bootstrap not working in that pen i implemented it in the settings,https://codepen.io/Moh-Nabil/pen/oGeXQd
you tried it!
@you-tried-it
Sep 30 2017 22:45
@MohNabil i know ;)
Mohamed Nabil Ayoub
@MohNabil
Sep 30 2017 22:47
@you-tried-it ok you want me to say plz ):
iso
@iso1048
Sep 30 2017 22:49
@MohNabil you linked bootstrap for javascript rather than bootstrap for css.
Mohamed Nabil Ayoub
@MohNabil
Sep 30 2017 22:51
@gothamknight there is only two choices in the settings in codepen
Rada
@Radascript
Sep 30 2017 22:55
hey. I needed to resize an image (make it smaller) so I did it in Gimp following this: http://www.wpbeginner.com/beginners-guide/how-to-resize-and-make-images-larger-without-losing-quality/ and it came out 8x the file size. Anyone know a better solution that doesn't lose quality but also doesn't blow up filesize?
iso
@iso1048
Sep 30 2017 22:56
@MohNabil click settings, then css (at the top), then select boostrap 4 from quick add
Moisés Man
@moigithub
Sep 30 2017 23:04
@MohNabil DONT wrap ur cols inside H3
instead create 3 H3 individually inside each cols
Eric Weiss
@eweiss17
Sep 30 2017 23:05
@Radascript i just google file resizers online to do that, i don't know if it makes the many bigger
Mohamed Nabil Ayoub
@MohNabil
Sep 30 2017 23:06
that did the job thanks guys
Moisés Man
@moigithub
Sep 30 2017 23:08
resize AND optimize the image @Radascript
probably u can google for image optimizers to apply to ur resized image
if ur img dont have transparency use jpg format
else png
Rada
@Radascript
Sep 30 2017 23:09
@moigithub I know, I do that already. I'm just figuring out what about that process makes the file size blow up
it doesn't make sense to me why the rescaling makes it take up 8x the memory
Adel
@AdelMahjoub
Sep 30 2017 23:15
@Radascript you can resize it using a canvas and javascript
@Radascript for the aspect ratio
@Radascript to use the canvas as an image toDataURL
Rada
@Radascript
Sep 30 2017 23:18
@AdelMahjoub thanks Adel, but that's not a good solution for me. It's for a project client has on Squarespace, so I really need to shrink + optimize the images
CamperBot
@camperbot
Sep 30 2017 23:18
radascript sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 575 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Adel
@AdelMahjoub
Sep 30 2017 23:19
@Radascript so to shrink the image, locally you set the aspect ration of the image, draw it in the canvas, use toDataURL to export it to png or any, drag and drop works too if you want to save it in a folder, to reduce the size use webpack image-loader
@Radascript this way you don't need any tool, no photoshop no gimp no affinity design no sketch ...
@Radascript you can take it further and write your own image resizer app
Sean Pars
@SeanPars
Sep 30 2017 23:41
Can somebody help me with a section from eloquent js
korzo
@korzo
Sep 30 2017 23:42
@SeanPars Post your problem
Sean Pars
@SeanPars
Sep 30 2017 23:44
f u n c t i o n r o w H e i g h t s ( rows ) {
r e t u r n rows . map ( f u n c t i o n ( row ) {
r e t u r n row . r e d u c e ( f u n c t i o n ( max , cell ) {
r e t u r n Math . max ( max , cell . m i n H e i g h t () ) ;
} , 0) ;
}) ;
}
f u n c t i o n c o l W i d t h s ( rows ) {
r e t u r n rows [0]. map ( f u n c t i o n (_ , i ) {
r e t u r n rows . r e d u c e ( f u n c t i o n ( max , row ) {
r e t u r n Math . max ( max , row [ i ]. m i n W i d t h () ) ;
} , 0) ;
}) ;
}
function rowHeights(rows) {
  return rows.map(function(row) {
    return row.reduce(function(map,cell) {
      return Math.max(max, cell.minHeight());
  }, 0);
});
}

function colWidths(rows) {
  return rows[0].map(function(_, i) {
    return rows.reduce(function(max, row) {
    return Math.max(max, row[i].minWidth());
  }, 0);
});
}
what's happening here
korzo
@korzo
Sep 30 2017 23:54
@SeanPars it iterate over array rows (row.map() )
and reduce every element (I suppose it's array of arrays ) to maximal value of elements minHeight