These are chat archives for FreeCodeCamp/HelpFrontEnd

10th
Aug 2017
Daniel Ahn
@danii956
Aug 10 2017 00:26 UTC
Is anybody familiar with bootstrap scrollspy?
Gulsvi
@gulsvi
Aug 10 2017 00:29 UTC

@danii956 This is invalid CSS:

body {
      background-color: gray;
      padding-top: 110px;
      data-spy='scroll';
      data-target='.navbar';
      data-offset='';
      position: relative;
 }

Those data attributes need to be added to your body tag

Daniel Ahn
@danii956
Aug 10 2017 00:30 UTC
wait, you're not talking about data-offset="" being blank right? Cause that was intentional
Gulsvi
@gulsvi
Aug 10 2017 00:30 UTC
@danii956 I'm talking about data-spy for example, is not a CSS property - and = sign doesn't belong in CSS either
Daniel Ahn
@danii956
Aug 10 2017 00:31 UTC
Oh my god...
Gulsvi
@gulsvi
Aug 10 2017 00:31 UTC
You would need to add those to your <body> tag as custom data attributes.
$("body").attr({
    "data-spy": "scroll",
    "data-target": ".navbar",
    "data-offset": "50"
  }).scrollspy();
Daniel Ahn
@danii956
Aug 10 2017 00:31 UTC
@SkyC0der I feel so ashamed....
Gulsvi
@gulsvi
Aug 10 2017 00:31 UTC
No need to feel ashamed, there's a lot of stuff going on figuring out bootstrap
You can do it in HTML like this too:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
juni
@junipberry
Aug 10 2017 00:33 UTC
can you check over why this code is not working.. I want to get all possible values of an object written out as an Array.
function listValues(obj) {
  var myArr = [];
for (let value in obj){
  myArr.push(value);
}  
console.log(Object.values(obj));
return myArr;
}
Daniel Ahn
@danii956
Aug 10 2017 00:34 UTC
@SkyC0der Hmm... it still seems to not work
I tried using jquery and instyle css
*not instyle css putting attributes inside html tag
Gulsvi
@gulsvi
Aug 10 2017 00:35 UTC
@danii956 I'll take a closer look at your codepen
juni
@junipberry
Aug 10 2017 00:36 UTC
can you take a look at mine too @SkyC0der
Gulsvi
@gulsvi
Aug 10 2017 00:38 UTC
@danii956 I missed that you're using a fixed-top navbar. In that case, you also need to add a offset parameter to the scrollspy method in your JS:
$("body").attr({
    "data-spy": "scroll",
    "data-target": ".navbar",
    "data-offset": "150"
  }).scrollspy({
    offset: 150
  });
Adjust the 150 as needed
@junipberry Sure
juni
@junipberry
Aug 10 2017 00:38 UTC
ty, I’ve posted it above
Gulsvi
@gulsvi
Aug 10 2017 00:39 UTC
Can you give me an example object?
One that's failing I guess
juni
@junipberry
Aug 10 2017 00:39 UTC
I’m trying to get an array of values from an object..inclusive of possible integers.
Daniel Ahn
@danii956
Aug 10 2017 00:40 UTC
@SkyC0der Thank you it works!!!
CamperBot
@camperbot
Aug 10 2017 00:40 UTC
danii956 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2354 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 10 2017 00:41 UTC
@danii956 Happy to help - onto the next issue :)
juni
@junipberry
Aug 10 2017 00:41 UTC
example object:
  name : ‘junip',
  age : 25,
  hasPets : false
}
*{ in beginning
Gulsvi
@gulsvi
Aug 10 2017 00:42 UTC
@junipberry Your code seems close - just depends if there are more complex objects
change your .push() code to push the value of each property: myArr.push(obj[value]);
I would also change the for...in loop variables:
function listValues(obj) {
  var myArr = [];
  for (let prop in obj) {
    myArr.push(obj[prop]);
  }
  return myArr;
}
juni
@junipberry
Aug 10 2017 00:43 UTC
something like:
arr.push([value,obj[value]]);
Gulsvi
@gulsvi
Aug 10 2017 00:44 UTC
What is the output of your example object supposed to look like?
Maybe I misunderstood
Right now, with the recommendation I gave, it converts the object to: ["junip", 25, false]
juni
@junipberry
Aug 10 2017 00:45 UTC
should be
[‘junip', 25, false]
yes, that’s right
Gulsvi
@gulsvi
Aug 10 2017 00:46 UTC
So, instead of myArr.push(value); do myArr.push(obj[value]);
juni
@junipberry
Aug 10 2017 00:47 UTC
awesome
Gulsvi
@gulsvi
Aug 10 2017 00:47 UTC
var obj =   {
  name : 'junip',
  age : 25,
  hasPets : false
}

console.log(obj['name']) // junip
juni
@junipberry
Aug 10 2017 00:47 UTC
ty @SkyC0der ~~
CamperBot
@camperbot
Aug 10 2017 00:47 UTC
junipberry sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2355 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 10 2017 00:47 UTC
No problem
juni
@junipberry
Aug 10 2017 00:47 UTC
appreciate it!
juni
@junipberry
Aug 10 2017 01:43 UTC
hey @SkyC0der , can I get your input again
Jim Tryon
@jimtryon
Aug 10 2017 01:48 UTC
I’m working on a connect four game and looking for design approaches, using bootstrap 4 and jQuery. One idea is to have a button to populate the grid, but I also was going to create 42 divs to represent each circle on the grid. Any other ideas?
jamesjd54
@jamesjd54
Aug 10 2017 02:22 UTC
hey can someone look at what ive done for the random quote generator so far?
im completely lost
CallMeOrange
@EgnaroDev
Aug 10 2017 02:22 UTC
I can try take a look
jamesjd54
@jamesjd54
Aug 10 2017 02:23 UTC
so i didnt expect this to work, but i was just going to hope that -something- would happen when i click the button
but i really have no clue how to add in the API i found
NabeelahSaib
@NabeelahSaib
Aug 10 2017 02:25 UTC
hello, not sure if anyone can help but i am working on an html email signature. The one thing thats bothering me is that I seem to be unable to override the CSS for text-decoration that comes from the user agent stylesheet. I have tried inline styling and specific targeting but have not had a any luck.
thinsoldier
@thinsoldier
Aug 10 2017 02:25 UTC
There seems to be a vital piece of info missing frome the instructions of everything js related I want to download: var lazyLoadImages = require('lazy-load-images'); what provides the require functionality? It seems to be used in place of <script src="foo"> for everything.
CallMeOrange
@EgnaroDev
Aug 10 2017 02:26 UTC
@jamesjd54 I think this is a problem $("message").html(a[0].content + "<p>— " + a[0].title + "</p>");
jamesjd54
@jamesjd54
Aug 10 2017 02:26 UTC
so i tried changing that to be more like the lesson
CallMeOrange
@EgnaroDev
Aug 10 2017 02:26 UTC
"message", it is not an element
jamesjd54
@jamesjd54
Aug 10 2017 02:26 UTC
$(document).ready(function() {
$("#getMessage").on("click", function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(json) {
$("message").html(JSON.stringify(json));
});
});
});
CallMeOrange
@EgnaroDev
Aug 10 2017 02:27 UTC
if it is a class it should be .class, if is Id then it should be #Id
iso
@iso1048
Aug 10 2017 02:27 UTC
@jamesjd54 the url will need to be https not http, since codepen is served over https
CallMeOrange
@EgnaroDev
Aug 10 2017 02:27 UTC
Ah, I forgot about it ^ too
jamesjd54
@jamesjd54
Aug 10 2017 02:28 UTC
thanks guys!
so im on the right track now, something happens when i click my button
CallMeOrange
@EgnaroDev
Aug 10 2017 02:28 UTC
Did button disappear for you?
jamesjd54
@jamesjd54
Aug 10 2017 02:28 UTC
yes
CallMeOrange
@EgnaroDev
Aug 10 2017 02:29 UTC
Hm..
jamesjd54
@jamesjd54
Aug 10 2017 02:29 UTC
not sure what thats about haha
CallMeOrange
@EgnaroDev
Aug 10 2017 02:29 UTC
I found a problem
iso
@iso1048
Aug 10 2017 02:29 UTC
@jamesjd54 your button element is within the div with the class .message, so when you change the html of that div, you remove the button
CallMeOrange
@EgnaroDev
Aug 10 2017 02:30 UTC
@gothamknight There was a div element with no closing
with a class message
jamesjd54
@jamesjd54
Aug 10 2017 02:30 UTC
ok removed that
CallMeOrange
@EgnaroDev
Aug 10 2017 02:30 UTC
@jamesjd54 <div class="btn1 message"> missing </div>
jamesjd54
@jamesjd54
Aug 10 2017 02:30 UTC
just made a few overall changes. does htis look better?
the button doesnt disapear now it just gets moved way down
CallMeOrange
@EgnaroDev
Aug 10 2017 02:31 UTC
Yeah because of quote's space/size whatever it is called
@jamesjd54 $(".message").html(JSON.stringify(json));
JSON.stringify(json) give you an object from json
You should change it back
jamesjd54
@jamesjd54
Aug 10 2017 02:32 UTC
ok to what it originally was?
CallMeOrange
@EgnaroDev
Aug 10 2017 02:32 UTC
Yep
iso
@iso1048
Aug 10 2017 02:32 UTC
@EgnaroDev yeah my bad.
@EgnaroDev but before there was a 'message' class for two divs
CallMeOrange
@EgnaroDev
Aug 10 2017 02:33 UTC
Yea, @jamesjd54 removed it
jamesjd54
@jamesjd54
Aug 10 2017 02:33 UTC
so now when i clik the button nothing happens
CallMeOrange
@EgnaroDev
Aug 10 2017 02:33 UTC
@jamesjd54 Two $.getJSON
Use one with a in it
perhaps the one with json would be better
jamesjd54
@jamesjd54
Aug 10 2017 02:35 UTC
ok i removed one
CallMeOrange
@EgnaroDev
Aug 10 2017 02:36 UTC
@jamesjd54 a is not defined, use json instead
You name it whatever you want
jamesjd54
@jamesjd54
Aug 10 2017 02:36 UTC
so what am i calling with whatever i change that a to?
CallMeOrange
@EgnaroDev
Aug 10 2017 02:37 UTC
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(blahblahblah) {

  $(".message").append(blahblahblah[0].content + "<p>— " + blahblahblah[0].title + "</p>")
});
jamesjd54
@jamesjd54
Aug 10 2017 02:38 UTC
alright! thank you so much man this is making so much more sense
CallMeOrange
@EgnaroDev
Aug 10 2017 02:38 UTC
You are welcome :)
jamesjd54
@jamesjd54
Aug 10 2017 02:39 UTC
i have the button staying and adding a quote every time i click it
so it hink im gunna mess around for a while and try to figure some stuff out on my own now
CallMeOrange
@EgnaroDev
Aug 10 2017 02:39 UTC
@jamesjd54 Do you know what .append() does?
^ hint
jamesjd54
@jamesjd54
Aug 10 2017 02:40 UTC
i remember the name but ill look that up
jamesjd54
@jamesjd54
Aug 10 2017 02:48 UTC
@EgnaroDev , one more question
CallMeOrange
@EgnaroDev
Aug 10 2017 02:48 UTC
Sure
jamesjd54
@jamesjd54
Aug 10 2017 02:49 UTC
so I get the same quote every time. is there any way to see every quote stored in the api im using?
CallMeOrange
@EgnaroDev
Aug 10 2017 02:49 UTC
Hm... I don't think so, unless you change the page numbers
jamesjd54
@jamesjd54
Aug 10 2017 02:50 UTC
is that like the [0]?
CallMeOrange
@EgnaroDev
Aug 10 2017 02:50 UTC
[posts_per_page]=1
1 object
Try changing it to 5 then check out the url
jamesjd54
@jamesjd54
Aug 10 2017 02:51 UTC
ok so i changed it to 5 and i get a different quote now
CallMeOrange
@EgnaroDev
Aug 10 2017 02:51 UTC
Good but thats not what I mean, ignoring adding quote to html for now
jamesjd54
@jamesjd54
Aug 10 2017 02:52 UTC
so for this to be a random generator i need to make it so where that was a 5 is just a random number?
CallMeOrange
@EgnaroDev
Aug 10 2017 02:52 UTC
try to log data
console.log(data or your parameter ) or use url in address bar
Jim Tryon
@jimtryon
Aug 10 2017 03:12 UTC
this is what I have for my front end on my project, give you an idea of my approach
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>
<div class="container yellow">    
<div class="row">
        <div class="col">
            <div class="row1 a1" ></div>
            <div class="row1 a2"></div>
            <div class="row1 a3"></div>
            <div class="row1 a4"></div>
            <div class="row1 a5"></div>
            <div class="row1 a6"></div>
        </div>
    </div>
