These are chat archives for FreeCodeCamp/HelpFrontEnd

26th
Jun 2016
Michael Karpinski
@karpimpski
Jun 26 2016 00:06
hey, can anybody tell me why I keep getting an "undefined" at the top of my list, and why calculations like .31 are missing a penny?
http://codepen.io/karpimpski/pen/qNROoR
Gary Siu
@GarySiu
Jun 26 2016 00:08
@karpimpski Sure, I'll take a look
Michael Karpinski
@karpimpski
Jun 26 2016 00:08
@GarySiu thank you, I appreciate it!
CamperBot
@camperbot
Jun 26 2016 00:08
karpimpski sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
:cookie: 93 | @garysiu |http://www.freecodecamp.com/garysiu
Gary Siu
@GarySiu
Jun 26 2016 00:16
@karpimpski You get the undefined because when you declare html, you don't define a value
Gabe Pressman
@gpressman
Jun 26 2016 00:16
Does anyone know how to make an element expand if there's more text inside it, ala this pen?
Michael Karpinski
@karpimpski
Jun 26 2016 00:16
@GarySiu but html is a string
Gary Siu
@GarySiu
Jun 26 2016 00:16
Then you add a string to this value so it first converts undefined to a string "undefined" before concating the string
Michael Karpinski
@karpimpski
Jun 26 2016 00:17
@GarySiu oh! would just doing var html = "" fix this problem?
Gary Siu
@GarySiu
Jun 26 2016 00:17
That should fix That problem
Michael Karpinski
@karpimpski
Jun 26 2016 00:18
yep, that solution works. thank you! do you know why it won't return correct values for .31, .29, and other similar inputs?
@gpressman I'll try to help once I get this problem sorted out!
Gary Siu
@GarySiu
Jun 26 2016 00:18
@karpimpski I suspect it's because of the way that JS handles floating point (decimal) values
The safest thing is probably to work everything out in cents and then convert at the end to a string
Michael Karpinski
@karpimpski
Jun 26 2016 00:19
@GarySiu yeah, there seem to be a lot of problems concerning that. do you know of any way to fix that? do you see any problems in the logic of my code?
I
I'm not sure what you ean by that
Gary Siu
@GarySiu
Jun 26 2016 00:20
So instead of doing .31, .29 or whatever, multiply everything by 100 at the start
So your values are always integers
That way JS won't mess up your maths
Michael Karpinski
@karpimpski
Jun 26 2016 00:20
@GarySiu wow, I should've thought of that. thanks so much for your help!
CamperBot
@camperbot
Jun 26 2016 00:20
karpimpski sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
:warning: karpimpski already gave garysiu points
Gary Siu
@GarySiu
Jun 26 2016 00:20
Good luck!
@gpressman Don't give it a width and it should do that?
Gabe Pressman
@gpressman
Jun 26 2016 00:24
@GarySiu that's not my pen, his does it
there's mine that I made months ago, but I'm not sure what's causing the container to be dynamic
Michael Karpinski
@karpimpski
Jun 26 2016 00:25
@GarySiu that doesn't seem to completely fix my problem. it looks like .29 still doesn't work
Gary Siu
@GarySiu
Jun 26 2016 00:26
@gpressman I don't understand. Do you want the container to change size or not?
@karpimpski Do you have an updated pen?
Michael Karpinski
@karpimpski
Jun 26 2016 00:26
just updated it
it seems to fix every value but .29
Gabe Pressman
@gpressman
Jun 26 2016 00:27
@GarySiu yeah
Michael Karpinski
@karpimpski
Jun 26 2016 00:28
@gpressman your container has a fixed height, not a relative one
so it won't change size based on the contents because of its fixed height
Gabe Pressman
@gpressman
Jun 26 2016 00:29
if I delete height the entire container disappears
Michael Karpinski
@karpimpski
Jun 26 2016 00:30
@gpressman yeah, because you originally designed it that way. I didn't design my box that way so I can't tell you exactly how you should do it. I'll look into it now though
Gary Siu
@GarySiu
Jun 26 2016 00:31
@gpressman You can set a minimum width/height
Michael Karpinski
@karpimpski
Jun 26 2016 00:33
way smarter than what I was trying to do, I was trying to find some way to just set a fixed height/width so it would only move in the direction you wanted it to
@GarySiu did you figure anything out about my problem?
Gary Siu
@GarySiu
Jun 26 2016 00:33
Looking now :)
0.29 * 100
> 28.999999999999996
JAVASCRIPT!
Michael Karpinski
@karpimpski
Jun 26 2016 00:35
wow, javascript is the best :P
Gary Siu
@GarySiu
Jun 26 2016 00:35
Math.round(0.29 * 100)
Taylor Morgan
@tmdesigned
Jun 26 2016 00:35
for "Everything Be True" exercise, I don't understand what it's asking for. has anyone here done that?
Gary Siu
@GarySiu
Jun 26 2016 00:36
er... do you have a link? I guess we could ask the bot
help everything be true
CamperBot
@camperbot
Jun 26 2016 00:36

:point_right: algorithm everything be true [wiki]

Algorithm Everything Be True

:triangular_flag_on_post: Remember to use Read-Search-Ask if you get stuck. Try to pair program :busts_in_silhouette: and write your own code :pencil:

:checkered_flag: Problem Explanation:

The program needs to check if the second argument is a truthy element, and it must check this for each object in the first argument.

Relevant Links

:pencil: read more about algorithm everything be true on the FCC Wiki

