These are chat archives for FreeCodeCamp/HelpFrontEnd

27th
Sep 2017
Trevor Guinn
@trev-of-ev
Sep 27 2017 01:25
Hey everyone, I'm having an issue with my code. I have added a small photo gallery on my portfolio page. When I minimize the browser to the smallest break-point the images respond correctly but the section that they are bound to does not extend past the area of the photos so the gallery bleeds over into the contact page. I'm not sure what to use to make the background respond with the responsiveness of the images. Can anyone help?
piteto
@piteto
Sep 27 2017 01:30
@trev-of-ev Change height: 750px to min-height: 750px so it can grow taller when needed
It would also look a little nicer if you added the section class to each of your <section> tags. You'll need to remove the first <section> you use at the top of your page if you do that, but in the end, each <section> would get a little bit of padding at the edges
Trevor Guinn
@trev-of-ev
Sep 27 2017 01:35
@piteto You rock! Thank you!
CamperBot
@camperbot
Sep 27 2017 01:35
trev-of-ev sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 153 | @piteto |http://www.freecodecamp.com/piteto
piteto
@piteto
Sep 27 2017 01:36
You're welcome
Fabien SHAN
@X140hu4
Sep 27 2017 02:29
Hi Guys, in the Binary agent intermediate algo, how do you get the ASCII from the binary value? fromCharCode doesnt seem to accept it
Gersho
@Gersho
Sep 27 2017 02:30
parseInt()
Fabien SHAN
@X140hu4
Sep 27 2017 02:36
Thanks @Gersho! figured it out. It is pretty hard not to get a glimpse of the solution when googling...
CamperBot
@camperbot
Sep 27 2017 02:36
x140hu4 sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 471 | @gersho |http://www.freecodecamp.com/gersho
Fabien SHAN
@X140hu4
Sep 27 2017 02:36
And I got mislead by the octal error feedback
Gersho
@Gersho
Sep 27 2017 02:37
:thumbsup:
Chris Cullen
@123xylem
Sep 27 2017 03:08
Hi,
Why is there white space under my blog title - and how do I remove it?
Chris Cullen
@123xylem
Sep 27 2017 03:42

I cant edit this css- Im trying to make the articles take up more than 58% width but I cant seem to change this css

@media screen and (min-width: 48em)
style.css?ver=4.8.2:3810
.blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404:not(.has-sidebar) #primary .page-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments {
    float: right;
    width: 58%;
}

http://www.paintedbirdcafe.ga/blog/

BuntyBru
@BuntyBru
Sep 27 2017 03:59

hello peoples

can anyone please explain me about these things

min-width, max-width, min-height, and max-height.
PLEASEEEE
Henry
@GitHub-Henry
Sep 27 2017 04:02
@BuntyBru Hope this helps.
korzo
@korzo
Sep 27 2017 04:02
@BuntyBru min-height is minimal height of element.
element will always has at least min-height height
max-height is opposite
BuntyBru
@BuntyBru
Sep 27 2017 04:08
@GitHub-Henry
haha funny
Marc
@MWBauer
Sep 27 2017 04:19
anyone have a moment?
iso
@iso1048
Sep 27 2017 04:20
@BuntyBru you should do some codecademy courses.
BuntyBru
@BuntyBru
Sep 27 2017 04:32
@gothamknight
presently i am doing a web development course
maybe after that i would
BuntyBru
@BuntyBru
Sep 27 2017 06:38

Well i always used to think CSS is a small thing.
Anyone could do it anytime
Nothing serious

Well i am pretty sure now that i was a fool to think so