</div>
    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>
Long Nguyen
@longnt80
Aug 10 2017 03:13 UTC
@jimtryon the reach four game ?
Jim Tryon
@jimtryon
Aug 10 2017 03:13 UTC
connect four game
Long Nguyen
@longnt80
Aug 10 2017 03:14 UTC
you mean approach for the layout?
I guess just make 7 columns and 6 rows
Jim Tryon
@jimtryon
Aug 10 2017 03:15 UTC
yeah, that is what I’m thinking but I’m also running into the problem that bootstrap is a 12 column grid
Long Nguyen
@longnt80
Aug 10 2017 03:15 UTC
i see
don't use bootstrap then
it's not for this game
So how do I have the two sections take up 50% each of the page
I'd like to have to not scroll and the sizing be consistent on mobile and desktop
Long Nguyen
@longnt80
Aug 10 2017 03:30 UTC
@taiJones00 use vh like this:
#sectionOne
{
  background-color: #428bca;
  padding: 125px 125px;
  height: 50vh;
}
#sectionTwo
{
  background-color: #3071a9;
  padding: 125px 125px;
  height: 50vh;
}
Tai Jones
@taiJones00
Aug 10 2017 03:31 UTC
whoa what's this weird vh unit
Long Nguyen
@longnt80
Aug 10 2017 03:31 UTC
vh is viewport height
so it divide the viewport to 100 units
50vh means 50 units
Tai Jones
@taiJones00
Aug 10 2017 03:32 UTC
that is so cool
Long Nguyen
@longnt80
Aug 10 2017 03:32 UTC
for the width, it would be viewport width -> vw
Tai Jones
@taiJones00
Aug 10 2017 03:32 UTC
why did i have no idea this unit existed
WHAT?!
Long Nguyen
@longnt80
Aug 10 2017 03:32 UTC
@taiJones00 here's all the units: https://www.w3schools.com/cssref/css_units.asp
Tai Jones
@taiJones00
Aug 10 2017 03:32 UTC

blessed

thx