Michael Karpinski
@karpimpski
Jun 26 2016 00:36
@GarySiu would it be safe to wrap my whole conversion to pennies in Math.round?
Gary Siu
@GarySiu
Jun 26 2016 00:36
@karpimpski I Think so but I don't do a lot of precision math with JavaScript :/
Michael Karpinski
@karpimpski
Jun 26 2016 00:37
@GarySiu yeah, I much prefer Ruby for just about everything. I'm just trying to practice some front-end stuff but JavaScript math always trips me up
Gary Siu
@GarySiu
Jun 26 2016 00:37
It's because everything is secretly a float that's converted to binary or something
Taylor Morgan
@tmdesigned
Jun 26 2016 00:39
@GarySiu for everything be true...I get comparing the second argument against the collection in the first, but do not understand the nature of that comparison
Gary Siu
@GarySiu
Jun 26 2016 00:39
@ohiosierra Oh I remember this one
The second argument has an object with some keys/values
You're looking for objects that have all keys of the second object and matching values
Gabe Pressman
@gpressman
Jun 26 2016 00:40
@GarySiu no luck, but thanks. I may pull this apart later to make it work, but not this second.
CamperBot
@camperbot
Jun 26 2016 00:40
:cookie: 94 | @garysiu |http://www.freecodecamp.com/garysiu
gpressman sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
Taylor Morgan
@tmdesigned
Jun 26 2016 00:40
but in their first example, they dont give matching values, just the key
so if its just the key with no value, that's truthy enough?
Michael Karpinski
@karpimpski
Jun 26 2016 00:41
@gpressman hey, since it looks like you're going back to switch up your CSS, I'd recommend laying off Bootstrap as well
Gabe Pressman
@gpressman
Jun 26 2016 00:41
why?
Michael Karpinski
@karpimpski
Jun 26 2016 00:41
I'd start to use flex or other methods for responsiveness, it gives you more control, it's much lighter, and quicker to write
Gabe Pressman
@gpressman
Jun 26 2016 00:42
I'll look into it
at work they have me using foundation, so I might redo it with that
Michael Karpinski
@karpimpski
Jun 26 2016 00:42
the default designs are nice, but I think they're very restricting and you just get so much more control that way. if you're not focusing on the CSS aspect I'd say keep using Bootstrap, but if you are, I'd definitely recommend not doing it
what do you do for work?
Gary Siu
@GarySiu
Jun 26 2016 00:43
@ohiosierra I think I got it confused with a later challenge
Gabe Pressman
@gpressman
Jun 26 2016 00:43
I'm a full stack developer
Gary Siu
@GarySiu
Jun 26 2016 00:43
I think this one wants you to check to see if all the objects have that property
Michael Karpinski
@karpimpski
Jun 26 2016 00:43
that's really cool! I'm learning Ruby, which I love. not too big of a fan of rails. do you do your backend in JS or Ruby?
Gabe Pressman
@gpressman
Jun 26 2016 00:43
Ruby, why don't you like rails?
Michael Karpinski
@karpimpski
Jun 26 2016 00:43
it's not that I don't like it, it's just that rails is still really confusing for me
I haven't really immersed myself in it, I'm still learning ruby itself, then I'll learn rails in full force. I just need to get used to the conventions then I'm sure I'll love it. how do you like rails?
Gabe Pressman
@gpressman
Jun 26 2016 00:44
well, I'm going to jump in the shower in a bit, but if you have anything I can help with while I'm still here i'm happy to help
Michael Karpinski
@karpimpski
Jun 26 2016 00:44
yeah, I'll definitely send you a PM!
Gabe Pressman
@gpressman
Jun 26 2016 00:44
That's how I was taught to code, so I like it
I haven't gotten to the backend portion on here, but I like the idea of Nodejs, and I think it's more practical
if I have to know js anyway to be a full stack developer it's less knowledge I have to keep track of if I use a bunch of js frameworks as opposed to
whatever js you need + your backend stack
Michael Karpinski
@karpimpski
Jun 26 2016 00:46
@gpressman is there any problem with using js and then ruby for your backend? does using only js for front and backend help you at all, other than with simplification through consistency?
Gabe Pressman
@gpressman
Jun 26 2016 00:46
I don't know any js backend frameworks yet
it's just a theory I have
Michael Karpinski
@karpimpski
Jun 26 2016 00:49
okay! I'd love to hear more about it and your experience with rails whenever you're available, if that's okay
Gabe Pressman
@gpressman
Jun 26 2016 00:50
sure
JD Tadlock
@jdtdesigns
Jun 26 2016 01:10
You will basically be required to know a little php and WordPress if you freelance
buiphuking
@buiphuking
Jun 26 2016 01:11
someone good at angular? i build tic tac toe , and i use angular, so i need some advice guys !!!!!!!!!!!!!!!!!!!!!!!!!
JD Tadlock
@jdtdesigns
Jun 26 2016 01:11
if you get hired at a company that only builds js apps then you're good to go lol
buiphuking
@buiphuking
Jun 26 2016 01:12
@jdtdesigns
could you tell me some common apps build by js plz
rigaac
@rigaac
Jun 26 2016 01:12
With the pomodoro timer, I am having trouble making session and break loop. Linter warns against declaring a function (setInterval's callback) within a loop.
JD Tadlock
@jdtdesigns
Jun 26 2016 01:14
@buiphuking Walmart, Paypal, LinkedIn, Yahoo, Netflix search
and a lot more
if you're building an app for a small business or single client, the cost of node hosting can sometimes be too much for them
which is why php is so popular
well, i'll say js is still growing in the market
it will eventually balance out in cost
js apps tend to be bandwidth hogs though
which could explain the cost
chat apps and search apps that constantly hit the server
buiphuking
@buiphuking
Jun 26 2016 01:18
so if i start with php , and couple months later , my company get bigger, i need to rebuild ?
JD Tadlock
@jdtdesigns
Jun 26 2016 01:18
why?
buiphuking
@buiphuking
Jun 26 2016 01:19
in the big scale , node or php, which one is lighter and less resource ?
JD Tadlock
@jdtdesigns
Jun 26 2016 01:20
node is mainly used for apps that do lots of requests all at once, ie. Walmart, Netflex, Yahoo
it's not blocking so hundreds of thousands of requests can flow through
php is very expandable though
buiphuking
@buiphuking
Jun 26 2016 01:21
facebook use node ?
JD Tadlock
@jdtdesigns
Jun 26 2016 01:21
facebook is php
php is growing just as js is
JD Tadlock
@jdtdesigns
Jun 26 2016 01:27
php used to be the laughing stock of programming, but now you really can't deny that you can write beautiful code in php
buiphuking
@buiphuking
Jun 26 2016 01:31
@jdtdesigns thanks
CamperBot
@camperbot
Jun 26 2016 01:31
buiphuking sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 572 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Gabe Pressman
@gpressman
Jun 26 2016 01:43
@karpimpski I figured it out, it was because the quote was position absolute, now I need to figure out how to position it how I want
Michael Karpinski
@karpimpski
Jun 26 2016 01:46
@gpressman great! I'd just use a combination of margin and padding, that's what i do for relative pos
Dona Hertel
@cocofan
Jun 26 2016 01:48
For the random quote project, how do I 'tweet a quote'? Do I need to have the user login into their Twitter account to do this? I'm not sure how twitter works as I'm rarely on it much.
Michael Karpinski
@karpimpski
Jun 26 2016 01:49
@cocofan nope! just mess around with links
@cocofan maybe check out a website with a Twitter share button and look at what you would need to change in the URL!
Gabe Pressman
@gpressman
Jun 26 2016 01:49
^^ this
Dona Hertel
@cocofan
Jun 26 2016 01:49
okay. I'll look around the internet for one.
Gabe Pressman
@gpressman
Jun 26 2016 01:53
@karpimpski I kinda want to go back and make this prettier, but I think it's a better use of my time to just move on to a more advanced project. If I still want to restyle I'll do it when I finish the last 3.
Michael Karpinski
@karpimpski
Jun 26 2016 01:54
@gpressman honestly I think it's best to just keep working on more advanced projects and just do better design in each
going back and redesigning is great and all, but all you're learning is design. if you just truck forward you're still learning and practicing multiple things, not just the one
Gabe Pressman
@gpressman
Jun 26 2016 01:57
Yeah, I'll redo my my portfolio when it's time but other than that, there's better use of my time.
Greg Duncan
@GregatGit
Jun 26 2016 02:04
Biazus
@Biazus
Jun 26 2016 02:13
hey good night. Please any tip about my wiki is appreciated:
http://codepen.io/almanegra/full/QEEJJy/
Gabe Pressman
@gpressman
Jun 26 2016 02:15
It looks good, I would maybe put a placeholder in that search box so it's obvious why it's there
Biazus
@Biazus
Jun 26 2016 02:16
I agree. thanks
Roy S
@rscheffers82
Jun 26 2016 02:17
Hi @Biazus , the app works well for me, well done!
Gabe Pressman
@gpressman
Jun 26 2016 02:17
Np, eventually an employer will be looking at that, so best they know what it does
Nathaniel Nasarow
@Torgian
Jun 26 2016 02:20
hey everyone
having a problem with making my Quote machine page, I am running into an API error.
XMLHttpRequest cannot load http://quotes.stormconsultancy.co.uk/random.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
same thing on code pen
Biazus
@Biazus
Jun 26 2016 02:21
@rscheffers82 @gpressman thank you for the tips :)
CamperBot
@camperbot
Jun 26 2016 02:21
biazus sends brownie points to @rscheffers82 and @gpressman :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @rscheffers82 |http://www.freecodecamp.com/rscheffers82
:cookie: 320 | @gpressman |http://www.freecodecamp.com/gpressman
JD Tadlock
@jdtdesigns
Jun 26 2016 02:21
@Torgian Need to return jsonp from the api instead. Make sure the api supports it.
Nathaniel Nasarow
@Torgian
Jun 26 2016 02:21
ok
Roy S
@rscheffers82
Jun 26 2016 02:23
@Biazus minor details, I had a look at the settings and you seem to load the jquery library twice. I'd remove the last one.
Biazus
@Biazus
Jun 26 2016 02:27
@rscheffers82 wow... you are right. Thanks. Codepen should have warned me!
CamperBot
@camperbot
Jun 26 2016 02:27
biazus sends brownie points to @rscheffers82 :sparkles: :thumbsup: :sparkles:
:warning: biazus already gave rscheffers82 points
buiphuking
@buiphuking
Jun 26 2016 02:28
i build simon game, i need some advice about angular, guys ???????????????
Roy S
@rscheffers82
Jun 26 2016 02:29
np
Gabe Pressman
@gpressman
Jun 26 2016 02:34
anyone familiar with setInterval() or done the timer zipline?
Greg Duncan
@GregatGit
Jun 26 2016 02:35
@gpressman yes
@Torgian can you post your pen
Gabe Pressman
@gpressman
Jun 26 2016 02:36
@GregatGit I'm just getting started
why doesn't this countdown work? clearly I'm misapplying the function
Suzanne Atkinson
@AdventureBear
Jun 26 2016 02:38
@jdtdesigns so did you create 4 objects and load them ahead of time?
Greg Duncan
@GregatGit
Jun 26 2016 02:39
@gpressman i found it best to use it as a variable so
$("document").ready(function(){
  var x = 60;
  var myTimer = setInterval(count, 1000);

  function count(){
   $("#count").html(x) 
   x--;   
  }
});
Gabe Pressman
@gpressman
Jun 26 2016 02:40
I was calling count()
was the problem
This message was deleted
thanks @GregatGit
CamperBot
@camperbot
Jun 26 2016 02:41
gpressman sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 625 | @gregatgit |http://www.freecodecamp.com/gregatgit
Tarun sehgal
@FCCtarun
Jun 26 2016 02:41
I am not able to navigate different sections of the webpage by clicking buttons in the navigation.
JD Tadlock
@jdtdesigns
Jun 26 2016 02:43
@AdventureBear Yes, in an array
Suzanne Atkinson
@AdventureBear
Jun 26 2016 02:43
@GregatGit not sure how far you got, but this code worked:
$("document").ready(function(){
  var x = 60;
count();

 function count() {
      nIntervId = setInterval(countDown, 1000);
    }

function countDown(){
  $("#count").html(x); 
   x = x-1;
}

})
@jdtdesigns thanks. So many different ways to do things
CamperBot
@camperbot
Jun 26 2016 02:44
adventurebear sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 573 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 26 2016 02:44
sounds =  [
     new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'),
     new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3'),
     new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3'),
     new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3')
];
@AdventureBear
Suzanne Atkinson
@AdventureBear
Jun 26 2016 02:44
what no cat sounds? @jdtdesigns lol
thanks. clever.
JD Tadlock
@jdtdesigns
Jun 26 2016 02:45
i did start with explosions
but thought the ux was lacking ;)
Tarun sehgal
@FCCtarun
Jun 26 2016 02:45
I am not able to navigate different sections of the webpage by clicking buttons in the navigation.
anyone pls help
code
https://codepen.io/tarunsehgal/pen/MebzaR
JD Tadlock
@jdtdesigns
Jun 26 2016 02:47
@FCCtarun Give the containers for the sections an id to match the link href="#top" --- > id="top")
Tarun sehgal
@FCCtarun
Jun 26 2016 02:50

I already did it like this
code:

<div class="row">
<div id="top"><a href="top"></a>
<div class="col-xs-4">
<button class="btn btn-block"> <a href="#top">About</a></button>
</div>
</div>

<div id="middle"><a href="middle"></a>
<div class="col-xs-4">
<button class="btn btn-block"><a href="#Middle">Portfolio</a></button>
</div>
</div>

<div id="bottom"><a href="bottom"></a>
<div class="col-xs-4">
<button class="btn btn-block"><a href="#Bottom">Contact us</a></button>
</div>
</div>
</div>

in which only "#top" is working. Middle and bottom is not working.

buiphuking
@buiphuking
Jun 26 2016 02:58
is there a easy way to understand angular works in a project, cuz debugger is not good for this ?
Ken Haduch
@khaduch
Jun 26 2016 03:03
@FCCtarun - you need to have an ID on the section where you want the link to scroll to - for your "PORTFOLIO" section, you have to put id="middle" on your <h2> element, for example, and take it off of the navbar element - so you should have href="#middle" on the navbar, no ID on that navbar element, and the <h2 id="middle" class="blue-text"><font size="6">PORTFOLIO</h2> line looking something like that, with the ID value there.
@FCCtarun - same thing for your "bottom" id - the ID should be down at the div or wherever you are starting your contact section, and the navbar should not have the ID property set - it should only be in the last section of your page.
JD Tadlock
@jdtdesigns
Jun 26 2016 03:06
@FCCtarun Here's a typical layout without BSstrap
Giang Khuong
@gbkhuong
Jun 26 2016 03:13
I'm trying to put different social media button on my portfolio challenge; I've added the bootstrap-social.css file in my settings on CodePen and here is my code below but my button just turns out to be blue and gray squares without the icon inside.
   <ul id="social">
    <li><a class="btn btn-social-icon btn-linkedin" href="#" target="_blank" > <span class="fa fa-linkedin"></span></a></li>
      <li><a class="btn btn-social-icon btn-github" href="#" target="_blank" > <span class="fa fa-github"></span></a></li>
    </ul>