Markus Kiili
@Masd925
Sep 27 2017 07:29
@BuntyBru More like HTML+CSS being an infinite swamp that you can explore.
Rafael Monroy
@rafaelmonroy
Sep 27 2017 07:32
how can I loop trough an object and print out the values without using for…in loop?
Markus Kiili
@Masd925
Sep 27 2017 07:33
@rafaelmonroy You can loop or iterate Object.keys(obj).
Rafael Monroy
@rafaelmonroy
Sep 27 2017 07:34
I want to print out 1 & 2 { "a": 1, "b": 2 } what type of loop?
Markus Kiili
@Masd925
Sep 27 2017 07:36
var obj = { "a": 1, "b": 2 };

var keys = Object.keys(obj); // [ 'a', 'b' ]
for (var i=0; i<keys.length; i++) {
  console.log(obj[keys[i]]);
} // prints 1 and 2
@rafaelmonroy
Rafael Monroy
@rafaelmonroy
Sep 27 2017 07:36
@Masd925 cool thanks man !
CamperBot
@camperbot
Sep 27 2017 07:36
rafaelmonroy sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4508 | @masd925 |http://www.freecodecamp.com/masd925
Markus Kiili
@Masd925
Sep 27 2017 07:37
@rafaelmonroy Functional way:
Object.keys(obj).forEach(function(key){console.log(obj[key]);});
Jake
@NeelDVirus
Sep 27 2017 10:18
can anyone fill me in with the information about the importance of maintaing document outline. what is the advantages and disadvantages of maintaining and not mainting a document outline structure respectively?
heroiczero
@heroiczero
Sep 27 2017 10:24
@NeelDVirus if you wondering about document outline of a HTML document, the markup elements such as <h1> and<form> help identify the different items in the website. Otherwise, it would just be a wall of text.
Markus Kiili
@Masd925
Sep 27 2017 10:25
@NeelDVirus Do you mean using the html5 semantic elements properly?
Jake
@NeelDVirus
Sep 27 2017 10:26
@heroiczero yeah i know that. that context come in semantic. isn't it? what if i have the document well organised semantically but document outline is not perfect or in a right heirarchy.
@Masd925 no no i din't mean html5 semantic context. i mean html5 document outline context.
heroiczero
@heroiczero
Sep 27 2017 10:31
@NeelDVirus are you talking about https://css-tricks.com/document-outline-dilemma/ ? I read it a while back maybe might help you
Jake
@NeelDVirus
Sep 27 2017 10:33
This message was deleted
@heroiczero @Masd925 like previously in html4 <h1><h2><h3><h4><h5> and <h6> created the document outline. But in the html5 <aside> <article> <section> and <nav> create the document outline as specified. But because of some issue (i think implemention in every single browser or may be something else) it is advised to prefer a way in which both rules are followed. well i covered all this but i cant figure out one thing.
my point of the question is that why it is necessay to concern document outline? any benifits or drawback?
@heroiczero yeah exactly i was talking about that context
i am concern with "why to concern document outline"
heroiczero
@heroiczero
Sep 27 2017 10:38
@NeelDVirus That is debatable and there is no clear cut answer. It is a language, and like all language :"HTML is defined by the people who write it and by the web browsers that interpret it."
Jake
@NeelDVirus
Sep 27 2017 10:41
@heroiczero yeah yeah that is true. but what things let it to even get established/exist in the first place. like semantic elements are used in assisting technology.. whats is the objective of document outline?
Markus Kiili
@Masd925
Sep 27 2017 10:46
@NeelDVirus https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines Seems that some programs use document outline to show the document structure to the users, but the algorithm is not known/standardized.
heroiczero
@heroiczero
Sep 27 2017 10:48
@NeelDVirus Outlines describe the visual layout of a page, like an <article> can be a news article.
LydaTech
@lydatech
Sep 27 2017 10:56
@heroiczero Thats not correct
Jake
@NeelDVirus
Sep 27 2017 10:59
@Masd925 yeah i know some program use document outline to show the document outline created. my question was different. okay one simple question to put forward which is of the root concern. does document outline affects SEO? or anything?
LydaTech
@lydatech
Sep 27 2017 11:01
@NeelDVirus it depends on the engine being used. If you need a site to be completely ADA-compliant to you, it matters. But generally not really but good practice
@NeelDVirus what exactly is your concern?
@NeelDVirus proper semantic markup is much more important for general SEo
Jake
@NeelDVirus
Sep 27 2017 11:05
@lydatech my concern is essentialy with
---> does document outline affects SEO?
---> is there anything(which is affected by document outline) that i have to concern of
LydaTech
@lydatech
Sep 27 2017 11:06
@NeelDVirus No semantic markup is what the major engines look at
Jake
@NeelDVirus
Sep 27 2017 11:09
@lydatech oh then i think i dont have to worry about the SEO in relation with document outline but i will follow the document outline too for convenience. Thanks for assisting sir
CamperBot
@camperbot
Sep 27 2017 11:09
neeldvirus sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2475 | @lydatech |http://www.freecodecamp.com/lydatech
ADIL KARMOUZI
@mradil16
Sep 27 2017 11:41
Guys . Css filters doesn't work on internet explorer what should I do ??
Markus Kiili
@Masd925
Sep 27 2017 11:43
@mradil16 You can use custom styles for IE or even custom css file.
ADIL KARMOUZI
@mradil16
Sep 27 2017 11:45
filter: grayscale(150%) brightness(200%) opacity(50%) contrast(75%);
can you please tell me how to support those filters in IE 10+ ?
Markus Kiili
@Masd925
Sep 27 2017 11:46
@mradil16 No idea, sorry.
ADIL KARMOUZI
@mradil16
Sep 27 2017 11:47
ok. no problem
thank you
Liu, Kuichen
@Kuichen
Sep 27 2017 12:52
$('a.className[href*="#"]:not([href="#"])').click(function() { ... } need help with this statement, what does it do? Please help, many thanks.
It is in the js file using jQuery
Yolanda
@teknotik
Sep 27 2017 13:34
testo
Ken Haduch
@khaduch
Sep 27 2017 13:52
@Kuichen - just off the top of my head, I'm going to guess that it means to find any link that has an href containing a #, like you might have within an in-page link, but not an href that only has the value #, as you would have with a placeholder "dead" link. And then assign that click handler to it.
ADIL KARMOUZI
@mradil16
Sep 27 2017 14:04
@longnt80 is it bad practice if I toggle between gray and original image using javascript instead of using css filters ? (css filters are not supported in IE 10+)
Long Nguyen
@longnt80
Sep 27 2017 14:28
@mradil16 as long as the user can still access the image even when js is disabled then it is fine
shivam gupta
@shivamg11000
Sep 27 2017 14:50
Hey I am making a portfolio site for myself. Currently on the projects/showcase section
what's the best approach to show the projects images
Will White
@willnwhite
Sep 27 2017 15:24
Is there another way to do the Markdown Previewer project than using dangerouslySetInnerHTML?
@shivamg11000 You can take a screenshot of the project.
Will White
@willnwhite
Sep 27 2017 16:09
I ask because of the XSS warning in the docs. As far as I can tell though, XSS won't be an issue because there's no server.
Chris
@bestintown23
Sep 27 2017 16:54
how can i make my classes (section1 and section2) be side by side.? https://codepen.io/bestintown23/pen/XepNLG
LydaTech
@lydatech
Sep 27 2017 18:25
@bestintown23 something like this?
.container{
  display:flex;
  justify-content: space-around;
  margin-top: 3em;
}
Jennifer Estelle Bedford
@JenniferEstelle
Sep 27 2017 19:42
I am trying to conceptually understand what's going on in the "chunky monkey" problem. Anyone available to discuss?
korzo
@korzo
Sep 27 2017 19:43
@JenniferEstelle Sure
CamperBot
@camperbot
Sep 27 2017 19:47
:bulb: to format code use backticks! ``` more info
Jennifer Estelle Bedford
@JenniferEstelle
Sep 27 2017 19:47
dang it! lol
korzo
@korzo
Sep 27 2017 19:47
@JenniferEstelle You can edit your post
Jennifer Estelle Bedford
@JenniferEstelle
Sep 27 2017 19:48
function chunkArrayInGroups(arr, size) {
  console.log('length of array', arr.length);
  console.log('size', size);
  var newArray = [];

  for (var i = 0; i < arr.length; i+=size) {
    console.log('loop' + i);
    newArray.push(arr.slice(i, i+size));    
  } console.log('newArray', newArray);

  return newArray;
}

chunkArrayInGroups(["a", "b", "c", "d"], 2);
korzo
@korzo
Sep 27 2017 19:49
@JenniferEstelle It looks ok
Jennifer Estelle Bedford
@JenniferEstelle
Sep 27 2017 19:55
Nevermind, I see what I did... sorry!
Eric Hasegawa
@EricHasegawa
Sep 27 2017 20:17
Can anyone tell me how I can make the image links only take up the size of the image, rather than the whole block of the screen? https://codepen.io/erichasegawa/pen/YxMJOa
korzo
@korzo
Sep 27 2017 20:21
@EricHasegawa Your images have display: block with margin: auto so they take whole screen width
Eric Hasegawa
@EricHasegawa
Sep 27 2017 20:22
@korzo That makes sense, how can I center them while having their display: inline?
korzo
@korzo
Sep 27 2017 20:23
@EricHasegawa give img display:inline-block and parent of <a> text-align: center
Eric Hasegawa
@EricHasegawa
Sep 27 2017 20:29
@korzo Thanks! I figured it out
CamperBot
@camperbot
Sep 27 2017 20:29
erichasegawa sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 550 | @korzo |http://www.freecodecamp.com/korzo
Chris
@bestintown23
Sep 27 2017 21:12
@lydatech your the goat thanks
CamperBot
@camperbot
Sep 27 2017 21:12
bestintown23 sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2476 | @lydatech |http://www.freecodecamp.com/lydatech
Zerka1982
@Zerka1982
Sep 27 2017 21:15
Hello Guys
Could you please look at this and tell me why I do have a white space in the bottom of the page ?
I'm trying to make it responsive ....
What do you think I'm doing wrong ?
LydaTech
@lydatech
Sep 27 2017 21:22
@bestintown23 goat?
legendinraze
@legendinraze
Sep 27 2017 21:28
how do use an image from my own PC as a background
I*
piteto
@piteto
Sep 27 2017 21:31
@lydatech Greatest Of All Time (GOAT)
@legendinraze You'll need to upload it somewhere like your github repo, cloudinary, postimage, etc
Zerka1982
@Zerka1982
Sep 27 2017 21:32
@legendinraze First you must know the image location and then you ll add in CSS file ,
body {
background: url(../images/picture-name.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
position: relative;
}
@piteto Could you please check this https://codepen.io/Zerka1982/pen/WZjQbj
piteto
@piteto
Sep 27 2017 21:33
I'm looking at it now @Zerka1982 computer is doing ten things, so dev tools are taking a while to load :joy:
Zerka1982
@Zerka1982
Sep 27 2017 21:34
Alright, thanks dude. The issue I'm having is the bottom of the page is white while I'm trying to have the background image covering the whole page....
piteto
@piteto
Sep 27 2017 21:34
your background images aren't loading - pixabay doesn't let you link directly to their site
Zerka1982
@Zerka1982
Sep 27 2017 21:35
it s ok dude, just put an image your self :)
and check the result. Look at the bottom of the page and see
I checked one website to see if the page is responsive and got this
image.png
As you see the bottom of the page is white :(
piteto
@piteto
Sep 27 2017 21:39
It's your .gb-logo class pushing it down
Zerka1982
@Zerka1982
Sep 27 2017 21:39
so what should i do ?
piteto
@piteto
Sep 27 2017 21:40
It's hard to tell because I don't know what you want to do next with your website
change the min-height setting on your .gb-logo class for now
also change the min-height on your .top class
You are using a lot of position: relative instead of relying on the normal document flow
@Zerka1982
piteto
@piteto
Sep 27 2017 21:45
It 185 lines of CSS, so based on what you want to do next, there may be better options
Zerka1982
@Zerka1982
Sep 27 2017 21:45
Alright, I ll look at it , thank you very much :)
piteto
@piteto
Sep 27 2017 21:45

I'd start with changing stuff like this:

  position: relative;
  top: 20px;
  left: 30px;

to:

margin-top: 20px;
margin-left: 30px;
absolute and relative positions should not be used for your form position
Zerka1982
@Zerka1982
Sep 27 2017 21:46
Good point
Anything else I must take into consideration ???
piteto
@piteto
Sep 27 2017 21:49

@Zerka1982 I haven't had time to give a good review, but here's something that caught my eye:

  border: none; /* <-- This thing here */
  border: solid 2px #fff;

border is defined twice

maybe use more meaningful class names - "cover" and "part1", "part2" don't describe the content very well
leftInput and rightInput are good names
Zerka1982
@Zerka1982
Sep 27 2017 21:50
Good point
Chris
@bestintown23
Sep 27 2017 21:50
@lydatech greatest of a time
Zerka1982
@Zerka1982
Sep 27 2017 21:50
well , for part1 I meant the first 3 inputs
part2 the 2nd 3 inputs
Chris
@bestintown23
Sep 27 2017 21:51
@lydatech greatest of all time
Gersho
@Gersho
Sep 27 2017 21:53
@Zerka1982 when giving names to variables, classes, function, etc... always assume the person reading your code is stupid and need to be told everything in detail (it also help when you want to modify it 6 months later)
Zerka1982
@Zerka1982
Sep 27 2017 21:54
@Gersho I agree 200% with you.
Zerka1982
@Zerka1982
Sep 27 2017 21:57
@piteto What about the div with a class name Calendar ?
piteto
@piteto
Sep 27 2017 21:58
What about it?
Zerka1982
@Zerka1982
Sep 27 2017 21:58
@piteto I'm trying to having exactly in the middle at the bottom of the form. Do you think I did it well, or is there a better way ?
piteto
@piteto
Sep 27 2017 21:59
Your fonts and images aren't loading, so I'm not sure how it looks
Zerka1982
@Zerka1982
Sep 27 2017 21:59
@piteto it is inside the form at the bottom (centered)
I ll show you
Gersho
@Gersho
Sep 27 2017 22:00
@Zerka1982 font-size: 50px; in your calendar class could prove troublesome on small screens
Zerka1982
@Zerka1982
Sep 27 2017 22:00
image.png
I'm using Media queries so I can change the size
piteto
@piteto
Sep 27 2017 22:01
It looks good in that image. Looking at your CSS, width: 12% is going to vary a lot
Zerka1982
@Zerka1982
Sep 27 2017 22:02
the idea is to keep it in the middle (centered) with all sizes ....
piteto
@piteto
Sep 27 2017 22:02
put a border around it temporarily and I'll bet it overflows on smaller screens
just use text center
text-align: center;
Gersho
@Gersho
Sep 27 2017 22:03
on the parent, not the element itself
piteto
@piteto
Sep 27 2017 22:03
on the .calendar class
Zerka1982
@Zerka1982
Sep 27 2017 22:03
Done, and it looks better
Gersho
@Gersho
Sep 27 2017 22:03
yes, it is the parent class of the <a href="#" type="calendar"><i class="fa fa-calendar" aria-hidden="true"></i> </a>
piteto
@piteto
Sep 27 2017 22:04
.calendar {
  text-align: center;
  font-size: 50px;
}
none of that other CSS is needed
Zerka1982
@Zerka1982
Sep 27 2017 22:04
now the only challenge left for me is the icon at the bottom
Gersho
@Gersho
Sep 27 2017 22:04
the planet thing ?
Zerka1982
@Zerka1982
Sep 27 2017 22:05
yes
Gersho
@Gersho
Sep 27 2017 22:05
do the same you did for the calendar, aiming for whatever class is it's parent , gb_logo in that case
Zerka1982
@Zerka1982
Sep 27 2017 22:07
ALright I ll check it
gb_logo {
text-align: center;
font-size: 50px;
}
It is an image
Gersho
@Gersho
Sep 27 2017 22:08
i would add another div surrounding cover and the planet logo , so you can move the whole thing as needed (instead or having to move the planet everytime you want to move the form)
oh an image
Zerka1982
@Zerka1982
Sep 27 2017 22:08
yes, it is
Gersho
@Gersho
Sep 27 2017 22:08
width: should do the trick, maybe with a vw value ?
i'm not no good at css D:
Zerka1982
@Zerka1982
Sep 27 2017 22:09
No problem @Gersho you already helped me :)
Zerka1982
@Zerka1982
Sep 27 2017 22:14
Thank you
Chris
@bestintown23
Sep 27 2017 22:15
where can i get a free computer?
piteto
@piteto
Sep 27 2017 22:16
let me guess, you've copy/pasted this question to every single free code camp room?
Yep...
Gersho
@Gersho
Sep 27 2017 22:16
no he missed some of them
my answer would be in the junk, people throw away stuff that works nowdays
Grigor Minasyan
@gogminsam
Sep 27 2017 22:22
Hey guys I just finished my calculator project, I would love to hear your feedback on this https://codepen.io/gogminsam/full/Ewgrza/
Gersho
@Gersho
Sep 27 2017 22:25
@gogminsam 0.05 - 0.04 = ?
ruining people's day when they show their calculator is my hobby
the design is cool by the way
Grigor Minasyan
@gogminsam
Sep 27 2017 22:29
@Gersho oops forgot about rounding, thanks for the feedback though, did you find any other issues?
CamperBot
@camperbot
Sep 27 2017 22:29
gogminsam sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 477 | @gersho |http://www.freecodecamp.com/gersho
Gersho
@Gersho
Sep 27 2017 22:30
i don't know if that's intended or not but if you keep inputing numbers the calculator will grow to adapt to it
Grigor Minasyan
@gogminsam
Sep 27 2017 22:33
@Gersho actually that wasn't intended, but I still didn't limit input number quantity, I think I should limit it, looks bad
Gersho
@Gersho
Sep 27 2017 22:35

if you do

3*3=
// 9 is displayed
32+1=
//933 !

when the calculator gives a result, if the user inputs an operator ( + - / * ) it should keep the old value, but if you input numbers, it should reset the display and forget the old result

Raymond
@Raymondshen
Sep 27 2017 22:37
Hey guys how do i import a index.html file into my personal github repository?
Grigor Minasyan
@gogminsam
Sep 27 2017 22:49
@Gersho just fixed it!! you're pretty good at finding bugs!
piteto
@piteto
Sep 27 2017 22:51
@Raymondshen just drag and drop in your browser
There's also a "Upload Files" button
Gersho
@Gersho
Sep 27 2017 22:51
@gogminsam most calculators have the same bugs :P
Zerka1982
@Zerka1982
Sep 27 2017 22:52
@Gersho I have a question please
So based on the page I made if you remember
Gersho
@Gersho
Sep 27 2017 22:53
yes
Zerka1982
@Zerka1982
Sep 27 2017 22:53
I had an Icon for Calendar
image.png
The idea is that I want to add the time to google Calendar
Gersho
@Gersho
Sep 27 2017 22:54
oh, i have no idea how that works sorry ^^
Zerka1982
@Zerka1982
Sep 27 2017 22:55
I guess I can use Google Calendar API