Long Nguyen
@longnt80
Aug 10 2017 03:33 UTC
but mostly px, em, rem, and % are used
@taiJones00
Gulsvi
@gulsvi
Aug 10 2017 03:33 UTC
@junipberry Sorry, stepped away. If you still need help, I'm back now.
Tai Jones
@taiJones00
Aug 10 2017 03:33 UTC
one more thing @longnt80
Gulsvi
@gulsvi
Aug 10 2017 03:33 UTC
@Pagnito Same with you - I'm baaaaaaaaaaaack
Tai Jones
@taiJones00
Aug 10 2017 03:33 UTC
what's with the weird white space at the top. I don't want that
Long Nguyen
@longnt80
Aug 10 2017 03:34 UTC
what whitespace?
Pagnito
@Pagnito
Aug 10 2017 03:34 UTC
@SkyC0der wooooooooorrrrd welcome back
Tai Jones
@taiJones00
Aug 10 2017 03:34 UTC
right above the first section
Gulsvi
@gulsvi
Aug 10 2017 03:34 UTC
waaazzzzaaaap :p
Long Nguyen
@longnt80
Aug 10 2017 03:35 UTC
@taiJones00 I see, that's the margin of the h1 tag
Pagnito
@Pagnito
Aug 10 2017 03:35 UTC
image.png
Tai Jones
@taiJones00
Aug 10 2017 03:35 UTC
oh gotcha
thanks bud @longnt80
CamperBot
@camperbot
Aug 10 2017 03:36 UTC
taijones00 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 491 | @longnt80 |http://www.freecodecamp.com/longnt80
Gulsvi
@gulsvi
Aug 10 2017 03:36 UTC
lol @Pagnito my girlfriend introduced me to the original for that the other day. old budweiser commercial
Pagnito
@Pagnito
Aug 10 2017 03:36 UTC
@SkyC0der they made a commecrial out of it?
Gulsvi
@gulsvi
Aug 10 2017 03:36 UTC
The movie copied the commercial
Long Nguyen
@longnt80
Aug 10 2017 03:37 UTC
@taiJones00 np
Pagnito
@Pagnito
Aug 10 2017 03:37 UTC
ooooh shit
never knew that
Jim Tryon
@jimtryon
Aug 10 2017 03:37 UTC
Screen Shot 2017-08-09 at 8.37.02 PM.png
^^ The original @Pagnito
Tai Jones
@taiJones00
Aug 10 2017 03:37 UTC
@longnt80 Hey man last design related question. Do you know how I can center the content inside each section
Like with the button and the text
not like horizontally center but vertically
Jim Tryon
@jimtryon
Aug 10 2017 03:38 UTC
That is the design I’m going for
Pagnito
@Pagnito
Aug 10 2017 03:38 UTC
@SkyC0der i see, cant believe i never saw that commercial
@SkyC0der hey did u notice how on youtube, if u click a video the whole page rerenders?
Gulsvi
@gulsvi
Aug 10 2017 03:39 UTC
lol, I just saw it the other day too
Long Nguyen
@longnt80
Aug 10 2017 03:39 UTC
@taiJones00 let me see, you might want to put the h1 and h3 into one div and align that div
Gulsvi
@gulsvi
Aug 10 2017 03:39 UTC
@Pagnito The navbar doesn't change, just the content beneath it
But yeah, the sidebar and the video do change
Pagnito
@Pagnito
Aug 10 2017 03:40 UTC
ooooh yea true, cuz for every video they show diffirent related videos
Gulsvi
@gulsvi
Aug 10 2017 03:40 UTC
I think they like to update recommendations with every click
Pagnito
@Pagnito
Aug 10 2017 03:40 UTC
makes sense
Gulsvi
@gulsvi
Aug 10 2017 03:40 UTC
Now I'm going to have budweiser recos for days lol
Pagnito
@Pagnito
Aug 10 2017 03:40 UTC
lol
Long Nguyen
@longnt80
Aug 10 2017 03:42 UTC
@taiJones00 here's an example https://codepen.io/longnt80/pen/VzbNVL
@jimtryon that looks fine
Tai Jones
@taiJones00
Aug 10 2017 03:44 UTC
i should review css positioning
Long Nguyen
@longnt80
Aug 10 2017 03:44 UTC
@taiJones00 well of course
Gulsvi
@gulsvi
Aug 10 2017 03:46 UTC
@Pagnito You creating a youtube clone?
Pagnito
@Pagnito
Aug 10 2017 03:47 UTC
@SkyC0der yea a mini one for a course im going thru for react and redux
Gulsvi
@gulsvi
Aug 10 2017 03:47 UTC
Nice :)
Pagnito
@Pagnito
Aug 10 2017 03:48 UTC
tho it wasnt much, i used the guys boiler plate and all i did was make the create a list of videos and the video iframe and searchbar
but it was def much better to help me understand props and state
Gulsvi
@gulsvi
Aug 10 2017 03:49 UTC
But you did it all with React + Redux
Pagnito
@Pagnito
Aug 10 2017 03:49 UTC
havent used redux yet
Gulsvi
@gulsvi
Aug 10 2017 03:49 UTC
Redux is for state management?
Pagnito
@Pagnito
Aug 10 2017 03:49 UTC
gonna be doing a tinder clonse and using redux then
yea it is
but there is state in react too
Gulsvi
@gulsvi
Aug 10 2017 03:49 UTC
Hmmm, I don't know much about it yet
Pagnito
@Pagnito
Aug 10 2017 03:49 UTC
with the class components
Gulsvi
@gulsvi
Aug 10 2017 03:50 UTC
I see this.state all the time in react apps
Pagnito
@Pagnito
Aug 10 2017 03:50 UTC
yea thats it
Gulsvi
@gulsvi
Aug 10 2017 03:50 UTC
this.props
etc
Pagnito
@Pagnito
Aug 10 2017 03:50 UTC
yea shit is mad confusing at first lol
Gulsvi
@gulsvi
Aug 10 2017 03:50 UTC
but redux works with non-react apps too?
Pagnito
@Pagnito
Aug 10 2017 03:50 UTC
yea
redux is a compltely seperate framework
Gulsvi
@gulsvi
Aug 10 2017 03:50 UTC
hmmm
Pagnito
@Pagnito
Aug 10 2017 03:50 UTC
to make react and redux work together
u have to install a diffirent package called redux-react or react-redux
Gulsvi
@gulsvi
Aug 10 2017 03:51 UTC
Is that flux when they're both combined? Or is flux react's state management layer?
Pagnito
@Pagnito
Aug 10 2017 03:51 UTC
i dunno, the guy mentioned flux during the course and that its similar, but he says its diffirent
Gulsvi
@gulsvi
Aug 10 2017 03:52 UTC
interesting
Pagnito
@Pagnito
Aug 10 2017 03:53 UTC
yea sometimes i wonder how long its gonna take me to a point where i can work with all those frameworks just form memory
Gulsvi
@gulsvi
Aug 10 2017 03:53 UTC
probably about as long as it takes for them to get replaced by something better :p
Pagnito
@Pagnito
Aug 10 2017 03:53 UTC
lmao
Gulsvi
@gulsvi
Aug 10 2017 03:53 UTC
Going to be interesting to take a year off
Pagnito
@Pagnito
Aug 10 2017 03:53 UTC
encouraging
lol
O.o
Gulsvi
@gulsvi
Aug 10 2017 03:53 UTC
constantly evolving tech
Pagnito
@Pagnito
Aug 10 2017 03:54 UTC
forreal taking a year off is like going to prison for ten years for a regular person, come and see cellphones, like wtf is this
NabeelahSaib
@NabeelahSaib
Aug 10 2017 03:54 UTC
i have noticed that when i add a class to a link element, the email client changes the class to x_classname. Can anyone tell me why or how this can be changed to force my own html class
Gulsvi
@gulsvi
Aug 10 2017 03:54 UTC
lol, true @Pagnito
Jim Tryon
@jimtryon
Aug 10 2017 03:54 UTC
What is this error? Access to Script at 'file:///Users/jtryon/projects/connect-four/js/bootstrap.min.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.
Gulsvi
@gulsvi
Aug 10 2017 03:55 UTC
@jimtryon It means you should be accessing it via http://localhost
(rather than file:///)
Jim Tryon
@jimtryon
Aug 10 2017 03:56 UTC
oh, so I would have to run it on a webserver
Gulsvi
@gulsvi
Aug 10 2017 03:56 UTC
Yeah
Jim Tryon
@jimtryon
Aug 10 2017 03:57 UTC
what if I want to bypass it to run it on localhost?
Gulsvi
@gulsvi
Aug 10 2017 03:57 UTC
Or, perhaps it would work with a HTML Preview plugin in whatever editor you are using
Jim Tryon
@jimtryon
Aug 10 2017 03:57 UTC
I’m using VS Code
Gulsvi
@gulsvi
Aug 10 2017 03:57 UTC
What functionality do you need from bootstrap.js? Maybe you can remove it?
Long Nguyen
@longnt80
Aug 10 2017 03:58 UTC
but you don't need to run a webserver just to run the script, right?
Gulsvi
@gulsvi
Aug 10 2017 03:58 UTC
Maybe security restrictions on the computer - lots of people have trouble running scripts from their file systems
web servers and HTML previewers sandbox the code
makes it safer
Jim Tryon
@jimtryon
Aug 10 2017 03:59 UTC
I could probably remove it for now
Luke Miller
@dalumiller
Aug 10 2017 04:34 UTC
Hey, I'm working on the javascript calculator project and trying to build the calculator out of svg. I've never worked with SVG though, and am wondering if anyone knows if, and how, to stack svg images. Thanks!
using codepen
Nevermind, got the answer
Long Nguyen
@longnt80
Aug 10 2017 04:39 UTC
@dalumiller do you mind sharing the answer?
Luke Miller
@dalumiller
Aug 10 2017 04:40 UTC
@longnt80 you just set all the shapes within the same svg element
Martialis39
@Martialis39
Aug 10 2017 04:42 UTC
@moigithub Thank you sir! A life saver
CamperBot
@camperbot
Aug 10 2017 04:42 UTC
martialis39 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3576 | @moigithub |http://www.freecodecamp.com/moigithub
Long Nguyen
@longnt80
Aug 10 2017 04:42 UTC
@dalumiller when you're done with it, can you share the code?
Luke Miller
@dalumiller
Aug 10 2017 04:52 UTC

@longnt80 Won't be done for a few days, but basically in your html once you've made a <svg> tag and specified it's width and height, then you just add each shape you want within that svg. So something like,

<svg width="500" height="500">
<rect..../>
<circle..../>
<whatever other shapes you want/>
</svg>

Long Nguyen
@longnt80
Aug 10 2017 04:54 UTC
@dalumiller so you're gonna draw every shapes with code?
Luke Miller
@dalumiller
Aug 10 2017 04:54 UTC
@longnt80 I think so. It'll be fun and good practice to learn SVG
@longnt80 Have you finished this project already?
Long Nguyen
@longnt80
Aug 10 2017 04:55 UTC
@dalumiller yes but I didn't use svg
Luke Miller
@dalumiller
Aug 10 2017 04:55 UTC
How'd you do it?
Long Nguyen
@longnt80
Aug 10 2017 04:56 UTC
just use regular divs and buttons
Luke Miller
@dalumiller
Aug 10 2017 04:56 UTC
@longnt80 Cool. Where are you now in the curriculum?
Long Nguyen
@longnt80
Aug 10 2017 04:56 UTC
I finished the front end cert last week
Luke Miller
@dalumiller
Aug 10 2017 04:57 UTC
Nice! Congrats. I'm hoping to get mine done in the next few weeks
You planning on continuing on with more certs? You doing this to get a job as a developer?
Long Nguyen
@longnt80
Aug 10 2017 04:57 UTC
it took me an average of one week for each project
except for the last project, Simon Game which took me 1 month
I'm planning to find a front end job which was my goal from the start
Luke Miller
@dalumiller
Aug 10 2017 05:01 UTC
@longnt80 Cool, well good luck with the job hunt!
Long Nguyen
@longnt80
Aug 10 2017 05:02 UTC
@dalumiller thanks
CamperBot
@camperbot
Aug 10 2017 05:02 UTC
longnt80 sends brownie points to @dalumiller :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @dalumiller |http://www.freecodecamp.com/dalumiller
Long Nguyen
@longnt80
Aug 10 2017 05:03 UTC
@dalumiller what is your goal? full stack or front end? backend?
Luke Miller
@dalumiller
Aug 10 2017 05:03 UTC
Not sure yet, definitely one of those three! haha
I've got a career already going now, so this is a transition for me. I'm just going into it having fun and seeing what doors open. I don't think I'd be hirable with only the front-end cert though, so I plan on doing more of the certs, and the odinproject
Long Nguyen
@longnt80
Aug 10 2017 05:05 UTC
@dalumiller I see, it is a transition for me too
Luke Miller
@dalumiller
Aug 10 2017 05:06 UTC
what do you currently do?
Long Nguyen
@longnt80
Aug 10 2017 05:10 UTC
I'm a designer
how could I keep the navbar fixed and when I scroll have all the cards scroll behind the navbar
Martialis39
@Martialis39
Aug 10 2017 05:21 UTC
Hi again!
I came to you for help with XMLHttpRequest
I need your help again
can anyone tell me why I cant search multiple times in my pen here
first time it works, the second time it comes back with blank
Tai Jones
@taiJones00
Aug 10 2017 05:22 UTC
but that breaks the navbar for some reason @dalumiller
fdemaa
@fdemaa
Aug 10 2017 05:37 UTC
@Martialis39 what do you mean im seraching lots of times lol
Martialis39
@Martialis39
Aug 10 2017 05:37 UTC
I mean when you search once
fdemaa
@fdemaa
Aug 10 2017 05:37 UTC
ok never mind
i cant
Martialis39
@Martialis39
Aug 10 2017 05:37 UTC
its ok, if you search again, it returns nothing : )
Long Nguyen
@longnt80
Aug 10 2017 05:39 UTC
@Martialis39 maybe because of this: && e.target.value != ''
Martialis39
@Martialis39
Aug 10 2017 05:44 UTC
@longnt80 hmm
fraid not
also it does the strangest thing
if I search "Hello", I get what I would expected
if I then search for "Lima", instead of the capital of Peru I get the album "Hello Lima"
Long Nguyen
@longnt80
Aug 10 2017 05:49 UTC
@Martialis39 I see
Tai Jones
@taiJones00
Aug 10 2017 05:50 UTC
http://quotesondesign.com/api-v4-0/ I'm not sure what any of this means
I've pasted the examples in my code but nothing happens
Long Nguyen
@longnt80
Aug 10 2017 05:52 UTC
@taiJones00 give me the codepen
I tried multiple ways to put the javascript in and this is the latest way
The other two ways were pasting the example and something else similar
Long Nguyen
@longnt80
Aug 10 2017 05:53 UTC
@taiJones00 open the browser's console, you'll see this error:
Mixed Content: The page at 'https://codepen.io/taiJones00/pen/xLqemx?editors=0010' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback='. This request has been blocked; the content must be served over HTTPS.
Tai Jones
@taiJones00
Aug 10 2017 05:53 UTC
but this api says to install the latest version of wordpress because it's a wordpress JSON REST api
so maybe I should
hm?
Long Nguyen
@longnt80
Aug 10 2017 05:54 UTC
@taiJones00 so just change the url to "https://quotesondesign.com/....
http with s
Tai Jones
@taiJones00
Aug 10 2017 05:54 UTC
oh no way
ahhhh
we're closer
just have to filter
Tai Jones
@taiJones00
Aug 10 2017 06:01 UTC
okay so we're getting a lot of key value pairs. How could I just get a value instead of all this stuff printed out
Martialis39
@Martialis39
Aug 10 2017 06:09 UTC
@taiJones00 where are you getting the key value pairs?
Tai Jones
@taiJones00
Aug 10 2017 06:11 UTC
it was eariler but now i've almost got it
Martialis39
@Martialis39
Aug 10 2017 06:11 UTC
Excellent! Good job
Tai Jones
@taiJones00
Aug 10 2017 06:12 UTC
Yes thank you but there's one thing. I have one quote that i'm getting but it's being displayed all weird when I click the button
Martialis39
@Martialis39
Aug 10 2017 06:12 UTC
@taiJones00 how do you mean all weird?
oh
with the newline character?
Tai Jones
@taiJones00
Aug 10 2017 06:12 UTC
Yeah i don't know what
why
Yeah I don't get it
[0]["title"] If I take this out I get all the key value pairs at once
But doing it this way and having that result makes me think that wasn't the way to do it
Martialis39
@Martialis39
Aug 10 2017 06:14 UTC
@taiJones00 Im afraid I cant make any changes to the code for some reason
what do you get when you just console log json
after the click?
Tai Jones
@taiJones00
Aug 10 2017 06:15 UTC
Only one quote and the /n. It's not even multiple quotes so maybe this is the wrong way to type the code
Long Nguyen
@longnt80
Aug 10 2017 06:16 UTC
Tai Jones
@taiJones00
Aug 10 2017 06:16 UTC
whoa this is cool how'd you find this page
Long Nguyen
@longnt80
Aug 10 2017 06:16 UTC
it's the url you use
Tai Jones
@taiJones00
Aug 10 2017 06:16 UTC
ah
do you know why the quotes aren't coming out as random
Long Nguyen
@longnt80
Aug 10 2017 06:18 UTC
@taiJones00 it's already random
go to that page and hit refresh, you'll see a different quote everytime
Tai Jones
@taiJones00
Aug 10 2017 06:19 UTC
yes but on my pen it's the same quote every time if you click the button
i'm new to this. Could I combine the jquery with a for loop in javascript to cycle between IDs from the api
Long Nguyen
@longnt80
Aug 10 2017 06:23 UTC
@taiJones00 let me see
oh okay. It looks like the quote is only different when I view on my phone
Don't know why but thought that might be something useful to know
Tai Jones
@taiJones00
Aug 10 2017 06:28 UTC
not like different every time I click the button just different than the quote on this computer
Long Nguyen
@longnt80
Aug 10 2017 06:29 UTC
@taiJones00 yeah, it doesn't load a new quote
Tai Jones
@taiJones00
Aug 10 2017 06:29 UTC
json[0]["title"]
I used this to display a quote to the screen
Long Nguyen
@longnt80
Aug 10 2017 06:30 UTC
maybe increase the post-per-page then pick a random from there
Tai Jones
@taiJones00
Aug 10 2017 06:30 UTC
Was that the right way?
increase the post-per-page?
Long Nguyen
@longnt80
Aug 10 2017 06:30 UTC
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=
here: [posts_per_page]=1
Tai Jones
@taiJones00
Aug 10 2017 06:31 UTC
ohhhhh
You got it!
but
it's being displayed all weird
and that new line character
what's the deal
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
Maybe it has to do with this css. The h1 isn't being sized down relative to the quote
it's staying within this little box
Long Nguyen
@longnt80
Aug 10 2017 06:33 UTC
because you have more than 1 quote now
Tai Jones
@taiJones00
Aug 10 2017 06:36 UTC
The \n is literally in the content of each ID from the url. I don't know if there's any way to exclude that
Long Nguyen
@longnt80
Aug 10 2017 06:36 UTC
@taiJones00 use replace()
Tai Jones
@taiJones00
Aug 10 2017 06:37 UTC
oh this is so cool i'm using what I learned
Tai Jones
@taiJones00
Aug 10 2017 06:39 UTC
yeah that's not working
can you send the link again
$("#quote-title").html(JSON.stringify(json[0]["title"].replace(\n, ""))); also if I use replace it says unexpected identifier
Long Nguyen
@longnt80
Aug 10 2017 06:41 UTC
@taiJones00 oh
teevik
@teevik
Aug 10 2017 06:51 UTC
Don't think you need JSON.stringify
In fact, i think removing it fixes it
Tai Jones
@taiJones00
Aug 10 2017 06:54 UTC
stringify(json[0]["content"]) <- Get rid of all that? @teevik
teevik
@teevik
Aug 10 2017 06:54 UTC
The stringify function
Not the rest
Tai Jones
@taiJones00
Aug 10 2017 06:54 UTC
what do you mean
Long Nguyen
@longnt80
Aug 10 2017 06:54 UTC
@taiJones00 https://codepen.io/longnt80/pen/wqdVJz?editors=0011
here's I use replace to remove \n
teevik
@teevik
Aug 10 2017 06:56 UTC
The \n comes from the JSON.stringify
It seems
Tai Jones
@taiJones00
Aug 10 2017 06:58 UTC
I wonder why it did that
thank you you two @teevik @longnt80
CamperBot
@camperbot
Aug 10 2017 06:58 UTC
taijones00 sends brownie points to @teevik and @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 224 | @teevik |http://www.freecodecamp.com/teevik
:cookie: 494 | @longnt80 |http://www.freecodecamp.com/longnt80
Tai Jones
@taiJones00
Aug 10 2017 06:59 UTC
but here's the thing
the content is going outside of the div
like the div isn't stretching to contain all the new text that's filling it
Long Nguyen
@longnt80
Aug 10 2017 07:00 UTC
@taiJones00 because your div section is having a fixed height
50% of the viewport
so it won't stretch
Tai Jones
@taiJones00
Aug 10 2017 07:00 UTC
man. It looked good this way
I guess that's only good for static text
Long Nguyen
@longnt80
Aug 10 2017 07:00 UTC
yeah
so maybe change the design
Tai Jones
@taiJones00
Aug 10 2017 07:02 UTC
something black and white where whitespace isn't realized?
Long Nguyen
@longnt80
Aug 10 2017 07:02 UTC
no you still have border but you'll need to scroll when the quote is large
scrolling is the answer
even you don't like it
Tai Jones
@taiJones00
Aug 10 2017 07:03 UTC
but what if I use a text-size property and set that to 80% so it's always 80 percent the size of the container
:^(
Long Nguyen
@longnt80
Aug 10 2017 07:03 UTC
I don't think that woould work
because text size is relative to text size
not relative to container's width or height
Tai Jones
@taiJones00
Aug 10 2017 07:04 UTC
I changed it to pixels
would percents work better. The text is still overflowing
Long Nguyen
@longnt80
Aug 10 2017 07:04 UTC
no, you won't do anything with text size
because you can't predict how many words there are in a quote
another option is maybe try to count the number of words before display it
if there are too many words in a quote, you skip that quote and load another?
Tai Jones
@taiJones00
Aug 10 2017 07:06 UTC
that could work but having the click me button on the side sounds best for avoiding scrolling on really small devices
wait wait wait
this design looks good so maybe theres a way to scroll but only inside sectionOne @longnt80
Fernando
@lestairon
Aug 10 2017 07:11 UTC
Hi, i wonder what can i make to fix this
When i change the size of my window my buttons start to move
https://codepen.io/Lestairon/pen/JJVRVx
Thayyeb salim
@Thayyebsalim
Aug 10 2017 07:13 UTC
Do you have previous knowledge of JS?
Fernando
@lestairon
Aug 10 2017 07:13 UTC
No
Thayyeb salim
@Thayyebsalim
Aug 10 2017 07:15 UTC
So you copied the JS? @lestairon
It's ok that happens
Fernando
@lestairon
Aug 10 2017 07:18 UTC
Yeah, i was stucked on the code before, i was using if/else statement to do it
Tai Jones
@taiJones00
Aug 10 2017 07:18 UTC
@lestairon So how did you know that stringify was messing everything up
Thayyeb salim
@Thayyebsalim
Aug 10 2017 07:19 UTC
There is no need of using JS in that project
I loved your first pen
Make something simple and unique
That is what a project should be :D
Long Nguyen
@longnt80
Aug 10 2017 07:20 UTC
@taiJones00 http://quotesondesign.com/wp-json/posts
the original result already have \n
Fernando
@lestairon
Aug 10 2017 07:22 UTC
@Thayyebsalim I know, but i tried to make it like automatic haha
To give each section some class and don't do it manually, i thought it was a good idea
@taiJones00 Stringify?
Tai Jones
@taiJones00
Aug 10 2017 07:24 UTC
Maybe that was someone else?
Can't see usernames on mobile
Maybe if I look up what stringify actually does I'll be less confused
Thayyeb salim
@Thayyebsalim
Aug 10 2017 07:27 UTC
Stringify make a variable content into a string
with double quotes
And the problem that it presently has is the float right and the negative margin top value
Tai Jones
@taiJones00
Aug 10 2017 07:30 UTC
Any idea why the random quote generator button only works once on mobile
Thayyeb salim
@Thayyebsalim
Aug 10 2017 07:32 UTC
It's just working once for me
Tai Jones
@taiJones00
Aug 10 2017 07:33 UTC
Why do you think only once?
Thayyeb salim
@Thayyebsalim
Aug 10 2017 07:33 UTC
I'm not thinking
image.png
Fernando
@lestairon
Aug 10 2017 07:34 UTC
It's working once for me too
@Thayyebsalim I fixed it changing the height of the header and the margin of the buttons, but i know it's a bad way to fix it
Thayyeb salim
@Thayyebsalim
Aug 10 2017 07:35 UTC
just use bootstrap :D
Fernando
@lestairon
Aug 10 2017 07:39 UTC
One problem i had before was that my buttons were stacking vertically using bootstrap
Thayyeb salim
@Thayyebsalim
Aug 10 2017 07:40 UTC
You might have not been using it properly
The idea is to change inline into block
Fernando
@lestairon
Aug 10 2017 07:40 UTC
Yeah, maybe was something to do with my css
Thayyeb salim
@Thayyebsalim
Aug 10 2017 07:40 UTC
Yeah
try putting in bootstrap
or give the <a> elts inline block and use media queries to make it block
Tai Jones
@taiJones00
Aug 10 2017 07:41 UTC
Awe this is so quote my project is the basis for conversation
Fernando
@lestairon
Aug 10 2017 07:49 UTC
image.png
I think something else should happen
Long Nguyen
@longnt80
Aug 10 2017 07:51 UTC
@taiJones00 check it out, I just redid my quote machine: https://codepen.io/longnt80/full/GmjpGB/
Fernando
@lestairon
Aug 10 2017 07:52 UTC
Only works using Bootstrap 3
iso
@iso1048
Aug 10 2017 07:58 UTC
@longnt80 the quote doesnt change
Marius Nicolae
@bytao7mao
Aug 10 2017 07:58 UTC
Anyone with some JAVA knowledge?
Long Nguyen
@longnt80
Aug 10 2017 07:58 UTC
@gothamknight sorry I was editing it
changing something
Fernando
@lestairon
Aug 10 2017 07:58 UTC
@gothamknight For me is working
iso
@iso1048
Aug 10 2017 07:58 UTC
@longnt80 yeah working now bro
nice clean design
Marius Nicolae
@bytao7mao
Aug 10 2017 07:59 UTC
ANyone here with some JAVA knowledge?
iso
@iso1048
Aug 10 2017 07:59 UTC
@longnt80 have you started the back-end challenges now?
Marius Nicolae
@bytao7mao
Aug 10 2017 07:59 UTC
public static int[] sortArray(int[] nonSortedArray) {
        int[] sortedArray = new int[nonSortedArray.length];
        int temp;
        for (int j = 0; j < nonSortedArray.length - 1; j++)  {// added this for loop, think about logic why do we have to add this to make it work

        for (int i = 0; i < nonSortedArray.length - 1; i++) {
            if (nonSortedArray[i] > nonSortedArray[i + 1]) {
                temp = nonSortedArray[i];
                nonSortedArray[i] = nonSortedArray[i + 1];
                nonSortedArray[i + 1] = temp;
                sortedArray = nonSortedArray;

            }
          }
        }
        return sortedArray;
    }
}
Long Nguyen
@longnt80
Aug 10 2017 07:59 UTC
@gothamknight no, not yet
Marius Nicolae
@bytao7mao
Aug 10 2017 07:59 UTC
how do i call this function
Jim Tryon
@jimtryon
Aug 10 2017 08:00 UTC
The name of the function is sortArray and you pass it an integer array
so like sortArray(['1', '6', '8', '2']);
Marius Nicolae
@bytao7mao
Aug 10 2017 08:02 UTC
it's giving me an error: insert enum body
iso
@iso1048
Aug 10 2017 08:02 UTC
@longnt80 learning more front-end?
Marius Nicolae
@bytao7mao
Aug 10 2017 08:02 UTC
or enum identifier
Long Nguyen
@longnt80
Aug 10 2017 08:03 UTC
@gothamknight yeah, I'm trying to build more front end project and learning about node, git
Marius Nicolae
@bytao7mao
Aug 10 2017 08:04 UTC
and it says to put the array into {} instead of []
Long Nguyen
@longnt80
Aug 10 2017 08:04 UTC
@gothamknight then start with one of the framework (React or Angular)
iso
@iso1048
Aug 10 2017 08:05 UTC
@longnt80 I thought you were already using react in some of your advanced front-end projects
@longnt80 what are node, react and angular specialised for anyway?
Long Nguyen
@longnt80
Aug 10 2017 08:06 UTC
@gothamknight no, they're not required
@gothamknight react and angular are for building web app, faster than using regular js
node is for setting up web server and using many of the node packages as tools for development
iso
@iso1048
Aug 10 2017 08:08 UTC
@longnt80 so does node deal more with data, or not necessarily?
Long Nguyen
@longnt80
Aug 10 2017 08:08 UTC
right now I just starting to use node packages such as gulp to help with my workflow
@gothamknight I haven't touch the server aspect of node yet
only use node packages
@gothamknight they're like a set of tools that help you to do your job easier and faster
iso
@iso1048
Aug 10 2017 08:11 UTC
@longnt80 i see.
Long Nguyen
@longnt80
Aug 10 2017 08:12 UTC
@gothamknight do you know sass?
iso
@iso1048
Aug 10 2017 08:13 UTC
@longnt80 i did the course on codecademy but I never used it after that, so I forgot it haha. Do you use it often?
Long Nguyen
@longnt80
Aug 10 2017 08:14 UTC
yes, I use it all the time
iso
@iso1048
Aug 10 2017 08:15 UTC
@longnt80 yeah will redo the course at some stage. Does compiling the sass into css require much running time?
Jim Tryon
@jimtryon
Aug 10 2017 08:15 UTC
Can you see why my rows/columns are off?
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container yellow">
        <div class="row">
            <div class="col-lg-1">
            </div>
            <div class="col-lg-10">
                <div class="row">
                    <div class="col-lg-2 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
                <div class="row">
                    <div class="col-lg-2 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
                <div class="row">
                    <div class="col-lg-2 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
                <div class="row">
                    <div class="col-lg-2 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
                <div class="row">
                    <div class="col-lg-2 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
                <div class="row">
                    <div class="col-lg-2 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
                <div class="row">
                    <div class="col-lg-2 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
            </div>
            <div class="col-lg-1">
            </div>
        </div>
    </div>