Ken Haduch
@khaduch
Jun 26 2016 03:14
@gbkhuong - have you added the "font-awesome" font set to your CSS settings?
Giang Khuong
@gbkhuong
Jun 26 2016 03:14
No I haven't. What is that and why do I need it? (I will add it, but I just wanna understand!)
JD Tadlock
@jdtdesigns
Jun 26 2016 03:15
@gbkhuong Wrong bootstrap
Ken Haduch
@khaduch
Jun 26 2016 03:15
I don't know if that is part of the "bootstrap-social" .css? you are referencing fa fa-linkedin, which will be an icon character from the font-awesome set.
JD Tadlock
@jdtdesigns
Jun 26 2016 03:15
@gbkhuong click on the quick add drop down under Settings->CSS and hit bootstrap
Ken Haduch
@khaduch
Jun 26 2016 03:16
@gbkhuong - go to the CSS setup panel, select one of the external resource slots, and type "font-awesome", it should give you a quick-add selection for that.
Giang Khuong
@gbkhuong
Jun 26 2016 03:16
@khaduch @jdtdesigns I got it! Thank you!!
CamperBot
@camperbot
Jun 26 2016 03:16
gbkhuong sends brownie points to @khaduch and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 574 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:star2: 1376 | @khaduch |http://www.freecodecamp.com/khaduch
For the collapsed nav bar the fucntion I try to call when the button is clicked won't return the class into the ul
Can anyone give me advice to why it would acknowledge the function being defined
Ken Haduch
@khaduch
Jun 26 2016 03:21
@ericksong9 - you might need to add the bootstrap.js library to your JS settings.
Gunnar Erickson
@ericksong9
Jun 26 2016 03:22
Isn't the onclick attribute part of the button html tag without bootstrap?
Ken Haduch
@khaduch
Jun 26 2016 03:22
of maybe not... that doesn't seem to fix it, but you need it if you're using the bootstrap navbar.
Gunnar Erickson
@ericksong9
Jun 26 2016 03:22
I'm trying to create the navbar without bootstrap
Ken Haduch
@khaduch
Jun 26 2016 03:22
i have to look at your code to see what you're doing...
bootstrap uses a JS function to handle that navbar expansion in the collapsed view.
JD Tadlock
@jdtdesigns
Jun 26 2016 03:23
@khaduch bs is not needed lol
Gunnar Erickson
@ericksong9
Jun 26 2016 03:23
I've copied other navbar collapse code exactly from W3 for the current rendition and it won't see the function even when explicitly defined in the onclick attribute
Ken Haduch
@khaduch
Jun 26 2016 03:24
@jdtdesigns - sure - but if you're doing some collapsed navbar - bootstrap is an example...
JD Tadlock
@jdtdesigns
Jun 26 2016 03:25
@khaduch Not a good example at all actually. In html5, ul's are supposed to be used for text lists only. Not navs
Gunnar Erickson
@ericksong9
Jun 26 2016 03:27
So does it not wokr because it is in a ul?
JD Tadlock
@jdtdesigns
Jun 26 2016 03:28
@ericksong9 You're mixing jquery with vanilla js for selectors and events. Just use jquery selectors since it is great at doing that. ;)
@ericksong9 Umm, where are you listening to the click on the nav button to fire the display function?
ah in the html
Gunnar Erickson
@ericksong9
Jun 26 2016 03:31
Originally I had it in the Display() function but it wan'st seeing that
JD Tadlock
@jdtdesigns
Jun 26 2016 03:41
  // move show below the #list in css and make the show class specific to it
#list.show {
  display: block;
}

// In the js, you can setup the event like this
// just remove the listener from the jade
function display() {
    console.log('test');
    $('#list').toggleClass('show');
}  

$('.fa-bars').on('click', display);
@ericksong9
Gunnar Erickson
@ericksong9
Jun 26 2016 03:42
I'll check it out thanks so much @jdtdesigns
CamperBot
@camperbot
Jun 26 2016 03:42
ericksong9 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 575 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
John Alcher
@alchermd
Jun 26 2016 04:31

Hey mates, I'm confused on how the bootstrap grid system works. Say, I want 6 items and I want it arranged like this on bigger displays:
item 1 item 2
item 3 item 4
item 5 item 6

and I want it arranged like this on tablets/phones:
item1
item2
....
item6

How do I do that?

Ken Haduch
@khaduch
Jun 26 2016 04:36
@alchermd - try assigning the classes col-sm-6 to each div, it should then align them side by side on anything larger than an xs display, and I think that it defaults to showing the elements in all 12 columns on xs?
John Alcher
@alchermd
Jun 26 2016 04:38
@khaduch I got it working on bigger display, but the bottom margin is messed up on smaller ones. Can you check my work? http://s.codepen.io/chermandu/debug/LZxreo#
Greg Duncan
@GregatGit
Jun 26 2016 04:39
I have to learn SASS and React. Does anyone have any recommendation on where to learn either of these two.
Ken Haduch
@khaduch
Jun 26 2016 04:42
@alchermd - it just looks like you have your <div> nesting messed up a bit. Unless you were trying to do something funky...
dlim-dlim
@dlim-dlim
Jun 26 2016 04:42
@GregatGit Udemy has a good course on React called "Modern React with Redux"
Greg Duncan
@GregatGit
Jun 26 2016 04:43
@dlim-dlim thanks - I will check it out
CamperBot
@camperbot
Jun 26 2016 04:43
gregatgit sends brownie points to @dlim-dlim :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for dlim-dlim
John Alcher
@alchermd
Jun 26 2016 04:44
@khaduch I'd redo it. Do I get it now?:
<div class="row">
    <div class="col-md-4 col-md-offset-1 col-xs-12> ITEM1 </div>
    <div class="col-md-4 col-md-offset-1 col-xs-12> ITEM2 </div>
    ................
   <div class="col-md-4 col-md-offset-1 col-xs-12> ITEM6 </div>