</body>

</html>
Screen Shot 2017-08-10 at 1.07.24 AM.png
Long Nguyen
@longnt80
Aug 10 2017 08:16 UTC
@gothamknight no, you won't notice anything, unless you have a massive css file
@jimtryon can you put it on codepen?
iso
@iso1048
Aug 10 2017 08:18 UTC
@longnt80 cool.
Jim Tryon
@jimtryon
Aug 10 2017 08:20 UTC
@longnt80 Yeah
Fernando
@lestairon
Aug 10 2017 08:31 UTC
https://codepen.io/Lestairon/pen/JJVRVx
I swear i don't know what's wrong
The button is not working :worried:
iso
@iso1048
Aug 10 2017 08:43 UTC
@lestairon which button?
Fernando
@lestairon
Aug 10 2017 08:43 UTC
Lmao, what happened
iso
@iso1048
Aug 10 2017 08:44 UTC
?
Fernando
@lestairon
Aug 10 2017 08:44 UTC
There's no button
Jim Tryon
@jimtryon
Aug 10 2017 08:47 UTC
I’m trying to get 7 columns and 6 rows
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container yellow">
        <div class="row">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-lg-5 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
                <div class="row">
                    <div class="col-lg-5 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
                <div class="row">
                    <div class="col-lg-5 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
                <div class="row">
                    <div class="col-lg-5 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
                <div class="row">
                    <div class="col-lg-5 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
                <div class="row">
                    <div class="col-lg-5 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
                <div class="row">
                    <div class="col-lg-5 red-circle "></div>
                    <div class="col-lg-2 red-circle"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
Jim Tryon
@jimtryon
Aug 10 2017 09:25 UTC
How can I get a circle in BS4? border-radius: 50%
Sorin Ruse
@sorinr
Aug 10 2017 09:27 UTC
@jimtryon you mean each of the 6 rows to have 7 columns or do you need only one row containing 7 columns?
Jim Tryon
@jimtryon
Aug 10 2017 09:27 UTC
I got that part of the code working
I want those to look more like circles and not ovals
Sorin Ruse
@sorinr
Aug 10 2017 09:28 UTC
@jimtryon yes, border radius will give you a circle if height=width
@jimtryon i mean radius of 50%
Jim Tryon
@jimtryon
Aug 10 2017 09:29 UTC
I did radius 50%
but it is still not a circle, more like an oval
Sorin Ruse
@sorinr
Aug 10 2017 09:29 UTC
do the element have the same width and height?
Jim Tryon
@jimtryon
Aug 10 2017 09:31 UTC
50px
Sorin Ruse
@sorinr
Aug 10 2017 09:32 UTC
@jimtryon try removing the class .col-1 and see whats happening
Fernando
@lestairon
Aug 10 2017 09:37 UTC
https://codepen.io/Lestairon/pen/JJVRVx
Okay, now the button should be working, but is not
Sorin Ruse
@sorinr
Aug 10 2017 09:42 UTC
@lestairon just add bs4.js in pen settings->js part after jquery
Jim Tryon
@jimtryon
Aug 10 2017 09:42 UTC
Screen Shot 2017-08-10 at 2.41.22 AM.png
Sorin Ruse
@sorinr
Aug 10 2017 09:43 UTC
@jimtryon is this what u want?
Fernando
@lestairon
Aug 10 2017 09:43 UTC
@sorinr Thanks.
CamperBot
@camperbot
Aug 10 2017 09:43 UTC
lestairon sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1322 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Aug 10 2017 09:46 UTC
@lestairon welcome
prakash chandra yadav
@prakashyadav008
Aug 10 2017 10:53 UTC
hey everyone
how to get weather icons in codepe
prakash chandra yadav
@prakashyadav008
Aug 10 2017 10:53 UTC
codepen?
Dillion
@Deeleeyon
Aug 10 2017 11:00 UTC
Hello
Rajat
@rajataudichya
Aug 10 2017 12:24 UTC
hello guys I wish to add some text and a contact form on a hero image
how can I do that
I tried to make the position absolute but its not working when using the form
heroiczero
@heroiczero
Aug 10 2017 12:35 UTC
@rajataudichya try using z-index
Rajat
@rajataudichya
Aug 10 2017 12:35 UTC
great
how can I forget that
heroiczero
@heroiczero
Aug 10 2017 12:36 UTC
@rajataudichya or use the hero image as a background-image of a div
Rajat
@rajataudichya
Aug 10 2017 12:36 UTC
@heroiczero Thanks buddy
Roxroy
@roxroy
Aug 10 2017 13:48 UTC
@lestairon, your portfolio pen is looking great. I don't see any issues with it, so I figure you have making good progress on it.
Bashaar (Bas)
@Chiefbas
Aug 10 2017 13:52 UTC