</div>
Greg Duncan
@GregatGit
Jun 26 2016 04:46
@alchermd you would never put col-xs-12 it is there by default
Ken Haduch
@khaduch
Jun 26 2016 04:46
@alchermd - if you have it set up like that (with the <div> elements properly closed, it should look better. I have local edits to your CodePen project and it does look better...
Greg Duncan
@GregatGit
Jun 26 2016 04:47
@alchermd and if you have done anything to col-xs col-sm will also be 12
John Alcher
@alchermd
Jun 26 2016 04:48
@GregatGit that's nice to know. I'll refactor it now.
Ken Haduch
@khaduch
Jun 26 2016 04:48
@alchermd - in your recent post, you don't have quotation marks to close the class attribute values - if you copied that from your CodePen, make sure you fix that...
Amber
@adixon1818
Jun 26 2016 04:48
Hi everyone, I'm beginning my portfolio project but i feel like im missing a big step. I have no idea how people separate their page into 3+ different sections as you scroll down them
i've been looking forever to figure out how to do it
John Alcher
@alchermd
Jun 26 2016 04:49
@khaduch Yup I forgot to close the attr. It's all good now! Thanks a bunch!
CamperBot
@camperbot
Jun 26 2016 04:49
alchermd sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1377 | @khaduch |http://www.freecodecamp.com/khaduch
John Alcher
@alchermd
Jun 26 2016 04:50
@khaduch one last thing, what do you call that minimized menu thing for navbars when viewed on a smaller screen?
Ken Haduch
@khaduch
Jun 26 2016 04:50
@adixon1818 - if you want something to look at for examples, try the w3schools.com/bootstrap lessons, and look at the "themes" section in particular for a walk-through of how to design and create a page similar to the example portfolio using Bootstrap. If you don't want to use bootstrap, then you can use it as an example of what can be done...
@alchermd - they call it a "hamburger"...
khaduch @khaduch - checking out for the night... happy coding, everyone!
John Alcher
@alchermd
Jun 26 2016 04:52
@khaduch Now I'm hungry. I wonder why a lot of programming stuff is named after foods. Cinnamon, coffeescript, breadcrumbs, now a hamburger lol. Thanks again!
CamperBot
@camperbot
Jun 26 2016 04:52
alchermd sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: alchermd already gave khaduch points
Amber
@adixon1818
Jun 26 2016 04:52
Thanks so much! I've been looking for more bootstrap lessons
Ken Haduch
@khaduch
Jun 26 2016 04:54
@adixon1818 - well, you can look at the w3schools.com/bootstrap for more details on individual topics, as well, The "themes" kind of wraps it up into more or less of a project. Good reference material, all of the lessons, and I like their "try it" sandboxes to play with individual things. Good luck on the portfolio - I found it to be pretty challenging, too, until I started going through those examples, that helped a lot! I hope it works for you, too...
Syed Taha
@Spawn12
Jun 26 2016 04:59
hey guyx how to give font awsome link in it http://codepen.io/Spawn12/pen/gMgjPR
Greg Duncan
@GregatGit
Jun 26 2016 05:09
@Spawn12 just go to the settings and then css and start typing awesome and it'll come up
Syed Taha
@Spawn12
Jun 26 2016 05:11
@GregatGit do u know how to give same size image in portfolio?
Stephen
@stephepush
Jun 26 2016 05:12
has anyone used the forismatic api for their quote generator?
whenever I try to enter a link into my browser I only get "Wrong method entered"
here's a link to forismatic's api page: http://forismatic.com/en/api/
Amber
@adixon1818
Jun 26 2016 05:16
Hi everyone, I'm still having trouble figuring out the containers on my portfolio page. I put the class as pageTwo, or anything, and try to change the color in the css .pageTwo area and nothing happens
Any suggrestions?
Stephen
@stephepush
Jun 26 2016 05:19
@JosueDr11 , the image is not looking responsive
@JosueDr11 You also didn't link to Teslas wikipedia page at the end. Maybe you forgot to do that?
Jdraiv
@jdraiv
Jun 26 2016 05:20
Oh yeah, Can you help me doing that?
Stephen
@stephepush
Jun 26 2016 05:21
hmm, it's been a while since I've finagled with bootstrap, and html/css. :) Let me see if I can help...
@JosueDr11 : First, try wrapping your image with the following:
<img src="..." class="img-responsive" alt="Responsive image">, or at least giving your image that class
if this is all new to you, you should look up the bootstrap documentation
Stephen
@stephepush
Jun 26 2016 05:35
Looks better, now you should place everything else in a container, I believe? And maybe adjust the columns (you'll find out more about this in the bootstrap documentation) to get the text aligned how you want it under the image. Right now your text is aligned to the left, you probably want to change that.
@JosueDr11 , your tribute page requires the use of Bootstrap. Look over the bootstrap documentation, and compare your sight to the example Quincy put up on the challenge page. It's a disservice for me to walk you through what you should do with your own tribute page.
Jdraiv
@jdraiv
Jun 26 2016 05:40
@stephepush I will
@stephepush Thanks Brother
CamperBot
@camperbot
Jun 26 2016 05:40
josuedr11 sends brownie points to @stephepush :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @stephepush |http://www.freecodecamp.com/stephepush
Stephen
@stephepush
Jun 26 2016 05:41
You're welcome, @JosueDr11
Syed Taha
@Spawn12
Jun 26 2016 05:48
how to align portfolio img in center http://codepen.io/Spawn12/full/gMgjPR/
Venus Vavadiya
@venusvavadiya
Jun 26 2016 06:16
@Spawn12 add a property called
'''
CamperBot
@camperbot
Jun 26 2016 06:16
:bulb: to format code use backticks! ``` more info
Venus Vavadiya
@venusvavadiya
Jun 26 2016 06:16
background-size: cover; @Spawn12
Venus Vavadiya
@venusvavadiya
Jun 26 2016 06:24
Isis it working? @Spawn12
is* @Spawn12
Syed Taha
@Spawn12
Jun 26 2016 06:25
@venusvavadiya u come so late bro i already do it ..
Venus Vavadiya
@venusvavadiya
Jun 26 2016 06:25
yea sure
Catalin Scripcariu
@CatalinScr
Jun 26 2016 07:15

Hi, at The Simon Game I have an array with random values and I want to acces every value and with Jquery to change the opacity of the div's . The array fist is 1 then 2
This is my code:

outmusic.map(function(val){

            $("#col"+val).css("opacity", "1");
            setTimeout(function(){
              $("#col"+val).css("opacity", "0.6");
        }, 800);



  })

My problem is that when array is increasing all the div's change the opacity in the same time. How can I stop at a value and the go to the next one after some seconds?

Daniel Goh
@gohdaniel15
Jun 26 2016 07:20
Hey guys, I am doing the FCC Random Quote Generator, and for some reason there are two white lines that appear at the bottom and right side of my quote box. Don’t know what it is. Would anyone like to give it a go? http://codepen.io/gohdaniel15/pen/bebpGq
omg nvm I just realized they were scroll bars.
Catalin Scripcariu
@CatalinScr
Jun 26 2016 07:22
@gohdaniel15 remove the overflow: http://prntscr.com/bl65t0
Daniel Goh
@gohdaniel15
Jun 26 2016 07:48
yeah! thank you!
@CatalinScr
Mercedes Smith
@mercedessmith
Jun 26 2016 09:26
function caseInSwitch(val) {
  var answer = "";
  // Only change code below this line



  // Only change code above this line  
  return answer;  
}

// Change this value to test
caseInSwitch(1);
Hey guys, New to this. Can anyone help with this challenge? \
Chris Cullen
@123xylem
Jun 26 2016 10:38

var denom = [
  { name: 'ONE HUNDRED', val: 100.00},
  { name: 'TWENTY', val: 20.00},
  { name: 'TEN', val: 10.00},
  { name: 'FIVE', val: 5.00},
  { name: 'ONE', val: 1.00},
  { name: 'QUARTER', val: 0.25},
  { name: 'DIME', val: 0.10},
  { name: 'NICKEL', val: 0.05},
  { name: 'PENNY', val: 0.01}
];

function checkCashRegister(price, cash, cid) {
  var change = cash - price;
 var register = cid.reduce(function(acc, curr) {//Checks val of register to measure against change.
    acc.total += curr[1];//accumulation=curr1
    acc[curr[0]] = curr[1];//-------------------------------------What does this mean? QUESTION 1!!
    return acc;  //end returning acc total
  }, {total: 0});//------------------------------------------Whats purpose of this? QUestion 2!!!!!

  if (register.total === change) {//if all money in reg is same as change
    return 'Closed';
  }

  if (register.total < change) {//If reg hasnt enough money
    return 'Insufficient Funds';
  }

var change_arr = denom.reduce(function(acc, curr) {//Look through denoms
    var value = 0;
    while (register[curr.name] > 0 && change >= curr.val) {
      //denomobject has val more than 0 and change is more than the objects val
      change -= curr.val;//Take that val from change count
      register[curr.name] -= curr.val;//Take that val from the value(so till knows what its got)
      value += curr.val;//Add that val to a running total of value

      change = Math.round(change * 100) / 100;  // Round change to the nearest hundreth deals with precision errors

    }
 // Add this denomination to the output only if any was used.
    if (value > 0) {
        acc.push([ curr.name, value ]);
    }
    return acc; // Return the current Change Array
  }, []); // ------------------------------------What is this for? Is this a different way of declaring a new array? QUESTION 3

  // If there are no elements in change_arr or we have leftover change, return
  // the string "Insufficient Funds"
  if (change_arr.length < 1 || change > 0) {
    return "Insufficient Funds";
  }

  return change_arr;
}

checkCashRegister(19.50, 20.00, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1.00], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]);
Hi guys. THis IS A CORRECT answer to exact Change challenge... BUt there are 3 things in my code I dont fully understand.. They are commented as Questions with-- ------ .. Could YOu explain the 3 questions please!
Thanks
Alin Pisica
@alinp25
Jun 26 2016 10:48
Someone here with some free time to help me with my Wikipedia Viewer Api? :)
Ayush Sharma
@a-y-u-s-h
Jun 26 2016 11:12
xyz.PNG
Someone tell me how to add that ^on portfolio project right now.
Catalin Scripcariu
@CatalinScr
Jun 26 2016 11:41

Hi, at The Simon Game I have an array with random values and I want to acces every value and with Jquery to change the opacity of the div's . The array fist has one 1 then 2 and so on...
This is my code:

outmusic.map(function(val,index){

            var waitTime = (index + 1) * 1000;
            $("#col"+val).css("opacity", "1");
            setTimeout(function(){
              $("#col"+val).css("opacity", "0.6");
       }, waitTime);
  alert(val);



  })

My problem is that when array is increasing all the div's change the opacity in the same time. How can I stop at a value and the go to the next one after the opacity is back at 0.6?

Max Zueff
@IvanBot
Jun 26 2016 11:53
I want to make sites for free, to get experience. Tell me where to find clients?
Catalin Scripcariu
@CatalinScr
Jun 26 2016 12:06
@IvanBot try to make it for some ONG in your local community if it is free. In this case you can help them
coffeebeanzz
@coffeebeanzz
Jun 26 2016 12:42
@a-y-u-s-h some people use <hr> for that but i havent used it. I always jus use border-top or bottom
Heres some examples. U can modify the content. https://css-tricks.com/examples/hrs/
Jus click on code
Tarun sehgal
@FCCtarun
Jun 26 2016 13:23
how can I add different buttons that will take me to the portfolio creator's different social media pages.
Niush Sitaula
@Niush
Jun 26 2016 13:28
Links are not being clicked, Although it is a Hack : Can you please figure out what I can do?
http://codepen.io/niush/pen/vKgzWV
geathena
@geathena
Jun 26 2016 13:29
Tried to add links to my social media page (at the bottom)- it's a mess! I can't get them to line up vertically, and also there's 4 of each?! (got it down from 6 somehow) https://codepen.io/geathena/pen/GqrjEz
miriam-z
@miriam-z
Jun 26 2016 13:51
adding google fonts to code pen
I have added to following to the top of my css: @import url("link");
it doesn't seem to be working?
Dany Din
@danydin
Jun 26 2016 13:52
@geathena שלחתי לך פרטית
Fon Socrates Anye
@anye55
Jun 26 2016 14:06
Hello everyone, I would like to know where I can find the image of Dr Norman to use for my tribute page. I would prefer a link. Thanks.
Greg Duncan
@GregatGit
Jun 26 2016 14:11
@miriam-z you can do that under settings in the css for code pen
miriam-z
@miriam-z
Jun 26 2016 14:13
@GregatGit it is done at the top of the css and then you can simply add the font as a class
@GregatGit this is the code for example @import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
Greg Duncan
@GregatGit
Jun 26 2016 14:15
@miriam-z what is the name of the font you want?
@GregatGit https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css @miriam-z add this to the css
below where you added bootstrap.css
miriam-z
@miriam-z
Jun 26 2016 14:17
@GregatGit awesome I will give that a go!
Greg Duncan
@GregatGit
Jun 26 2016 14:18
then this goes where ever you want it in the css tab font-family: 'Open Sans', sans-serif;
miriam-z
@miriam-z
Jun 26 2016 14:19
@GregatGit cheers ! There seem to be many ways about it I read here on Google fonts that you can do it this way: https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
@GregatGit it says this is not valid on code pen and coming up with an error :(
thats what I did but will try and link it through html as suggested in another room
Greg Duncan
@GregatGit
Jun 26 2016 14:22
where did you try putting it?
you should be putting "https://fonts.googleapis.com/css?family=Open+Sans'rel='stylesheet'type='text/css" and not this "<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>"
I just tried it on your pen and it worked fine
@miriam-z But - here is something to help getting your nav bar working fully - http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
miriam-z
@miriam-z
Jun 26 2016 14:26
@GregatGit I don't have a navbar...are you looking at my tribute page?
Greg Duncan
@GregatGit
Jun 26 2016 14:27
ha - looking at someone elses pen!
miriam-z
@miriam-z
Jun 26 2016 14:27
:smile:
@GregatGit Have tried the html head section but it doesn't work
Greg Duncan
@GregatGit
Jun 26 2016 14:30
@miriam-z show me your pen
I think there might be some small thing you may have missed
miriam-z
@miriam-z
Jun 26 2016 14:31

<p data-height="265" data-theme-id="0" data-slug-hash="mErdPK" data-default-tab="html,result" data-user="miriamzahara" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/miriamzahara/pen/mErdPK/">Tribute Page </a> by Miriam (<a href="http://codepen.io/miriamzahara">@miriamzahara</a>) on <a href="http://codepen.io">CodePen</a>.</p>

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

its not finished yet still editing it but take a look
Tarun sehgal
@FCCtarun
Jun 26 2016 14:35
Hey I want to navigate to different sections through buttons in my portfolio web page but unable to do this. I have also applied some to (top middle bottom) for navigation but as a result it's navigating only top button. so please tell me what should I do?
code
http://codepen.io/tarunsehgal/pen/MebzaR
Greg Duncan
@GregatGit
Jun 26 2016 14:38
@miriam-z so which part do you want to have "Open Sans"?
miriam-z
@miriam-z
Jun 26 2016 14:38
@GregatGit I think for now I just want to link it
Greg Duncan
@GregatGit
Jun 26 2016 14:42
@miriam-z I have forked your page - have a look how I have done it http://codepen.io/gregoverhere/pen/YWNJvP?editors=1100
I choose lobster so its easy to see
Stephen
@stephepush
Jun 26 2016 14:45
I'm trying to get the json in my quote generator to work. I want to get the text from api to print into an element, but what I have isn't working. Can someone help?
$(document).ready(function() {
    $.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en', function(qGen){
        qGen.quoteText
        $('#quote').prepend("<p>" + qGen.quoteText + "</p>");
    });
});
Greg Duncan
@GregatGit
Jun 26 2016 14:50
@stephepush can you show your pen
miriam-z
@miriam-z
Jun 26 2016 14:53
@GregatGit :+1: cheers
Greg Duncan
@GregatGit
Jun 26 2016 14:54
@miriam-z :+1:
virtualmason
@virtualmason
Jun 26 2016 14:57
@stephepush maybe try this ending : json/?callback' you can look at the network tab in dev tools to see if any data is is coming in, sometimes data is comming in but the data is not being accessed correctly. If that still does not work checkout jsonp for javascritp
Stephen
@stephepush
Jun 26 2016 15:01
@GregatGit : I'm coding in brackets, let me put the code in a pen
Stephen
@stephepush
Jun 26 2016 15:32
@virtualmason, could you take a look?^
Manish Giri
@Manish-Giri
Jun 26 2016 15:32
does anyone know if you can write media queries even when you have used boostrap grids?
RakeshNerkar
@Rakesh18754
Jun 26 2016 15:34
var newItem = {bu_name: buNameValue };
$http({
url: 'http://localhost:3000/db',
method: "POST",
data: JSON.stringify(newItem),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
$scope.users = data.users; // assign $scope.persons here as promise is resolved here
console.log("success");
}).error(function (data, status, headers, config) {
$scope.status = status + ' ' + headers;
});
am i doing anything wrong in the above code.....as when i do a get request with the same URL i can see the response but when i do a post i get a 404 error...pls help....
Jonathan
@JonKaric
Jun 26 2016 15:34
@Manish-Giri You can use as many media queries as you want
Manish Giri
@Manish-Giri
Jun 26 2016 15:37
@JonKaric so, let’s say you have 3 columns to each of which you've applied col-xs-4
now, you want them to stack vertically instead for some specific widths, let’s say 592px
how would you do that?
@JonKaric I mean from 592px onwards till 768px, they should follow the col-xs-4 rule, but below 592px, they should stack vertically
as of now, anything below 768px has 3 columns side by side
Jonathan
@JonKaric
Jun 26 2016 15:40
@Manish-Giri If it isnt part of Bootstraps already set media query sizes, then make your own for the width you want and just give the columns width:100%
Manish Giri
@Manish-Giri
Jun 26 2016 15:41
@JonKaric sadly, there’s a lot of bootstrap grid code being used, I can’t remove those. Is there another way?
Jonathan
@JonKaric
Jun 26 2016 15:41
@Manish-Giri What do you mean?
Heather Kusmierz
@HKuz
Jun 26 2016 15:42
@FCCtarun not sure if you've figured this out already, the general way to have same page links is using anchor tags where the navigation section has something like: <a href="#Home">Home</a> and later in your page, where you want the home link to go to when clicked, have <a name="Home"></a>
Manish Giri
@Manish-Giri
Jun 26 2016 15:43
@JonKaric um, okay, maybe I didn’t get what you said. Here -
  //create child div with class="col-md-3" for holding logo
                    var innerDiv1 = createElement("div");
                    //innerDiv1.className = "col-md-2";
                    innerDiv1.classList.add("col-xs-offset-1", "col-xs-2", "col-sm-offset-1", "col-sm-2", "col-md-offset-1", "col-md-2");
                    //append logo to innerDiv
                    innerDiv1.appendChild(logo);

                    //--------------------------------------------------------
                    //-------the inner div 2 holds the user name ----------
                    //-------------------------------------------------------
                    var innerDiv2 = createElement("div");
                    //innerDiv2.className = "col-md-2";
                    innerDiv2.classList.add("col-xs-offset-1","col-xs-3", "col-sm-offset-1", "col-sm-3", "col-md-offset-1", "col-md-3");
                    innerDiv2.appendChild(userName);

                    //--------------------------------------------------------
                    //-------the inner div 2 holds the preview image ----------
                    //-------------------------------------------------------
                    var innerDiv3 = createElement("div");
                    innerDiv3.classList.add("col-xs-offset-1","col-xs-4","col-sm-offset-1", "col-sm-4", "col-md-offset-2", "col-md-3");
                    innerDiv3.appendChild(preview);
@JonKaric see how I’m appending the col-xs-* classes to divs
@JonKaric bootstrap xs screen sizes are upto 768px, so for all sizes below 768px, these 3 divs will be side by side
@JonKaric but I want them to stack, below a certain width, let’s say 500px, while still being side by side above 500px upto 768px
Jonathan
@JonKaric
Jun 26 2016 15:45
@Manish-Giri Give them all another class of .col (or somthing like that)
@Manish-Giri Then make a media query in your css, and target the .cols and force them to be width:100% at your required size
Manish Giri
@Manish-Giri
Jun 26 2016 15:47
@JonKaric okay, so I (hopefully) should be able to target them this way
@media(screen) and (max-width: 500px) {
   .col-xxs {
       width: 100%;
   }
}
Jonathan
@JonKaric
Jun 26 2016 15:48
@Manish-Giri Yeah that should work
Manish Giri
@Manish-Giri
Jun 26 2016 15:48
@JonKaric cool, thanks a bunch!
CamperBot
@camperbot
Jun 26 2016 15:48
manish-giri sends brownie points to @jonkaric :sparkles: :thumbsup: :sparkles:
:cookie: 116 | @jonkaric |http://www.freecodecamp.com/jonkaric
Jarmstr
@jarmstr
Jun 26 2016 15:48
Hello
Jonathan
@JonKaric
Jun 26 2016 15:49
@Manish-Giri Just make sure your bootstrap is being run first, so your custom css overrides bootstraps
@jarmstr Hey
Manish Giri
@Manish-Giri
Jun 26 2016 15:49
@JonKaric yep, that order is taken care of
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="http://s.mlcdn.co/animate.css">
    <link rel="stylesheet" href="style.css”>
thanks!
Jarmstr
@jarmstr
Jun 26 2016 15:50
I have a question about the tribute page example
What is the gray background called?
Jonathan
@JonKaric
Jun 26 2016 15:51
@jarmstr the hex value is #eee
Jarmstr
@jarmstr
Jun 26 2016 15:52
@JonKaric I see but how do you create that inner background?
Jonathan
@JonKaric
Jun 26 2016 15:53
@jarmstr It's a container (in bootstrap it's class is .container) then all you need to do is give it a background color
Jarmstr
@jarmstr
Jun 26 2016 15:54
@JonKaric Okay
Abhishek Suresh
@abhishek-suresh
Jun 26 2016 16:12
Someone please tell me how to make the image in center.. tried many times . It is not in center when you go full screen mode. http://codepen.io/abh19021/full/WxRYbz/
Jonathan
@JonKaric
Jun 26 2016 16:16
@abhishek-suresh why do you have bootstrap and foundation?
@abhishek-suresh Remove foundation from your links in settings, then give the thumbnail display:inline-block; then in the parent element give it text-align:center
Abhishek Suresh
@abhishek-suresh
Jun 26 2016 16:28
@JonKaric Thank you so much. Let me try that.
CamperBot
@camperbot
Jun 26 2016 16:28
abhishek-suresh sends brownie points to @jonkaric :sparkles: :thumbsup: :sparkles:
:cookie: 117 | @jonkaric |http://www.freecodecamp.com/jonkaric
Abhishek Suresh
@abhishek-suresh
Jun 26 2016 16:31
@JonKaric removing foundation really helped. Thanks again
CamperBot
@camperbot
Jun 26 2016 16:31
abhishek-suresh sends brownie points to @jonkaric :sparkles: :thumbsup: :sparkles:
:warning: abhishek-suresh already gave jonkaric points
Suzanne Atkinson
@AdventureBear
Jun 26 2016 17:01
I finally got my simon to play the sounds in sequence 3 seconds apart without crashing. To do so I had to figure out passing a function as a parameter. I get why it works, but I don't get why I had to pass it and couldn't embe the function in the setInterval function. In any case, it's working now and I'm super happy. Ihave hard coded the 3rd step, so if you press start it just plays 3 cat sounds in a row. :) No game play yet bu tyou can press the buttons and have fun!
Gabe Pressman
@gpressman
Jun 26 2016 17:05
@AdventureBear Are you planning on adding visual cues as well?
Suzanne Atkinson
@AdventureBear
Jun 26 2016 17:07
yes just one issue at a time. getting the set interval to work and figuring out where to put the countdown in relation to the interval stumped me for the last day.
it's what was on my mind as soon as I woke up!
Martialis39
@Martialis39
Jun 26 2016 17:21
Hello guys
can you tell me
why is this ajax call not working
Michael Karpinski
@karpimpski
Jun 26 2016 17:21
hey guys, how would I go about vertically centering a span within a div element?
Martialis39
@Martialis39
Jun 26 2016 17:23
@karpimpski hey is margin : 0 auto not working?
oh sorry
vertically
Michael Karpinski
@karpimpski
Jun 26 2016 17:23
@Martialis39 flex works great for horizontal align, just use justify-content: center ;)
but yeah, I need to vertically align, not horizontally
Martialis39
@Martialis39
Jun 26 2016 17:24
maybe line-height?
just spit balling, you probably know your way around CSS better than me :D
Michael Karpinski
@karpimpski
Jun 26 2016 17:25
yeah, I tried line-height, but I'm not using a p tag. I'm using span
Martialis39
@Martialis39
Jun 26 2016 17:26
right : /
brittanyalina
@brittanyalina
Jun 26 2016 17:31
Hi everyone! Can someone help me with a bootstrap dropdown menu? I'm trying it on codepen and it is not working... <ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data- toggle="dropdown" role="button">Products</a>
<ul class="dropdown-menu">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
<li><a href="#">Contact</a></li>
</ul>
Michael Karpinski
@karpimpski
Jun 26 2016 17:31
@brittanyalina is Bootstrap enabled in your JS tab?
brittanyalina
@brittanyalina
Jun 26 2016 17:32
yes, it is
wait a minute actually I don't think it is
I have it enabled in CSS
Michael Karpinski
@karpimpski
Jun 26 2016 17:34
@brittanyalina for dropdowns it also has to be enabled in JS
brittanyalina
@brittanyalina
Jun 26 2016 17:35
it still doesn't work
Michael Karpinski
@karpimpski
Jun 26 2016 17:36
try also enabling jQuery
brittanyalina
@brittanyalina
Jun 26 2016 17:38
just did and it still isn't working
Michael Karpinski
@karpimpski
Jun 26 2016 17:39
then I'm not sure. if you
if you're just copying and pasting then you need to figure out which combination of frameworks is correct
brittanyalina
@brittanyalina
Jun 26 2016 17:40
ok @karpimpski thank you for trying!!
CamperBot
@camperbot
Jun 26 2016 17:40
brittanyalina sends brownie points to @karpimpski :sparkles: :thumbsup: :sparkles:
:cookie: 369 | @karpimpski |http://www.freecodecamp.com/karpimpski
Ken Haduch
@khaduch
Jun 26 2016 17:56
@brittanyalina - are you able to post a link to your page?
@brittanyalina - make sure that you put the jquery.js in the list of external JS links before the bootstrap.js - jquery has to be loaded first. That should probably fix it.
Gabe Pressman
@gpressman
Jun 26 2016 18:18
How do I call a function saved to a variable?
Martialis39
@Martialis39
Jun 26 2016 18:21
that variable with
()
thisIsAFunction()
it says myTimer() isn't a function
brittanyalina
@brittanyalina
Jun 26 2016 18:23
@khaduch YES!!! It worked! Thank you!!!
CamperBot
@camperbot
Jun 26 2016 18:23
brittanyalina sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1378 | @khaduch |http://www.freecodecamp.com/khaduch
Jesse Neumann
@Jesse989
Jun 26 2016 18:29
Can anyone look at my tic tac toe game and tell me why the ai takes multiple moves instead of just one?
Gabe Pressman
@gpressman
Jun 26 2016 18:30
I'll try
ty!!
Martialis39
@Martialis39
Jun 26 2016 18:32
i had the same issue
Jesse Neumann
@Jesse989
Jun 26 2016 18:32
how did you fix it?!
Martialis39
@Martialis39
Jun 26 2016 18:33
can you tell me what is the function where the AI is making the move?
Jesse Neumann
@Jesse989
Jun 26 2016 18:33
else if (aiPieces === player && ready === 'true')
Martialis39
@Martialis39
Jun 26 2016 18:33
I was messing up my variables. Ofcourse our code is not identical
OK is this correct?
for (var i in currentBoard) {
    if (currentBoard[i] === '') {
      possibleMoves.push(i);
    }
  }
and not push(currentBoard[i]) ??
sorry it prolly is, just jumped out
Jesse Neumann
@Jesse989
Jun 26 2016 18:36
its correct, its to make a list of the indices of the available moves
Gabe Pressman
@gpressman
Jun 26 2016 18:43
The dialog box that tells you who won also pops up many times, i'm having trouble finding what's being repeated though
Martialis39
@Martialis39
Jun 26 2016 18:44
also its exponential
so first its 1, then 2, then three
Jesse Neumann
@Jesse989
Jun 26 2016 18:44
yeah, so something should be getting reset but its not
if (aiStatus === "in progress") {
turn(nextPlayer(aiPieces));
Mitchel
@MitchelAnthony
Jun 26 2016 18:45
How did you guys get around the cross site issue? This one: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
I'm querying wiki btw.
Martialis39
@Martialis39
Jun 26 2016 18:46
@MitchelA have you tried a jsonp request?
should work
Gabe Pressman
@gpressman
Jun 26 2016 18:48
Can any of you help me with this? I'm trying to call myTimer when you click start but I'm missing something..
Mitchel
@MitchelAnthony
Jun 26 2016 18:50
@Martialis39 I added a callback to my $.ajax but it didn't work.
Martialis39
@Martialis39
Jun 26 2016 18:51
@gpressman Ok sir, i tried it and it the click is working but myTimer is not properly defined
Mitchel
@MitchelAnthony
Jun 26 2016 18:51
Never mind. My bad.
Didn't change format to jsonp :\
Gabe Pressman
@gpressman
Jun 26 2016 18:52
@Martialis39 that function works in the absence of everything else..
Martialis39
@Martialis39
Jun 26 2016 18:52
@gpressman I got it working with a small adjustment. Think about the normal function syntax when declaring myTimer ; )
its missing something atm
@MitchelA Sure, is it working now?
Gabe Pressman
@gpressman
Jun 26 2016 18:55
@Martialis39 hmm, now it works when I click, but it no longer does what it should, thanks
CamperBot
@camperbot
Jun 26 2016 18:55
gpressman sends brownie points to @martialis39 :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @martialis39 |http://www.freecodecamp.com/martialis39
Mitchel
@MitchelAnthony
Jun 26 2016 18:56
@Martialis39 Yes, thanks!
CamperBot
@camperbot
Jun 26 2016 18:56
mitchela sends brownie points to @martialis39 :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @martialis39 |http://www.freecodecamp.com/martialis39
Martialis39
@Martialis39
Jun 26 2016 18:56
@gpressman what is the intended behavior?
i had it count down from 10 to 1 and then give a beep
@MitchelA No prob! Maybe you can help in return - did you use an API for the random quote assignment? If so, which?
Gabe Pressman
@gpressman
Jun 26 2016 18:57
@Martialis39 but if the rounds hit 0 it's supposed to break and stop counting
it seems the clearInterval doesn't work anymore
Martialis39
@Martialis39
Jun 26 2016 18:59
@Jesse989 sorry all i got so far is that the minimax function is getting called twice on ai move
Mitchel
@MitchelAnthony
Jun 26 2016 19:00
@Martialis39 No, I did not.
Couldn't find a good free one.
Martialis39
@Martialis39
Jun 26 2016 19:00
@gpressman ok some issue with the if statement there
Gabe Pressman
@gpressman
Jun 26 2016 19:01
you say that because you fiddled and fixed it, or just assuming?
Martialis39
@Martialis39
Jun 26 2016 19:01
@Martialis39 OK, so ... is rounds supposed to be 0 the whole time?
@gpressman no because I added a console.log in the if statement it is executed every single time
@Martialis39 Can you give me a quick run down on what all the variables represent?
Gabe Pressman
@gpressman
Jun 26 2016 19:03
Ok, one second.
setRounds is the user inputted number of rounds and rounds is how many times the whole thing should run. I have them seperate so that at the end I could have it reset to the right number. work/setWork and rest/setRest is the same idea but I didn't get a chance to incorporate setting the work and rest so they're hardcoded. And count is the timer being modified to countdown, so if Rounds is 5, work is 10 and rest is 5. It'll run 10 seconds, beep, run 5 seconds, beep, subtract 1 from the count and then repeat until count is up. Right now the starting count is hardcoded as well btw.
Gabe Pressman
@gpressman
Jun 26 2016 19:08
All this worked properly before I tried to be able to set the count btw.
Martialis39
@Martialis39
Jun 26 2016 19:10
Ok sure, very good
but forgive me if im mistaking
but it seems you have only the one
clearInterval statement
no sorry
there are two
ok
Gabe Pressman
@gpressman
Jun 26 2016 19:11
I think I found it, one sec
Martialis39
@Martialis39
Jun 26 2016 19:11
sure
Gabe Pressman
@gpressman
Jun 26 2016 19:13
nvm
Martialis39
@Martialis39
Jun 26 2016 19:13
ok but tell
the count function is supposed to stop it, right?
Gabe Pressman
@gpressman
Jun 26 2016 19:15
Yeah, I got it.
Or sort of
Martialis39
@Martialis39
Jun 26 2016 19:15
ok whats up?
Gabe Pressman
@gpressman
Jun 26 2016 19:16
I just added an else after the first if
and it stops beeping and counting on screen
but it keeps hitting my console log
so apparently it's still running?
Martialis39
@Martialis39
Jun 26 2016 19:17
yup, should be
Gabe Pressman
@gpressman
Jun 26 2016 19:18
Yeah, if I add a round it starts counting without me hitting start
why should it be, shouldn't it hit the clearInterval and break?
Martialis39
@Martialis39
Jun 26 2016 19:19
Tbh, with the code I last saw I dont understand how it runs at all
in my console it shows
0
hit IF statement
0
etxc
ill check whats up now
ok so this is what I get
I hit start, it stays at 0
if I add and then click start
a second count shows up
and one goes down
@gpressman I'd say at this point, lets try and make it a bit simpler. Lets use one variable for everything and lets have that be startingTime for example. the + can be startingTime += 1, and the minus vice versa. Then you can have it tick down
and once its zero, give the beep
Martialis39
@Martialis39
Jun 26 2016 19:24
gtg for the moment, wish you luck!
Gabe Pressman
@gpressman
Jun 26 2016 19:25
thanks
Gabe Pressman
@gpressman
Jun 26 2016 19:38
@Martialis39 I found the problem, but I don't have a solution unfortunately
ren-lowex
@ren-lowex
Jun 26 2016 19:42
Hey all I am working on
Line up Form Elements Responsively with Bootstrap
and it says I am missing an end div
here is my code
<div class="row">
<div class="col-xs-7">
<label><input type="checkbox" name="personality"> Loving</label>

<label><input type="checkbox" name="personality"> Lazy</label>

<label><input type="checkbox" name="personality"> Crazy</label>

<input type="text" class="form-control" placeholder="cat photo URL" required>
</div>
<div class="col-xs-5">
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
</div>
</form>
</div>
do all see the missing end div?
thanks
Martialis39
@Martialis39
Jun 26 2016 19:52
@gpressman just break it down, get simple functionality going : ) Delete everything and get a timer thats ticking down, thats hard enough. Then see if you can make use adjustable etc
Take small steps and you'll see you can do it : )
Gabe Pressman
@gpressman
Jun 26 2016 19:58
@Martialis39 nah the functionality was fine, it was just that setInterval, clearInterval
when I put setInterval into a function
clearInterval needs the id of setInterval and I was passing in the whole function so it didn't work
greg
@wearenotgroot
Jun 26 2016 20:01
haha that sound made me jump a little
jake-thewoz
@jake-thewoz
Jun 26 2016 20:11
Hi everyone! I'm trying to do the wikipedia search project, and I'm running into an issue. Do I need to change my user-agent when making the request?
Toni Shortsleeve
@KoniKodes
Jun 26 2016 20:13
@ren-lowex I see that you closed your form, but I don't see that you opened it. That may be what confused it.
@jake-thewoz I don't think so. I think ajax GET with a jsonp should work.
jake-thewoz
@jake-thewoz
Jun 26 2016 20:23
@KoniKodes hmm, okay. jsonp is the the 'datatype'?
Toni Shortsleeve
@KoniKodes
Jun 26 2016 20:24
@jake-thewoz I'm not sure how you are writing it. Do you have pen set for it?
jake-thewoz
@jake-thewoz
Jun 26 2016 20:24
@KoniKodes I was doing a $.getJSON, but it gave me a User-Agent not allowed error thingy
Toni Shortsleeve
@KoniKodes
Jun 26 2016 20:28
@jake-thewoz I don't think that you need to have your headers
@jake-thewoz Yes, getJson isn't always sufficient. jsonp would be the datatype, parsed then console.log to see if it's catching it. Stating Mozilla is not necessary. And you'll be crossing over is you keep http: ...
jake-thewoz
@jake-thewoz
Jun 26 2016 20:34
@KoniKodes Thanks for the help. I've removed the headers and all that, but it's still not getting to the 'success' function
CamperBot
@camperbot
Jun 26 2016 20:34
jake-thewoz sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @konikodes |http://www.freecodecamp.com/konikodes
Mitchel
@MitchelAnthony
Jun 26 2016 20:36
@jake-thewoz I've had some trouble with the wiki viewer too. Ended up with this:
    $.ajax({
        url: "https://en.wikipedia.org/w/api.php",
        data: {
            action: "query",
            list: "search",
            //prop: "revisions",
            //rvprop: "content",
            format: "json",
            srsearch: search,
            callback: "displayWiki"
            //origin: "https://s.codepen.io"
        },
        headers: {
            "Api-User-Agent": "FCC-WikipediaViewer1.0"
        },
        xhrFields: {
            withCredentials: true
        },
        dataType: 'jsonp'
    });
}

function displayWiki(json) {
    console.log(json);
    // https://en.wikipedia.org/?curid=
}
jake-thewoz
@jake-thewoz
Jun 26 2016 20:41
@MitchelA Thanks man! How does your ajax request get to the displayWiki function?
CamperBot
@camperbot
Jun 26 2016 20:41
jake-thewoz sends brownie points to @mitchela :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @mitchela |http://www.freecodecamp.com/mitchela
Mitchel
@MitchelAnthony
Jun 26 2016 20:43
@jake-thewoz That's the callback: "displayWiki" part.
The returned text looks like: displayWiki(jsonobject);
jake-thewoz
@jake-thewoz
Jun 26 2016 20:49
@MitchelA lol that's what I figured. Idk why this is giving me the business still! I'm getting a problem with my returned JSON- "undefined is not a function". it seems like it's trying to call an undefined function with the return dat
Thanks for the help though! @MitchelA I can probably tinker away at this from here
CamperBot
@camperbot
Jun 26 2016 20:50
jake-thewoz sends brownie points to @mitchela :sparkles: :thumbsup: :sparkles:
:warning: jake-thewoz already gave mitchela points
Jonathan Aguilar
@jonaguiar
Jun 26 2016 21:01
I can't seem to upload an image from my computer on codepen. io . I am doing the personal portfolio.
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 21:04
Hello Everyone !
Mitchel
@MitchelAnthony
Jun 26 2016 21:05
@jonaguiar Isn't asset hosting a pro feature?
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 21:06
@jonathan What i did was to use URL to existing free images on the web.
Jonathan Aguilar
@jonaguiar
Jun 26 2016 21:06
@MitchelA I don't have a pro account
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 21:06
@jonathan Why would you want to go pro for a project?
Mitchel
@MitchelAnthony
Jun 26 2016 21:07
@jonaguiar Then use a free image hosting service? :)
Jonathan Aguilar
@jonaguiar
Jun 26 2016 21:11
@MitchelA that is true
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 21:15
I'm working on my FCC Personal Portfolio Webpage, but I see that i have serious problems with Customization of Boostrap. Any suggestions? I scanned the pages on "http://getbootstrap.com/customize/" but I'm not sure if this is what can help me with this project. Obviously, i'm trying to stick firmly with the rules of FCC for my own benefit of learning, but again I'm lost of how to do it the right way. I also don't want to start going ahead of FCC curriculum by learning LESS or SASS. I'll be very grateful for any helpful idea's/suggestions.
Gabe Pressman
@gpressman
Jun 26 2016 21:16
what are you trying to do?
Jonathan Aguilar
@jonaguiar
Jun 26 2016 21:22
@Annis-Monadjem What are you trying to do? i am almost finish with my portfolio webpage.
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 21:24
@Gabe I'm trying to customize the default Bootstrap CDN to look similar to the example given for FCC Personal Portfolio Webpage ("https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage"). I read some articles on Google about customizing Bootstrap and i think i know now that i have to place <link .... for bootstrap before my custom CSS <link. But for some unexplained reason I'm not able to properly align the "navbar-brand" vertically. The only way I can achieve it is by playing around with the margins (which seems to me not to be generic and so I'm avoiding). Anything else failed me here: for example "vertical-align" together with "display: block". I have used Google-Dev's to see which Bootstrap CSS might be on my way - but it doesn't show anything. So I'm not sure what I should do now?
also @Jonathan please see my comments above
@gpressman @jonaguiar (once more) I'm working on my FCC Personal Portfolio Webpage, but I see that i have serious problems with Customization of Boostrap. Any suggestions? I scanned the pages on "http://getbootstrap.com/customize/" but I'm not sure if this is what can help me with this project. Obviously, i'm trying to stick firmly with the rules of FCC for my own benefit of learning, but again I'm lost of how to do it the right way. I also don't want to start going ahead of FCC curriculum by learning LESS or SASS. I'll be very grateful for any helpful idea's/suggestions.
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 21:29
@gpressman (once more) I'm trying to customize the default Bootstrap CDN to look similar to the example given for FCC Personal Portfolio Webpage ("https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage"). I read some articles on Google about customizing Bootstrap and i think i know now that i have to place <link .... for bootstrap before my custom CSS <link. But for some unexplained reason I'm not able to properly align the "navbar-brand" vertically. The only way I can achieve it is by playing around with the margins (which seems to me not to be generic and so I'm avoiding). Anything else failed me here: for example "vertical-align" together with "display: block". I have used Google-Dev's to see which Bootstrap CSS might be on my way - but it doesn't show anything. So I'm not sure what I should do now?
Mitchel
@MitchelAnthony
Jun 26 2016 21:30
I'd say the best suggestion is to build a basic version now, and update later. As suggested by the guidelines: "Don't worry if you don't have anything to showcase on your portfolio yet - you will build several apps on the next few CodePen challenges, and can come back and update your portfolio later."
You'll learn new things and then add all the fancy stuff to the portfolio :)
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 21:38
@MitchelA I have no problem with that. I'm trying to follow FCC rule #1 (to be a functionality similar" to the given example - if i'm understand correctly). So for example I picked up the background-colors from the given example (without peeking into CSS !) by using Google-Dev's. Also I've found the Fonts and searched for free alternative fonts on the web and so I am mimicking the example, filling the content with my personal story. But figuring out the "behavior" of the example Portfolio terns out to be rough and tough. I don't want to waste time but really learn it well. So what I thought I need to do is override some Bootstraps default settings so that my personal Portfolio "behaves" similar to the given FCC example Portfolio. In particular the positioning of elements (centering vertically and horizontally with "navbar-brand" is a kick in but. Any idea and suggestion is welcome.
Mitchel
@MitchelAnthony
Jun 26 2016 21:39
I see. Could you paste your code for the navbar?
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 21:41
    .navbar-nav li a {
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 22px;
        font-weight: 700;
        padding: 20px 30px;
        margin: 30px 25px;
    }
@MitchelA (see above)
Antonio Hernandez
@tzunun
Jun 26 2016 21:44
hello everyone, I have finished 3 of the intermediate front end development projects, and they work, but whenever I check them in a browser on android, they don't work as well as they should specifically a background image that does not display properly. Do the projects have to look perfect in mobile browsers?
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 21:45

@MitchelA - I tried earlier to use:

    .navbar-nav li a {
               .....
               vertical-align: middle;
              display: block;
     }

and it just flatly fails (i know it would work if there would be no Bootstrap on my way).

Antonio Hernandez
@tzunun
Jun 26 2016 21:49
thank you
Mitchel
@MitchelAnthony
Jun 26 2016 21:49
If I just insert some default html code for a bootstrap navbar, it automatically aligns vertically. Or did I misunderstand the problem? You can see my navbar here: http://codepen.io/MitchelA/full/WxRYWm/
JD Tadlock
@jdtdesigns
Jun 26 2016 21:58
@Annis-Monadjem Here's an example of a nav without using BS. Much less code. ;) http://jsbin.com/vufoni/edit?html,css,output
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 22:03
@MitchelA (thank for your patience - i just setup things on my codepen as I normally test it offline locally). So now please check out my project (crude form, just with navbar) here: "http://codepen.io/Annis-Monadjem/full/yJgZao/"
Susan
@tmmggmmdld
Jun 26 2016 22:09
For those who have already built the Tribute Page challenge, how did you decide to use?
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 22:10
@jdtdesigns - I love your design. Your suggestion is very valuable, but I'll not go that way (at least not now). For now I would like to use my Bootstrap knowledge to the extend possible (FCC rule #3 - we are told to use a Framework), before moving on. But thanks for sharing "jsbin.com" - I will digg into it later on.
CamperBot
@camperbot
Jun 26 2016 22:10
annis-monadjem sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 576 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Susan
@tmmggmmdld
Jun 26 2016 22:10
How did you decide on who to chose?
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 22:11
@Susan I have completed my Tribute Page. I used the theme/content that was important to me to share with the world.
@Susan - I guess any topic / subject that is dear to your heart and which you would like to inform others is a valuable topic.
JD Tadlock
@jdtdesigns
Jun 26 2016 22:12
@Annis-Monadjem You're not told to use a framework. They say you "may use any library or framework". Not required. And to be honest, not a good idea to start with a framework. I've taught many people css and Bootstrap will only confuse and frustrate you until you learn css. The magical thing is, once you learn css, you will never need Bootstrap. ;)
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 22:18
@jdtdesigns - tell me more please ... that is music to my ears (because I did invest alot of time on CSS and HTML). The problem that read about is that CSS becomes especially bulky and messy once there is a larger web project under way - hence the tendency to use frameworks (apparently this is a trend for some good time now!). After all FCC have taken Bootstrap very seriously. You are saying something fundamentally different than others. So what are you trying to tell me is ignore Bootstrap and spent long hours of setting tediously every small detail on your site. For the learning purposes that is good (to learn CSS) but to deliver a project on a competitive timely manner - I'm not sure how this would work out. I'd like to hear your comments to these please.
@MitchelA Did you have a chance to see my crude start of project. I'm not sure why I cannot get "navbar-banner" to center : "http://codepen.io/Annis-Monadjem/full/yJgZao/"
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 22:25
@jdtdesigns - Did you read my comments above. I cannot wait to hear from you. In particular I do not know what to make of you saying "The magical thing is, once you learn css, you will never need Bootstrap". This is what you said above. But Bootstrap takes away much tedious CSS work. Isn't this something to celebrate about?
JD Tadlock
@jdtdesigns
Jun 26 2016 22:41

@Annis-Monadjem You're saying the same things I hear constantly. Why do this or that when I have this framework that does it all for me? Because you need to understand how that framework does what it does. I spent 4 years learning css design. I can mock any custom site and I mean ANY custom site faster than 99% of people can with Bootstrap. Is it because I'm super fast? Not really(although I'm pretty quick :P). It's because 99% of people don't realize what Bootstrap is made to do.

It is a PROTOTYPING FRAMEWORK. This means, you use it to quickly mock up a prototype layout of a design in block form. You put this block here or that block there, add some buttons or throw a nav in here. Then you show your client the mockup and ask them, does this layout work? They say that's good, and you begin the site design.

If you are building a custom site, you SHOULD NOT be using bootstrap. One of the most important principals of web development and programming is DRY(Don't Repeat Yourself). Using Bootstrap to build the layout, then going back and overwriting BS code to make the buttons,navs, links, and so on a different color or size or different font, ect. ect. is NOT good practice.

This is why I will repeat this most important concept. Bootstrap is for PROTOTYPING ONLY. I can write the code for a custom site in 90% less code than BS. Crazy right? Not when you understand that you don't need the Full Stack of Bootstrap for 99% of sites. And on top of that, creating your custom styles mean you only write them once. And I will save this last reason because it is a huge factor. FLOATS....

Floats are terrible abominations of DOM styling that have been the plague of our existence since they were first implemented. There are 10 different things you can do today that are better, cleaner, and easier to implement. Bootstrap relies heavily on floats, and as such, has countless browser hacks to deal with their terrible behavior. Floats are no longer needed these days and not using them will save you writing 5 or 10 extra lines of code to make them sorta work in the browser.

Bootstrap has it's uses and is great for what it is made to do. But believe me when I say it. You will remember my words when you learn css and think back about how you USED to use Bootstrap. ;)

Bruce Young
@mutantspore
Jun 26 2016 22:48
and JD steps down off the podium lol
UgoHarry
@UgoHarry
Jun 26 2016 22:49
Hey @everyone. I'm having problem adding images to my portfolio project using background-image. Can anyone help with this?
I believe it might be a security issue with Codepen
Suzanne Atkinson
@AdventureBear
Jun 26 2016 22:49
@jdtdesigns umm...i use floats all the time! What should I be using instead?
Jonathan Aguilar
@jonaguiar
Jun 26 2016 22:49
i have less then 3 weeks of coding experience but building a portfolio page is not too difficult
JD Tadlock
@jdtdesigns
Jun 26 2016 22:50
@AdventureBear flexbox, inline-block, display: table
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 22:50
@jdtdesigns - I'm not sure how can i thank you for your valuable comments! I wish i knew this earlier (i would perhaps have saved 1 week of learning Bootstrap). Tell me please which free sources are the best in learning CSS, HTML, JavaScript and whatever it takes to become a master without having to rely on frameworks (i.e. if that is what you are suggesting).
CamperBot
@camperbot
Jun 26 2016 22:50
annis-monadjem sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: annis-monadjem already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jun 26 2016 22:50
shall I continue?
:D
anas
@anasfe
Jun 26 2016 22:50
hi im stuck at the Random quote generator challenge i cant get the quotes to tweet here is the codpen http://codepen.io/anasfe/pen/WxRdKQ?editors=1111
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 22:52
@jdtdesigns - yes please continue and also comment on my last question above.
Suzanne Atkinson
@AdventureBear
Jun 26 2016 22:53
@jdtdesigns isn't flexbox also a framework? I've not bothered learning it b/c I figured it was redundant. But maybe there is more to it!
Hi guys,how can I make this borders look smoother ?
JD Tadlock
@jdtdesigns
Jun 26 2016 22:57
@Annis-Monadjem The best advice I can give you or anyone else is to Just Do It. Pull up a text editor and a browser and go for it. Look through the documentation on CSS and start using any and every property and attribute you see. Think of something cool or look up cool things on Codepen that people have made and try to make them. You will quickly find that CSS is a complex language of it's own. But when it clicks, it'll feel great and you'll understand why I'm so passionate about it.
This message was deleted
Uğur
@UgurKurt
Jun 26 2016 22:58
Did it,sorry
JD Tadlock
@jdtdesigns
Jun 26 2016 23:00
@AdventureBear Flexbox is a layout mode, like inline-block and so forth. It is just more robust and includes many different properties to affect it's children.
But it's not a huge thing to learn
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 23:00
@jdtdesigns - thanks again. That is very helpful indeed.
CamperBot
@camperbot
Jun 26 2016 23:00
annis-monadjem sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: annis-monadjem already gave jdtdesigns points
Jonathan
@JonKaric
Jun 26 2016 23:01
@jdtdesigns I'm sorry but I've got to disagree with you that you shouldn't use BS in producing a custom site. Are you telling me you write your own framework for each custom site you create?
JD Tadlock
@jdtdesigns
Jun 26 2016 23:02
@JonKaric I have a grid system that I made that is like 10 lines of code that I use on most sites.
Custom styles and so forth will be required for every new site.
Bootstrap has Strict styling for it's stuff. Why do you think the buttons are that bs blue or that bs green? And they have that bs padding. That's just one example, but think about it. It is used to show a client a layout model of how the content will be displayed.
anas
@anasfe
Jun 26 2016 23:05
...
JD Tadlock
@jdtdesigns
Jun 26 2016 23:06
@JonKaric Believe me I've heard it plenty of times. But when you see me code, you'll 100% guarantee be sold on what I'm telling you all. ;)
Jonathan
@JonKaric
Jun 26 2016 23:07
@jdtdesigns I just took the grid from BS and leave everything else out. I don't disagree that bootstrap is extremely bloated to the point of no return (3k lines is ridiculous) but it lets you get the site up alot quicker than not using it, once youve overridden the styles you can literally just use your own or their grids. I don't beleive in re-inventing the wheel. If somthing is available to you, use it
JD Tadlock
@jdtdesigns
Jun 26 2016 23:10
@JonKaric I'm not going to keep you from your BS bro. Just understand I come from years of using BS to a more professional understanding of CSS.
People tend to think I don't use BS because I don't know it. I know it very well. Just so you're aware of that. ;)
Jonathan
@JonKaric
Jun 26 2016 23:15
@jdtdesigns Im well aware of that and I'm not questioning your integrity, I love the points you make because I know they are true with the end user in mind. As long as your grid is readable and understandable to other devs then great. Unfortunatly there are alot of devs out there who rely on BS so much because they don't know anything else. I use bootstrap not because I dont know how to build my own grids, buttons etc but because it's handy to get the site up fast
JD Tadlock
@jdtdesigns
Jun 26 2016 23:18
@JonKaric I tend to look at browser stats every month or so to keep up to date on what I can use regarding css. Older browser usage is down to 1% across the board. This tells me, there is no reason to not use flexbox. If you haven't used flex to build a grid, you haven't lived. :P
Jonathan
@JonKaric
Jun 26 2016 23:23
@jdtdesigns I do tend to be not as brutal as you with browser compatibility. Im always looking but i've always been a strong advocate to give the same experience across the board, for people with old old devices. I still don't think IE9 should be dropped yet even though Microsoft dont support it
Jonathan
@JonKaric
Jun 26 2016 23:23
For me Flexbox and IE10+ will start at the end of this year
JD Tadlock
@jdtdesigns
Jun 26 2016 23:23
There are the stats
ie10 is not even a factor
Jonathan
@JonKaric
Jun 26 2016 23:24
IE10+ i mean.
JD Tadlock
@jdtdesigns
Jun 26 2016 23:25
No reason to not use it now. Check your analytics to see if you're getting hits from ie9. I'm pretty sure you won't be lol.
@JonKaric
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 23:25
@MitchelA thanks for the codepen example.
CamperBot
@camperbot
Jun 26 2016 23:25
annis-monadjem sends brownie points to @mitchela :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @mitchela |http://www.freecodecamp.com/mitchela
Jonathan
@JonKaric
Jun 26 2016 23:25
The way i see it is for example, IE9 with a 1.55% share. One in every 100 people will be using IE9 and do you really want to leave them out in the dark? Would it be the moral thing to do? As web developers we should build for everyone (in consideration)
JD Tadlock
@jdtdesigns
Jun 26 2016 23:27
@JonKaric The stats don't work that way. They are based on web site/clientele relationships. If you're running a game stream site, do you think granny Lucile will be browsing it? Not likely
Use analytics to judge what your sites needs
Jonathan
@JonKaric
Jun 26 2016 23:28
@jdtdesigns i've mostly build for restaurants and since they don't have their own analytics, i had to judge who would be using their site.
JD Tadlock
@jdtdesigns
Jun 26 2016 23:29
Restaurants are a site I would do ie9 support in. But you can still use analytics on those sites to get an idea of how many older browsers are hitting them.
You can think about it this way. Older people tend to use the phone to call restaurants while younger people use the net.
miriam-z
@miriam-z
Jun 26 2016 23:32
Hi guys! Please take a look at my tribute page! Any thumbs up or likes are a great things! :smile: look forward to seeing what you think http://codepen.io/miriam-z/pen/mErdPK
Jonathan
@JonKaric
Jun 26 2016 23:32
Thats a good way of thinking about it but the web is getting adopted a lot in older age ranges. Especially from influence from the young, and if they want to see a menu? see opening times etc.
Bruce Young
@mutantspore
Jun 26 2016 23:33
my 72 year old mother-in-law uses an iPad (i bought her) for everything.
Jonathan
@JonKaric
Jun 26 2016 23:35
@miriam-z Best design of a tribute page ive seen. Really clean. Only things i notice are the dividers spacing. Should have it equal top/bottom.
@miriam-z I also tend to stay away from @import in css, best to use link in the head instead
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 23:37
@jdtdesigns - As i said ealier I value your comments very much and I'm intending to work on your suggestions. I still have a question related to what you were saying earlier. Please share with me what are the 10 other CSS techniques which you had on mind (quoted by yourself above: "FLOATS.... Floats are terrible
abominations of DOM styling that have been the plague of our existence since
they were first implemented. There are 10 different things you can do today
that are better, cleaner, and easier to implement. Bootstrap relies heavily on
floats, and as such, has countless browser hacks to deal with their terrible
behavior. Floats are no longer needed these days and not using them will save
you writing 5 or 10 extra lines of code to make them sorta work in the browser.
"). I'm very curious to know what other 10 CSS techniques are today in demand and which are better than frameworks and floats ?
miriam-z
@miriam-z
Jun 26 2016 23:37
@JonKaric thank you! I am still tweaking my dividers have used page headers for the divides between facts about him but will be spacing out my padding better between sections
CamperBot
@camperbot
Jun 26 2016 23:37
miriam-z sends brownie points to @jonkaric :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @jonkaric |http://www.freecodecamp.com/jonkaric
miriam-z
@miriam-z
Jun 26 2016 23:37
@JonKaric :+1:
Faisal Zulfiqar
@faisal1337
Jun 26 2016 23:39
I want to increase text size in my buttons when I hover over them. By simply changing the font beneath hover selector changes the content area and it disturbs other buttons as well. Anyway I can only change the text size and keep the button size constant?
Nathaniel Nasarow
@Torgian
Jun 26 2016 23:39
hey guys need help with my random quote machine page
my API requests keep coming up bad
Ken Haduch
@khaduch
Jun 26 2016 23:40
@miriam-z - nice looking page! A useful tool that you should know about, at least it gives you things to look at in your CSS, is the "Analyze CSS" button found in the CSS config tab at the bottom. If points out the thing about @import that @JonKaric mentioned above, and other things. There is a similar tool in the JS tab to analyze javascript (when you get to using that.)
matthew3454
@matthew3454
Jun 26 2016 23:41
Hello Everyone. I only have a few minor errors left to solve in my TwitchTV application. Any suggestions will be appreciated. Thank you.http://codepen.io/codeabode20/pen/Gqrzwq
Jonathan
@JonKaric
Jun 26 2016 23:41
@faisal1337 You can try giving your button max-height/width
miriam-z
@miriam-z
Jun 26 2016 23:41
@khaduch thanks for that will take a look
CamperBot
@camperbot
Jun 26 2016 23:41
miriam-z sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1379 | @khaduch |http://www.freecodecamp.com/khaduch
Faisal Zulfiqar
@faisal1337
Jun 26 2016 23:41
@JonKaric let me try
JD Tadlock
@jdtdesigns
Jun 26 2016 23:42
@Annis-Monadjem I mentioned a few(flexbox, inline-block, display:table) and depending on the situation, absolute positioning. These can all be implemented in many different ways to accomplish what you need. Knowing what technique to use and what is best in each situation just comes with practice and experience.
Annis Monadjem
@Annis-Monadjem
Jun 26 2016 23:44
Thanks @jdtdesigns
CamperBot
@camperbot
Jun 26 2016 23:44
annis-monadjem sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 577 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Faisal Zulfiqar
@faisal1337
Jun 26 2016 23:49
@JonKaric there are 3 different buttons 'Home' 'Portfolio' 'Contact Me' with different widths. I used dev tools to check there widths and applied the style directly to the tags like style="a:hover {max-width: 121.1px;} font-size: 15px;} but still it doesn't work
miriam-z
@miriam-z
Jun 26 2016 23:50
Next challenge started! Building a portfolio webpage :+1:
EdenSweden
@EdenSweden
Jun 26 2016 23:53
Hi guys! In CodePen when you use JQuery, do you write that code in the Javascript module?
Bruce Young
@mutantspore
Jun 26 2016 23:53
yes
Jonathan Aguilar
@jonaguiar
Jun 26 2016 23:54
how do i click put a clickable button. This is what i have <button class="btn btn-default btn-lg">LinkedIn</button>
EdenSweden
@EdenSweden
Jun 26 2016 23:54
@mutantspore when you do that, do you use the <script></script> tags to do the document ready function as we learned in the JQuery lesson section? Or do you write it some other way since <script> is an html tag?
Faisal Zulfiqar
@faisal1337
Jun 26 2016 23:55
@jonaguiar use <a href="http://address">LinkedIn</a>
Bruce Young
@mutantspore
Jun 26 2016 23:55
no the JS tab in codepen is teh <script> bit
it’s equivalent to including a JS file
EdenSweden
@EdenSweden
Jun 26 2016 23:56
@jonaguiar I'm still a noob but I think you might have to next that all in an <input></input> element. correct me if I'm wrong.
Faisal Zulfiqar
@faisal1337
Jun 26 2016 23:57
@jonaguiar by clickable if you mean that page should redirect to your linkedin profile then use the method I mentioned.
EdenSweden
@EdenSweden
Jun 26 2016 23:57
@mutantspore so in that case I just say $(document).ready(function() {}); and target the elements I want within that?
Faisal Zulfiqar
@faisal1337
Jun 26 2016 23:57
Also use target="_blank" if you want it to open in a new tab.
Bruce Young
@mutantspore
Jun 26 2016 23:58
@EdenSweden yes that’s the right track
EdenSweden
@EdenSweden
Jun 26 2016 23:58
@jonaguiar if you are adding a link on codepen you'll want to do what @faisal1337 said and use target="_blank" to open a new tab
Bruce Young
@mutantspore
Jun 26 2016 23:58
@EdenSweden make sure you include jquery in the JS settings too
EdenSweden
@EdenSweden
Jun 26 2016 23:58
@jonaguiar because codepen won't allow you to redirect to a new page without opening a new tab.
thanks @mutantspore
CamperBot
@camperbot
Jun 26 2016 23:59
edensweden sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star2: 1730 | @mutantspore |http://www.freecodecamp.com/mutantspore