Dear programmers, I've stubbled myself into a coding error that i couldn't find myself. So would any of you would be so kind to assist me with that?

Code is below and it says that the A(anchor) has to be located in the P(paragraph).

<p>view more <a href="http://freecatphotoapp.com"> cat photos</a></p>

Ken Haduch
@khaduch
Aug 10 2017 13:54 UTC
@Chiefbas - it looks like it is correct - but there might be things about it that are not - such as the correct URL, etc? Which challenge is this?
Bashaar (Bas)
@Chiefbas
Aug 10 2017 13:54 UTC
(challange:Nest an Anchor Element within a Paragraph)
Thank you for the quick response!
Roxroy
@roxroy
Aug 10 2017 13:56 UTC
@jimtryon, the connect 4 grid is looking great. However, the circles are not round. Since most screens are not square, the size for the height and width should be different. The height should be more than the width. Using height: 75px; width: 40px; gives a rounder circle. But play around to get the correct aspect ratio.
Ken Haduch
@khaduch
Aug 10 2017 13:57 UTC
@Chiefbas - it looks like the URL should be http://www.freecatphotoapp.com - at least that is what I see when I look at the challenge. Not sure if that's the entire problem, or even the problem? Perhaps the "View more" should be capitalized, too?
Bashaar (Bas)
@Chiefbas
Aug 10 2017 13:59 UTC
@khaduch Thank you for the help ^^, I've already for the problem. I accidently used a old (p) instead of making a new one which lead to this confusing. sorry xD
CamperBot
@camperbot
Aug 10 2017 13:59 UTC
chiefbas sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3191 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Aug 10 2017 13:59 UTC
@Chiefbas - great! You're welcome...
Gulsvi
@gulsvi
Aug 10 2017 14:00 UTC
@roxroy I thought pixels were always 1/96th of an inch - or a fraction of that based on the dpi of the screen. So 40px by 40px is always a square (for example). I haven't played around with pixel densities, but was curious about that the other day and didn't investigate further
FWIW, I think Bootstrap in that Connect Four project is causing some issues with %-based widths. We see people running into similar issues with keeping tic tac toe squares as perfect squares when they use bootstrap
Bashaar (Bas)
@Chiefbas
Aug 10 2017 14:20 UTC
Are you guys having trouble with the FCC website? It is offline at my side xD
Ken Haduch
@khaduch
Aug 10 2017 14:22 UTC
@Chiefbas - I haven't tried doing anything specific in the past few minutes, but I can access my profile page and look at the map of challenges - what are you having trouble accessing?
Bashaar (Bas)
@Chiefbas
Aug 10 2017 14:23 UTC
Can't acces the website at all. It says request denied. But going to try switch from wifi to cable. maybe that helps
Gulsvi
@gulsvi
Aug 10 2017 14:31 UTC
@Chiefbas Try freecodecamp.com, I'm getting errors with freecodecamp.org
What's wrong in this code...
why this is not responsive...
photos also not visible but i added photos...
if u have time please reply...
Addison
@addisonday
Aug 10 2017 18:04 UTC
@1532j0004kg Codepen has some restrictions with images. You might look into that
dinesh
@1532j0004kg
Aug 10 2017 18:05 UTC
k bro...but the word "tribute to phil" also not displayed ...why bro?
Addison
@addisonday
Aug 10 2017 18:06 UTC
I see that
Trommelochse
@Trommelochse
Aug 10 2017 18:06 UTC
@1532j0004kg me too
dinesh
@1532j0004kg
Aug 10 2017 18:06 UTC
I have no idea bro's...That's y i asked...
Addison
@addisonday
Aug 10 2017 18:07 UTC
Screen Shot on Aug 10th at 11-06 AM.png
We are saying the text exists
dinesh
@1532j0004kg
Aug 10 2017 18:07 UTC
sry,bro.The word"photos of phil"...
is not displayed
i defined with </u> tag..
Johnny
@jtan3
Aug 10 2017 18:13 UTC
@1532j0004kg your youtube video is covering up everything .
dinesh
@1532j0004kg
Aug 10 2017 18:14 UTC
i will modify,bro...
Thanks a lot bro....
Its now working...
dinesh
@1532j0004kg
Aug 10 2017 18:19 UTC
My pen is web responsive or not , bro?
Gulsvi
@gulsvi
Aug 10 2017 18:21 UTC

@1532j0004kg

<img class="move" src="http://i.dailymail.co.uk/i/pix/2014/11/27/video-undefined-238B264D00000578-190_638x360.jpg" class="text-center" class="img-responsive"  alt="Phillip hughes">

An HTML element can only have one "class" attribute

Also, this HTML:

<div class="col-xs-6 col-md-6 col-lg-6 col-sm-6">

Is the same as:

<div class="col-xs-6">
if you want the same size on all screen sizes, just use xs
dinesh
@1532j0004kg
Aug 10 2017 18:24 UTC
k bro...Thanks for your valuable time...I will recorrect those things and posted tomorrow,bro...
Gulsvi
@gulsvi
Aug 10 2017 18:24 UTC
Also, this can't be responsive if the height and width are specified with absolute units, they'll never be narrower than 220px wide, so two of them side-by-side won't fit on a cell phone
 <img  src="http://tribune-intl.com/wp-content/uploads/2014/11/Phillip-Hughes-has-tragically-passed-away-days-before-his-26th-birthday1.jpg" alt="phil" class="img-circle" height=220 width=220/>
Sajid Unar
@sajidunnar
Aug 10 2017 18:24 UTC
@SkyC0der you are rockstar man
Gulsvi
@gulsvi
Aug 10 2017 18:24 UTC
You're not so bad yourself @sajidunnar :)
:guitar: :sparkles:
Sajid Unar
@sajidunnar
Aug 10 2017 18:25 UTC
:P
dinesh
@1532j0004kg
Aug 10 2017 18:27 UTC
@SkyC0der if we want to make as a web responsive page .... we need not to give the absolute units ... am i right or wrong bro...
Gulsvi
@gulsvi
Aug 10 2017 18:29 UTC
@1532j0004kg It depends
dinesh
@1532j0004kg
Aug 10 2017 18:30 UTC
hmmm,k bro...Thanks a lot..
Gulsvi
@gulsvi
Aug 10 2017 18:30 UTC
There's nothing wrong with a 5px margin or 4px border radius
300px margins are going to cause problems
dinesh
@1532j0004kg
Aug 10 2017 18:30 UTC
I got it , bro...
Any other corrections,bro?
Gulsvi
@gulsvi
Aug 10 2017 18:31 UTC
Start with those fixes, resize your browser, and see how it looks
dinesh
@1532j0004kg
Aug 10 2017 18:32 UTC
k bro...
Thayyeb salim
@Thayyebsalim
Aug 10 2017 19:18 UTC
@SkyC0der Should I modify the twitch API more or move on?
Jim Tryon
@jimtryon
Aug 10 2017 19:40 UTC
I abandoned the connect four project. I came to the realization that showing that off to a company, they would not be impressed. I need to learn a lot more before I build an app from scratch.
Gulsvi
@gulsvi
Aug 10 2017 19:50 UTC

@Thayyebsalim Nice work :) It looks like one user story remaining:

User Story: if a Twitch user is currently streaming, I can see additional details about what they are streaming.

It looks really good though - great job
@jimtryon Always good to try new things :)
I saw you got a lot of advice on that project - maybe too much made it hard to figure the best path forward
Gulsvi
@gulsvi
Aug 10 2017 19:56 UTC
I would have done the UI like this (I think): https://s.codepen.io/skycoder/pen/wqezvK?editors=1010
Maybe some "feet" for the board so it looks like something that stands up on a table
Jim Tryon
@jimtryon
Aug 10 2017 20:28 UTC
@SkyC0der Yeah, I think that is what made me ditch it
Barbara Pentoney
@flyfishingbarbara
Aug 10 2017 20:38 UTC
@SkyC0der am i able to use bootstrap 4 code ( i like the carousel stuff) if i've chosen bootstrap 3 in the quickadd ons....?
@SkyC0der oops...should have started with- hi sky!
@SkyC0der prob not huh..?
Gulsvi
@gulsvi
Aug 10 2017 20:52 UTC
@flyfishingbarbara Hello! I don't know if the bootstrap 4 carousel will work with bootstrap 3. Bootstrap 3 has a carousel too: http://getbootstrap.com/javascript/#carousel and the HTML looks fairly similar.
BrianWilliams28
@BrianWilliams28
Aug 10 2017 21:46 UTC
could someone please explain in simple terms what the DNA Pairing algorithm challenge is asking? I'm just not sure what they want the function to do.
nvm i think i figured out what it wants
Manuel
@manny45
Aug 10 2017 22:16 UTC
function trueorfalse(wasThatTrue) {
   if (wasThatTrue) {
     return "Yes, that was true";
   }
   return "No, that was false";
 }
what's wrong with this
Use Conditional Logic with If Statements
Coy Sanders
@coymeetsworld
Aug 10 2017 22:17 UTC
my guess is the function name @manny45
CallMeOrange
@EgnaroDev
Aug 10 2017 22:17 UTC
Same
trueorfalse
Coy Sanders
@coymeetsworld
Aug 10 2017 22:18 UTC
function names are case sensitive
should be trueOrFalse
CallMeOrange
@EgnaroDev
Aug 10 2017 22:18 UTC
^
Manuel
@manny45
Aug 10 2017 22:18 UTC
ok but these are the instructions. Create an if statement inside the function to return "Yes, that was true" if the parameter wasThatTrue is true and return "No, that was false" otherwise.
Coy Sanders
@coymeetsworld
Aug 10 2017 22:18 UTC
yes that part is fine
its the name, look at instructions, carefully
rather the test cases
trueOrFalse should be a function
you don't have a function named trueOrFalse
CallMeOrange
@EgnaroDev
Aug 10 2017 22:19 UTC
Where is this challenge?
Coy Sanders
@coymeetsworld
Aug 10 2017 22:19 UTC
he lists the name
CallMeOrange
@EgnaroDev
Aug 10 2017 22:19 UTC
oh ok
Jose
@astis1
Aug 10 2017 22:48 UTC

Hi, i'm trying to do the return largest number in an array challenge. I wrote something that works; but, is not being accepted. Any ideas?

function largestOfFour(arr) {

var array = [];

for(var i = 0; i < arr.length; i++){

array.push(arr[i].sort(function(a, b){return b - a;}).filter(function(val){return val == arr[i][0];}));

}
return array.sort(function(a, b){ return b-a;});
}

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

Gulsvi
@gulsvi
Aug 10 2017 22:57 UTC
@astis1 Your code is returning: [[1001], [39], [27], [5]] but the exercise is expecting: [27,5,39,1001]
Jose
@astis1
Aug 10 2017 23:00 UTC
ah... I'm creating sub-arrays, and it needs just a single array
okay.
@SkyC0der thanks
CamperBot
@camperbot
Aug 10 2017 23:01 UTC
astis1 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2357 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 10 2017 23:01 UTC
No problem - your solution is close!
juni
@junipberry
Aug 10 2017 23:16 UTC
What am I doing wrong?
var customerData = {
  'Joe': {
    visits: 1
  },
  'Carol': {
    visits: 2
  },
  'Howard': {
    visits: 3,
  },
  'Carrie': {
    visits: 4
  }
};

function greetCustomer(firstName) {
  var greeting = '';
    let names = Object.keys(customerData);

 for (i=0;i<names.length; i++){
   if (customerData.name[i]===true){
   if (customerData.visits[i]>1){
     greeting= ("Welcome back," + names[i] + "! So glad to see you again!");
   }
   else if (customerData.visits[i]==1){
     greeting= ("Welcome back," + names[i] + "! We're glad you liked us the first time!");
   }}
   else {
     greeting= ("Welcome! Is this your first time?");
   }
 }
    return greeting;
}
Johnny
@jtan3
Aug 10 2017 23:28 UTC
@junipberry is this from hack reactor?
juni
@junipberry
Aug 10 2017 23:28 UTC
Yes!
@jtan3 can you help me find what Im doing wrong
Johnny
@jtan3
Aug 10 2017 23:30 UTC
@junipberry trying too look through it right now
juni
@junipberry
Aug 10 2017 23:30 UTC
alrighty, ty
Jim Tryon
@jimtryon
Aug 10 2017 23:31 UTC
are you able to get help on code from hack reactor? just checking
Gulsvi
@gulsvi
Aug 10 2017 23:40 UTC
There are some issues with the way you're accessing that object. For example, customerData.name doesn't exist and neither does customerData.visits.
You can get the # of visits for a person like:
console.log(customerData['Carrie'].visits) // 4
or:
var firstName = 'Carrie';
console.log(customerData[firstName].visits) // 4
And, you can check if 'Carrie', for example is one of the names in the object with hasOwnProperty():
var firstName = 'Carrie';
console.log(customerData.hasOwnProperty(firstName)) // true