These are chat archives for FreeCodeCamp/HelpFrontEnd

8th
Jun 2017
Gulsvi
@gulsvi
Jun 08 2017 00:11
@jtan3 Try it with crossorigin.me, you'll still get a mixed-content error
Have to use JSONP I believe
Actually, nevermind, you said to put it in front of dark sky not openweathermap :p
Gulsvi
@gulsvi
Jun 08 2017 00:17
The problem is, ip-api doesn't support HTTPS either :(
mrgrizzlie33
@mrgrizzlie33
Jun 08 2017 00:33

guys I have an issue. I have two bootstrap rows, one with a col-md-12, and one with 3 col-md-4's, but for some reason the items within each of the 4 columns are right beside each other. Any help? Here's the code:

<div class="row">
<div class="col-md-12"><h2 class="header text-center">Projects</h2></div>
</div>
<div class="row">
<div class="col-md-4">
<p>hello</p>
</div>
<div class="col-md-4"><p>hello</p>
</div>
<div class="col-md-4"><p>hello</p>
</div>
</div>

fdemaa
@fdemaa
Jun 08 2017 00:34
@mrgrizzlie33 and what do you wanna do ?
mrgrizzlie33
@mrgrizzlie33
Jun 08 2017 00:35
@fdemaa I would like to have the col-md-12 appear above the col-md-4's
like bootstrap is supposed to do
fdemaa
@fdemaa
Jun 08 2017 00:35
@mrgrizzlie33 post the codepen
You see how the items are not appearing in a horizontal alignment? That's the issue I'm trying to fix and the bootstrap doesnt seem to be helping
@fdemaa
fdemaa
@fdemaa
Jun 08 2017 00:41
that because you are using bootstrap 4
put that instead
and save
and refresh the codepen
mrgrizzlie33
@mrgrizzlie33
Jun 08 2017 00:43
@fdemaa you are a saint thank you
CamperBot
@camperbot
Jun 08 2017 00:43
mrgrizzlie33 sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 173 | @fdemaa |http://www.freecodecamp.com/fdemaa
fdemaa
@fdemaa
Jun 08 2017 00:44
:+1:
JR Woods
@jrwoods42
Jun 08 2017 01:29
@jtan3 I had to step away for a while, but I'll give it a shot. Thanks for your help!
CamperBot
@camperbot
Jun 08 2017 01:29
jrwoods42 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @jtan3 |http://www.freecodecamp.com/jtan3
StretchBenStrong
@StretchBenStrong
Jun 08 2017 01:57
I am working on one of my first projects-Portfolio. I'm having trouble with the headed with codepen. The header keeps stacking the links on top of each other rather than in a horizontal line. If I copy my code and open it with a browser I do not have the issue. Please help!
JR Woods
@jrwoods42
Jun 08 2017 02:02
I'm completely stumped... does anyone have a working weather app that I can look at? I can't get mine to work at all, I've tried dark sky and openWeatherMap. I am able to get the correct longitude and latitude, but I can't get it to show up in my html. Here's my pen: https://codepen.io/jrwoods42/pen/WObNRP
Long Nguyen
@longnt80
Jun 08 2017 02:56
@jrwoods42 try https://www.apixu.com/
@jrwoods42 you need to load the API from https
your openweather link is http so it won't load with codepen
http://api.openweath....
Vincent Yan
@envincebal
Jun 08 2017 03:11
Hey guys, I'm stuck on the calculator project. In the code below, when you click on an operator button, the value attribute gets printed to the display. The "if/else" statement prevents an operator from printing to the screen if the same one is already there. The problem is I run into a bug where if I press the same operator twice in a row, it will no longer print again if I backspace that operator. Any help would be appreciated.
for (var i = 0; i < operator.length; i++) {
    operator[i].addEventListener("click", function(){

        if (display.value.indexOf(this.value) != -1) {
            this.value = "";
            console.log(display.value);
        }else if (display.value.slice(this.value)){
            display.value += this.value;
        }
    })
}
Diego
@diegolego
Jun 08 2017 03:13
Hi! I cant manage to center the timeline as in the project example (the unordered list sort of keeps to the left). Also the thumbnail doesn't show the image description in white. I actually copied the original code from https://codepen.io/FreeCodeCamp/full/NNvBQW/ into a new pen and the same problem appears. Any help?
Long Nguyen
@longnt80
Jun 08 2017 03:17
@envincebal do you have it on codepen?
@diegolego I think you need to write your own
Vincent Yan
@envincebal
Jun 08 2017 03:20
@longnt80 No not yet. I'll go copy and paste it to one right now.
Botenga
@Botenga
Jun 08 2017 03:21
@diegolego are you runnigk bootstrap 3
@diegolego you are running bootstrap 4
@diegolego paste this in your external css https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css for bootstrap 3
Vincent Yan
@envincebal
Jun 08 2017 03:26
@longnt80 Okay so I fixed my original problem. But now I can't figure out how to clear the display and replace with new number inputs after press the evaluation button.
Long Nguyen
@longnt80
Jun 08 2017 03:28
@envincebal what do you mean? I can clear it after evaluation just fine
@envincebal oh btw, your calculator doesn't let me do 0.1 * 0.2
JD Tadlock
@jdtdesigns
Jun 08 2017 03:30
@envincebal You need to be able to chain operations so blocking the user from more than one operator type isn't going to work. ;)
9+10+25*55-5+2*4/3
Vincent Yan
@envincebal
Jun 08 2017 03:32
@longnt80 what I mean is when after the evaluation happens, pressing any numbers will simply add to the result total instead of clearing and starting anew.
Long Nguyen
@longnt80
Jun 08 2017 03:32
@jdtdesigns I think he hasn't finished it yet, I can chain with a different operator from the first
Vincent Yan
@envincebal
Jun 08 2017 03:33
@jdtdesigns oh yeah that's true. Thanks! lol
CamperBot
@camperbot
Jun 08 2017 03:33
envincebal sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:star2: 1011 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Vincent Yan
@envincebal
Jun 08 2017 03:33
@longnt80 oh yeah, I haven't gotten to floating numbers yet. lol
Long Nguyen
@longnt80
Jun 08 2017 03:38
@envincebal maybe set a var status = 1 when pressing the evaluate button then clear the display when user hit a new number
you also need to store your result somewhere
Vincent Yan
@envincebal
Jun 08 2017 03:41
@longnt80 Okay thanks. I'll try to come up with something with your advice.
CamperBot
@camperbot
Jun 08 2017 03:41
envincebal sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @longnt80 |http://www.freecodecamp.com/longnt80
Adam Bohannon
@abohannon
Jun 08 2017 04:00
Hey everyone, I'm working on my wikipedia viewer and just curious if someone could point me in the right direction for how to trigger js when the user presses enter (after typing their search query). Should I use onSubmit?
Botenga
@Botenga
Jun 08 2017 04:00
https://codepen.io/Botenga/pen/wdEjdJ
hey guys i need help with my porfolio project im trying to get the languages symbols in a horizontal row together but and also fix my place holder because it seems my sbols are mess with the placeholders
any help would be appreciated smile
Ken Haduch
@khaduch
Jun 08 2017 04:12
@Botenga - you have some typos like clas="row around line 24. Maybe that would help to set up a row, if you spelled it "class="
and are there classes like "col-3"? It would possibly be "col-md-3" to add a size in there?
Ken Haduch
@khaduch
Jun 08 2017 04:17
and missing a closing > in your html5 logo img element. That also causes some problems.
basically - you have to clean up your HTML to have everything properly nested and closed, and use valid Bootstrap 3 class names where you are trying to use them - like the column classes.
Botenga
@Botenga
Jun 08 2017 04:18
@khaduch i already fixed the typo and I tried 3 and any kind of other number for the grid system and
@khaduch im going to try to clean up the code
Ken Haduch
@khaduch
Jun 08 2017 04:20
@Botenga - well, what I have now is not perfect, but I used this block of code for that section with the language symbols, it is a start to align the symbols:
    <div class="row align-items-center">
      <div class="col-md-6 HTML5">
        <!--html5 logo-->
        <!--add fa fa icon for all the icons-->
        <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html5 symbol" class="img-responsive center-block" style="width:200px;"> </div>
        <!--css logo-->
        <div class="col-md-3 CSS"> <img src=" http://w3widgets.com/responsive-slider/img/css3.png" alt="css logo" class="img-responsive center-block" style="width:180px;"></div>
        <!--javascript logo-->
        <div class="col-md-3 JS"> <img src="https://camo.githubusercontent.com/4f455d6ec9b49d8d79e1a9ea922fdf10109717e0/68747470733a2f2f7261772e6769746875622e636f6d2f766f6f646f6f74696b69676f642f6c6f676f2e6a732f6d61737465722f73706563696669632d757365732f62616467655f6a732d7374726963742e706e67"
            alt="java script logo" class="img-responsive center-block" style="width:180px;"></div>

      </div>
    </div>
Gulsvi
@gulsvi
Jun 08 2017 04:22
@abohannon Yep, you're on the right track with onsubmit. Here's a codepen I created that shows one way to do it: https://codepen.io/skycoder/pen/MpKpJj
Adam Bohannon
@abohannon
Jun 08 2017 04:23
@SkyC0der this is helpful, thank you so much
CamperBot
@camperbot
Jun 08 2017 04:23
abohannon sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1646 | @skyc0der |http://www.freecodecamp.com/skyc0der
@khaduch i tried that already i want it to line up perfeclty or atleast look good becuase im going to add a percentage bar next to the laguages
Gulsvi
@gulsvi
Jun 08 2017 04:25
@abohannon No problem - I learned a couple of things that help on mobile devices, and just added them, if you want to refresh it.
Botenga
@Botenga
Jun 08 2017 04:26
plus if you rerun it it is messing with my portfolio text
Adam Bohannon
@abohannon
Jun 08 2017 04:28
@SkyC0der great! I'll analyze this and see what I can learn. Thanks again.
CamperBot
@camperbot
Jun 08 2017 04:28
abohannon sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: abohannon already gave skyc0der points
Gulsvi
@gulsvi
Jun 08 2017 04:34
@Botenga You have some syntax errors that are making it hard to debug and fix your code. Fix those first, then we can help out better. To see the errors, click the down arrow in the top, right-hand corner of the HTML Panel in Codepen and select "Analyze HTML"

These are the errors to address:

'"' is not a valid attribute of the <div> element.
'row' is not a valid attribute of the <div> element.
';' is not a valid attribute of the <div> element.
'<a' is not a valid attribute of the <div> element.
'href' is not a valid attribute of the <div> element.
'<a' is not a valid attribute of the <div> element.
'href' is not a valid attribute of the <div> element.
'<a' is not a valid attribute of the <div> element.
'href' is not a valid attribute of the <div> element.

The rest can be ignored
Or, maybe better, try to get the HTML right in a separate pen first, then copy/paste it into your existing project
Ken Haduch
@khaduch
Jun 08 2017 04:37

@Botenga - use the "Analyze HTML" option in the dropdown on the upper right side of the HTML panel. YOu have a lot of problem that it is flagging, some of them are probably just due to bad spacing or other minor issues. For example, you have this:

  <div>
    <div class="container
                class=" row ">
      <div class="col-xs-9 "></div>
       <div class="col-sm-3 HTML5 ">

The class="container" and class="row" cannot be two separate attributes in a div element. Make sure that your HTML structure is solid before you try to get too fancy, because it will probably not go too smoothly. I still see that you are missing that closing > on the <img that starts on line 35. And spacing for your attributes and quoted strings like this: "alt="java script logo "class="img-responsive center-block "style="width:180px; "></div> where you have "class= - should be a space between the quote and the "class", etc.

I have to sign off for the night - good luck with that project!

Botenga
@Botenga
Jun 08 2017 04:41
@khaduch @SkyC0der thanks for your help
Botenga
@Botenga
Jun 08 2017 04:46
@SkyC0der is there any way to know which line is the error om
on
Gulsvi
@gulsvi
Jun 08 2017 04:49
@Botenga Not that I know of, seems you have some missing > but luckily only 20 divs or so. Take a close look at each line and run that analyze tool often to see when new issues pop up
Botenga
@Botenga
Jun 08 2017 04:50
@sky does the analyzer refresh once i fixed the error or do i have to
if so where
Gulsvi
@gulsvi
Jun 08 2017 04:54
@Botenga You have to clear the errors and then select analyze again I think
Ken Haduch
@khaduch
Jun 08 2017 04:56
@Botenga - there is a clear option on that menu. The re analyze.
Botenga
@Botenga
Jun 08 2017 04:56
@khaduch thanks
CamperBot
@camperbot
Jun 08 2017 04:56
botenga sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2954 | @khaduch |http://www.freecodecamp.com/khaduch
Gulsvi
@gulsvi
Jun 08 2017 04:58
I have to get going... but this is a bootstrap4 version of skills + progress bars. Maybe useful to compare (you're using Bootstrap 3). The basic idea is a small column for the image and a larger one for the details about that image: https://codepen.io/skycoder/pen/ZybXav?editors=0010
Botenga
@Botenga
Jun 08 2017 04:59
@SkyC0der what is babel
Adam Bohannon
@abohannon
Jun 08 2017 05:00
Can someone help me understand what the jQuery $ means? I thought I understood, but the document.querySelector breaks my input/output. I'm trying to write vanilla javascript on recommendation from many dev friends.
$(document).ready(function(){

  document.querySelector("#js-search-form").addEventListener("submit", search);

});

function search(event){
  event.preventDefault();

  var queryValue = document.querySelector('#search').val();

  // testing
  console.log(queryValue);
}
on the #search ID specifically

js-search-form works fine

whoa sorry
Gulsvi
@gulsvi
Jun 08 2017 05:00
@Botenga It isn't needed for that project, it converts ES6 code to ES5
Different versions of JavaScript
Botenga
@Botenga
Jun 08 2017 05:01
then would i just use javascript @skycode
@SkyC0der
Gulsvi
@gulsvi
Jun 08 2017 05:02
Yes @Botenga
Long Nguyen
@longnt80
Jun 08 2017 05:22
@abohannon isn't $ and document.querySelector is the same?
Adam Bohannon
@abohannon
Jun 08 2017 05:22
i tried it, but it doesnt work in my search function
Mo.
@mokyox
Jun 08 2017 05:23
Could @abohannon also use a jQuery click(); function to submit his search term?
Long Nguyen
@longnt80
Jun 08 2017 05:25
so $('#js-search-form').on('submit', search); doesn't work?
Adam Bohannon
@abohannon
Jun 08 2017 05:25
oh no it does
i was just told to learn vanialla javascript
so im trying to translate the jquery
everything in jQuery works fine
Long Nguyen
@longnt80
Jun 08 2017 05:26
yeah, sometimes you use vanillaJS inside jquery, it doesn't work
I had a case with a vanillaJS method doesn't work with jquery
can't remember which one
you have to use the equivalent method available in jQuery
Gulsvi
@gulsvi
Jun 08 2017 05:27
$('#elementId')[0] is the same as document.getElementById('elementId') in case you run into a vanilla JS method that doesn't work with a standard jQuery selector
$('#elementId')[0].innerWidth() === $('#elementId').width() === document.getElementById('elementId').innerWidth()
Long Nguyen
@longnt80
Jun 08 2017 05:29
@SkyC0der why do you have [0]?
$('#elementId') is not document.getElementById('elementId') ?
Gulsvi
@gulsvi
Jun 08 2017 05:30
jQuery wraps the element in it's own object, and the first property of that object [0] is the standard vanilla javascript object for the element.
Long Nguyen
@longnt80
Jun 08 2017 05:30
oh I see
Gulsvi
@gulsvi
Jun 08 2017 05:31
there's a ton of info if you do console.log($('someElement')) lol
I don't know how the code runs so fast with all that data
Long Nguyen
@longnt80
Jun 08 2017 05:31
oh yeah, have to try that, thanks
Long Nguyen
@longnt80
Jun 08 2017 05:37

I don't know how the code runs so fast with all that data

just checked, document.getElementById also have all that data

Ming Zhu
@chocobrownie
Jun 08 2017 05:37
Hi there, I'm trying Atom for the first time. I pasted a javasript code in atom and it doesn't seem right. Any idea why?
blob
Gulsvi
@gulsvi
Jun 08 2017 05:38
maybe save it as a .js file first @chocobrownie ?
Ming Zhu
@chocobrownie
Jun 08 2017 05:39
Trying
Vincent Yan
@envincebal
Jun 08 2017 05:39
Hey guys, I'm almost finished with all the functionality of my calculator app. But I still am stuck on how to clear the display and replace it with numbers after an evaluation.
Long Nguyen
@longnt80
Jun 08 2017 05:41
have you tried give the calculator a state?
Ming Zhu
@chocobrownie
Jun 08 2017 05:41
@SkyC0der It only give me saving format options of "all files" and it stop respond once I try to name as .js file
Vincent Yan
@envincebal
Jun 08 2017 05:42
@longnt80 No, I'm not too familiar with what a state is.
Gulsvi
@gulsvi
Jun 08 2017 05:43
@chocobrownie That is weird...maybe rename the file outside of atom, and then open it. Might be a problem with the linter you're using
JD Tadlock
@jdtdesigns
Jun 08 2017 05:44
@envincebal What do you mean by clear the display and replace with numbers? It's calculating the equation and showing the evaluation.
Vincent Yan
@envincebal
Jun 08 2017 05:45
@jdtdesigns what I mean is after the evaluation, when you click on the numbers, it simply adds to the result rather than clearing the display with new numbers.
Long Nguyen
@longnt80
Jun 08 2017 05:46

@envincebal

equal -> clicked -> state = 1;
now if a number is clicked and if the state = 1, then clear the display

@envincebal state is just a variable to keep track
JD Tadlock
@jdtdesigns
Jun 08 2017 05:50
@envincebal or var reset = equated && !isNaN(input);
where equated would be a boolean set to true when equal is clicked
same concept
Vincent Yan
@envincebal
Jun 08 2017 05:51
@longnt80 and @jdtdesigns okay that makes a little bit more sense. Thank you both.
CamperBot
@camperbot
Jun 08 2017 05:51
envincebal sends brownie points to @longnt80 and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @longnt80 |http://www.freecodecamp.com/longnt80
:star2: 1012 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Long Nguyen
@longnt80
Jun 08 2017 05:52
basically, you tell the calculator that the eval button is pressed, now if a number button is pressed, the calculator should clear the display
Vincent Yan
@envincebal
Jun 08 2017 05:54
@longnt80 Okay, I see. I know how to clear the display, but how would I replace it with new inputs at the same time?
Max
@maxiwer
Jun 08 2017 05:54
Hello, guys. How to fix parts of webpage while scrolling it like here
https://codepen.io/ThiagoFerreir4/full/eNMxEp/
Long Nguyen
@longnt80
Jun 08 2017 05:55
@envincebal you turn everything to the beginning when you clear the display, like resetting it
JD Tadlock
@jdtdesigns
Jun 08 2017 05:55
@envincebal simply clear the stored input and push or concat the new number
Vincent Yan
@envincebal
Jun 08 2017 05:57
@jdtdesigns @longnt80 Okay got it. Thanks again!
CamperBot
@camperbot
Jun 08 2017 05:57
envincebal sends brownie points to @jdtdesigns and @longnt80 :sparkles: :thumbsup: :sparkles:
:warning: envincebal already gave longnt80 points
:warning: envincebal already gave jdtdesigns points
shivam gupta
@shivamg11000
Jun 08 2017 06:06
hey check my random quote ( modified ) https://codepen.io/shivamg11000/full/wdbgzz/
Glenn de los Santos
@glenndelossantos7
Jun 08 2017 06:06
guys here's the link to my unfinished portfolio project. How can I place the portfolio button ABOVE the khaki colored box? What am I doing wrong? https://codepen.io/glenndelossantos7/full/eRmXVm/
Saeed Jassani
@saeedjassani
Jun 08 2017 06:29
@shivamg11000 its really cool!
Hamza Saleemi
@Azmah21
Jun 08 2017 06:42
can you guys please tell me what's wrong with my code?
Cato Myhre
@Zalmez
Jun 08 2017 06:42
@glenndelossantos7 do you want a navigation bar? would be easier if your goal is to navigate around
Hamza Saleemi
@Azmah21
Jun 08 2017 06:43
my bottom two sections are really tiny all of a sudden
they used to be fine
not sure what happened to them all of a sudden
Pieta Honkakoski
@Bellorosa
Jun 08 2017 06:44
@Azmah21 hi Hamza, I'll try to help you out
this is just general help but i'd recommend you use more classes instead of id when creating sections
@Azmah21 okay, found it! you forgot to close one of the font awesome <i> tags
fa-html5 is never closed inside the list element
if you close it, everything returns to full width
fdemaa
@fdemaa
Jun 08 2017 06:50
@Azmah21 you should check the analize html , it help you a lot with what are the mistakes on your tags
Hamza Saleemi
@Azmah21
Jun 08 2017 06:51
@Bellorosa thank you so much
CamperBot
@camperbot
Jun 08 2017 06:51
azmah21 sends brownie points to @bellorosa :sparkles: :thumbsup: :sparkles:
:cookie: 128 | @bellorosa |http://www.freecodecamp.com/bellorosa
Hamza Saleemi
@Azmah21
Jun 08 2017 06:51
it worked!
Pieta Honkakoski
@Bellorosa
Jun 08 2017 06:51
you're welcome! :)
Max
@maxiwer
Jun 08 2017 06:52
@longnt80 thanks. So comes out I should just write other lines of code one after another.
CamperBot
@camperbot
Jun 08 2017 06:52
maxiwer sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @longnt80 |http://www.freecodecamp.com/longnt80
Hamza Saleemi
@Azmah21
Jun 08 2017 06:52
can you help me with another thing?
I've been trying to put something that looks like this
in one of my sections but it's been a challenge due to my image not being in the right position or being too zoomed in
@fdemaa I'll try to work on it!
Pieta Honkakoski
@Bellorosa
Jun 08 2017 07:34
@Azmah21 don't know the right way to do this, but i'd probably put them inside a table and use vertical-align
this is a mockup of the structure
Cato Myhre
@Zalmez
Jun 08 2017 07:36
where can I get the freecodecamp icon? using it for the "social tab"
Pieta Honkakoski
@Bellorosa
Jun 08 2017 07:36
<div style="display:table;">
<div style="display:table-cell; vertical-align:bottom;"></div>
<div style="display:table-cell; vertical-align:top;"></div>
<div style="display:table-cell; vertical-align:bottom;"></div>
</div>
of course you should write that better
but you get the idea
other option is to have three images that are the same height, but the logo is in a different place like this
Matúš Námešný
@LordMathis
Jun 08 2017 07:37
Cato Myhre
@Zalmez
Jun 08 2017 07:38
ty
Pieta Honkakoski
@Bellorosa
Jun 08 2017 07:39
Group.png
the gray area is just white or transparent space
it's a bit cheating
or then just make it one image
there are a lot of options
one .svg image would be responsive and pixel perfect all the way from mobile to desktop
XF2941222108
@XF2941222108
Jun 08 2017 07:48
I cant't sgin up CodePen.....
I'm Chinese,whocan help me 0.0
Matúš Námešný
@LordMathis
Jun 08 2017 07:50
@XF2941222108 there is a chinese room here, you might get better help there
XF2941222108
@XF2941222108
Jun 08 2017 08:01
@h1tag Thank you ;)
CamperBot
@camperbot
Jun 08 2017 08:01
:cookie: 843 | @h1tag |http://www.freecodecamp.com/h1tag
xf2941222108 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
YozhikM
@YozhikM
Jun 08 2017 09:03

@YozhikM
Hello guys

$(".speaker img").bind("click", function() {
            var src = ($(this).attr("src") === "icons/speaker-b.png") ?
                "icons/nspeaker-b.png" :
                "icons/speaker-b.png";
            $(this).attr("src", src);
            var bg = ($(this).css('background-color') === 'rgba(21,22,23,0.149)') ?
                '#fff' :
                'rgba(21,22,23,0.149)';
            $(this).css('background-color', bg);
        });

Where is my mistake?

Jim Tryon
@jimtryon
Jun 08 2017 09:12
What is the error in jQuery console @YozhikM?
YozhikM
@YozhikM
Jun 08 2017 09:12
@jimtryon Sorry, I did it
$(".speaker img").bind("click", function() {
            var src = ($(this).attr("src") === "icons/speaker-b.png") ?
                "icons/nspeaker-b.png" :
                "icons/speaker-b.png";
            $(this).attr("src", src);
        });
        $(".speaker img").bind("click", function() {
            var bg = ($(this).attr("src") === "icons/speaker-b.png") ?
                'rgba(21,22,23,0.149)' :
                '#fff';
            $('.speaker').css('background-color', bg);
        });
Jim Tryon
@jimtryon
Jun 08 2017 09:13
Oh ok
JamesVitaly
@JamesVitaly
Jun 08 2017 10:19
Hi, just polishing off my weather app and im trying to make it so my background image changes dependant on the weather condition, it seems to work because it matches the current weather condition of today based on the JSON data from apixu weather app, however when i tried to change the variable of the current weather condition manually to a different condition and see if the background image changed it didnt, it stayed the same. I wonder if anyone could take a look at my code and offer advice to see whether I have done something wrong, or if im going about testing this aspect wrong.. very much obliged for any help

//function to change background image based on weather condition

if (currentCondition === "Overcast" || "Partly cloudy" || "Cloudy") {
$("body").css("background-image", overCast) }
else if(currentCondition == "Clear" || "Sunny") {$("body").css("background-image", sunnyDay)}
else if (currentCondition === "Heavy rain" || "Moderate rain" || "Light rain" || "Patchy rain nearby" || "Thundery outbreaks in nearby" || "Patchy light drizzle" || "light drizzle" || "Patchy light rain" || "Patchy moderate rain" || "Patchy heavy rain" || "Torrential rain shower") {$("body").css("background-image", rainyDay)}
else if (currentCondition == "Blizzard" || "Patchy snow nearby" || "Patchy sleet nearby" || "Blowing snow" || "Moderate Snow" || "Light snow showers") {$("body").css("background-image", snowyDay)}
else if (currentCondition == "Mist" || "Fog" || "Freezing fog") { $("body").css("background-image", mistyDay)}
else { $("body").css("background-image",sunnyDay)}

thats my code pen its a long code to send over this
odinolini
@odinolini
Jun 08 2017 10:21
@JamesVitaly "Heavy rain" || "Moderate rain" || "Light rain" || "Patchy rain nearby" || you cant do that, you need to do "if currentcondition == "heavy rain" || currentcondition == "light rain"
etc
JamesVitaly
@JamesVitaly
Jun 08 2017 10:21
ohh ok
i see thanks
yeh works now, cool
Sylvain
@orphen92
Jun 08 2017 10:29
Hi all i have a question about WikiquoteApi. When i used the methode WikiquoteApi.getSectionsForPage(randomNb(), success(), error()) i have sometimes this error
Uncaught TypeError: Cannot read property 'sections' of undefined.
Please i'm lost could you help me?
Jim Tryon
@jimtryon
Jun 08 2017 10:31
Is sections defined @orphen92?
@orphen92 I can’t see your code
Sylvain
@orphen92
Jun 08 2017 10:35
ohh wait i have an idea
$(document).ready(function() {

    function randomNb(){
        var nb = 0;
        nb = Math.ceil(Math.random() * 10000);
        return nb;
    }

        // Get quote

        WikiquoteApi.getSectionsForPage(randomNb(), 
          function(newQuote) {
            if(newQuote.sections != 'undefined'){
                console.log(newQuote);      
            }
          }, 
          function(msg){
            alert(msg);
          }
        );

});
its not working :(
i send a random number to my API and i just want my return.
Its works with 2 but not with 3 etc...
MadsSN
@MadsSN
Jun 08 2017 10:41
Would someone check my game of life out and check if some features is missing? Design is still very basic https://codepen.io/MadsSN/pen/XgmXXd
saravana karthick
@saravana042
Jun 08 2017 10:48
Hi , Any one please check my codepen link. why bootstrap are
are not work.
https://codepen.io/saravana042/pen/OgyEgV
Sylvain
@orphen92
Jun 08 2017 10:54
@jimtryon i thin k i need to test if newQuote.sections undefined but i dont know where in my code
Jim Tryon
@jimtryon
Jun 08 2017 10:54
@orphen92 Can you test it in the console?
Catalin Scripcariu
@CatalinScr
Jun 08 2017 10:55
@saravana042 what do you want to do?
saravana karthick
@saravana042
Jun 08 2017 10:56
@CatalinScr i linked bootstrap but it not worked while i check responsive
Sylvain
@orphen92
Jun 08 2017 10:57
@jimtryon what do you mean? the error is in my console yeah
Jim Tryon
@jimtryon
Jun 08 2017 10:58
@orphen92 Print out the value of newQuote.sections and see if it’s returning undefined
saravana karthick
@saravana042
Jun 08 2017 10:59
@CatalinScr this is my link
https://codepen.io/saravana042/pen/OgyEgV
Sylvain
@orphen92
Jun 08 2017 11:02
@jimtryon in my success function console.log(newQuote.sections); works with a good number. But with a not working number nothin append
YozhikM
@YozhikM
Jun 08 2017 11:02
What should be the script for scrolling the progress bar part of the screen? http://new.rofas.kz/slide1.html
Sylvain
@orphen92
Jun 08 2017 11:02
@jimtryon wikiquote-api.js:68 Uncaught TypeError: Cannot read property 'sections' of undefined
at Object.success (wikiquote-api.js:68)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)
at HTMLScriptElement.c (jquery-3.2.1.min.js:4)
at HTMLScriptElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLScriptElement.q.handle (jquery-3.2.1.min.js:3)
Catalin Scripcariu
@CatalinScr
Jun 08 2017 11:02
@saravana042 you need to put the image in columns and ad class="img-responsive" for images
@saravana042 and close the img tag
Mimi
@mariyahb3
Jun 08 2017 11:24
Hey, could someone help with this? At the lower half of the page, i'm trying to get the black and white picture aligned horizontally with the list. i've been having a bit of trouble understanding the bootstrap grid system, so i think it might be an error with that but im not sure. https://codepen.io/mimib33/full/BZoPgV/
Ben said
@BenSaidRachid
Jun 08 2017 11:24
hi all,for the calculator project,do i have to concider the priority of "" over "+" and "-"? so the result for 1+
1
2 would be 3 instead of 4?
@mariyahb3
try this
display: block;
    margin: 0 auto;
put this in your img css code
@mariyahb3 sorry,i misunderstand what you wanted,don't do what i said
Mimi
@mariyahb3
Jun 08 2017 11:38
it's okay, i'm pretty sure i figured it out!
Xenia Lagan
@XeniaLogan
Jun 08 2017 11:56

hi 2 everyone)

22.06.2017, 01:00-07:00 PM (GMT+3)
FeConf2017 – free global online conference for Front-end Developers.
Registration and admission is free for everyone! >> https://goo.gl/4tNbbJ

kirbyedy
@kirbyedy
Jun 08 2017 12:01
@XeniaLogan is it in russian ?
Juli Cheng
@julicheng
Jun 08 2017 12:13
Hi all! I'm on the stage of building my own portfolio and was wondering whether I should use bootstrap in it or just use plain html and css since I'm starting out? Like just to get the flow of html by itself? What do you think?
Brian Rostro
@BrianRostro
Jun 08 2017 12:19
Does anyone have any tribute page ideas?
@ahmeah Use html and css for now and add in bootstrap later on if you'd like
h1tag
@h1tag
Jun 08 2017 12:23
@BrianRostro Quincy Larson
Hayk Simonyan
@hayksim
Jun 08 2017 13:10
@brianrostro try to find a general topic that you are interested in and pick a person well known in that area. It will be easier to find info.
johnnydemol
@johnnydemol
Jun 08 2017 13:14

Hi there,

I'm trying to call a function from within a function but hit doesn't seem to work..

I'm calling it from the Jqueryline down below with id button1
Eric Weiss
@eweiss17
Jun 08 2017 13:16
@johnnydemol why did you assign a variable to the functions on line 25, 35
and line 31
johnnydemol
@johnnydemol
Jun 08 2017 13:18
I want to assign a couple of functions as methods to a single object for clarity
but that didn't work so I tried it with a variable first but that didn't work either..
what are you trying to do with your functions, from the examples on that page
johnnydemol
@johnnydemol
Jun 08 2017 13:28
I'm trying to declare setTimeout as a variable so I have access to it to use clearTimeout
Long Nguyen
@longnt80
Jun 08 2017 13:28

@johnnydemol

clearTimeout(start);
var output = function() {
    console.log('test');
  };

this part block the click event

johnnydemol
@johnnydemol
Jun 08 2017 13:29
how? it's not part of the variable I'm trying to call right?
Piyush Tiwari
@piyush805
Jun 08 2017 13:29
Any way i can go to saved code in codepen at some specific time? Like google docs
Eric Weiss
@eweiss17
Jun 08 2017 13:30
line 38
you have function ()
would that mess it up? not being function()
Long Nguyen
@longnt80
Jun 08 2017 13:30
@johnnydemol nevermind, that's the old code, I think you were making modification while I were viewing the pen
johnnydemol
@johnnydemol
Jun 08 2017 13:31
I think so yeah
Long Nguyen
@longnt80
Jun 08 2017 13:32
@johnnydemol are you trying to set up setTimeout?
johnnydemol
@johnnydemol
Jun 08 2017 13:33
it does work when I declare it as a function, but then I have to access the setTimeout within that function with the click event and I don't know how to do that.
yeah but I still want it to be able to stop after a click on button 2
that's where I'm stuck
Eric Weiss
@eweiss17
Jun 08 2017 13:35
it feels bad that you are calling a function to call a function
is that the best way to do that?
johnnydemol
@johnnydemol
Jun 08 2017 13:36
Isn't that the best way to call two functions from a single click event?
Eric Weiss
@eweiss17
Jun 08 2017 13:36
I am not sure, did you read that somewhere?
johnnydemol
@johnnydemol
Jun 08 2017 13:37
no I'm just not sure how to do it otherwise
but it's not part of the main problem I think
Eric Weiss
@eweiss17
Jun 08 2017 13:38
what is not working, that is supposed to be working
Long Nguyen
@longnt80
Jun 08 2017 13:38
@johnnydemol ok here's what I do:
var intervalId;

function run() {

  function yourFunction(){
    // Do your stuff


    intervalId = setTimeout(yourFunction, 1000);    
  };

intervalId = setTimeout(yourFunction, 1000);
};
@johnnydemol then you can stop the setTimeout anytime by clearTimeout(intervalId)
johnnydemol
@johnnydemol
Jun 08 2017 13:39
Yes that's it
I need to declare the variable to which I assign setTimeout outside of the functiion
Long Nguyen
@longnt80
Jun 08 2017 13:40
button1 on click will call run()
button2 on click will call clearTimeout(intervalId)
johnnydemol
@johnnydemol
Jun 08 2017 13:41
thanks @longnt80
CamperBot
@camperbot
Jun 08 2017 13:41
johnnydemol sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 341 | @longnt80 |http://www.freecodecamp.com/longnt80
johnnydemol
@johnnydemol
Jun 08 2017 13:41
thanks @eweiss17
CamperBot
@camperbot
Jun 08 2017 13:41
johnnydemol sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 449 | @eweiss17 |http://www.freecodecamp.com/eweiss17
Eric Weiss
@eweiss17
Jun 08 2017 13:41

I don't understand the point of ```
intervalId = setTimeout(yourFunction, 1000);
};

intervalId = setTimeout(yourFunction, 1000);
};
```

johnnydemol
@johnnydemol
Jun 08 2017 13:41
Yeah I'm not sure why to call it twice either
Juli Cheng
@julicheng
Jun 08 2017 13:42
So i'm making my portfolio page and wanting to make the nav bar fixed so that it cant be scrolled away. I applied position: fixed; and my nav bar has gone trasnsparent and is on top of the div below (the about bit). How do I fix this? Thanks!
Eric Weiss
@eweiss17
Jun 08 2017 13:44
so you can only call the function run() because yourFunction() is outside of scope?
Hoang Thanh Tu
@hoangthanhtu
Jun 08 2017 13:44
@ahmeah show your code
Long Nguyen
@longnt80
Jun 08 2017 13:44
@johnnydemol @eweiss17 if you call it once, it will do the function only one time. if you put it inside the function, it will run again as an interval
similar to setInterval
but with setTimeout you have to do that
Juli Cheng
@julicheng
Jun 08 2017 13:45
@hoangthanhtu how do you want me to do that? Copy and paste the html and the css bit from my pen to here?
Eric Weiss
@eweiss17
Jun 08 2017 13:45
are you using recursion
Long Nguyen
@longnt80
Jun 08 2017 13:45
yes
that's how people set up timer using setTimeout
Hoang Thanh Tu
@hoangthanhtu
Jun 08 2017 13:45
@ahmeah share your codepen url
Juli Cheng
@julicheng
Jun 08 2017 13:46
Eric Weiss
@eweiss17
Jun 08 2017 13:47
what is your value to get out of the recursion
johnnydemol
@johnnydemol
Jun 08 2017 13:47
@longnt80 Ah like that, I need it to alternate between functions so I don't need to use it like that, but thanks for the effort!
CamperBot
@camperbot
Jun 08 2017 13:47
johnnydemol sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:warning: johnnydemol already gave longnt80 points
Eric Weiss
@eweiss17
Jun 08 2017 13:50
@ahmeah I fixed it
because you are using bootstrap navbar, there is a class called "navbar-fixed-top" from bootstrap that you add. I just did that and it works
o crap nvm, it doesn't stay fixed
Long Nguyen
@longnt80
Jun 08 2017 13:51
@johnnydemol right now you only alternate between the two function start and break. How do you do increment for the clock?
Eric Weiss
@eweiss17
Jun 08 2017 13:52
@ahmeah check this out though, you should be able to figure it out from reading this https://getbootstrap.com/components/#navbar-fixed-top
Juli Cheng
@julicheng
Jun 08 2017 13:52
@eweiss17 haha no worries! thanks for the effort!
CamperBot
@camperbot
Jun 08 2017 13:52
ahmeah sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 450 | @eweiss17 |http://www.freecodecamp.com/eweiss17
Long Nguyen
@longnt80
Jun 08 2017 13:53
@eweiss17 I think I misunderstood what he wanted
Juli Cheng
@julicheng
Jun 08 2017 13:53
@eweiss17 is there a way to do it without using bootstrap? I'm wanting to create a portfolio with just html and css
Eric Weiss
@eweiss17
Jun 08 2017 13:53
yeah you can without bootstrap, but your navbar class is bootstrap
Hoang Thanh Tu
@hoangthanhtu
Jun 08 2017 13:54
@eweiss17 @ahmeah I think ahmeah is using bootstrap 4, is it fixed with navbar-fixed-top?
Long Nguyen
@longnt80
Jun 08 2017 13:54

@ahmeah

@eweiss17 is there a way to do it without using bootstrap? I'm wanting to create a portfolio with just html and css

yes

go to settings and remove bootstrap if you do not want it
Juli Cheng
@julicheng
Jun 08 2017 13:55
@eweiss17 ok i just removed it
Eric Weiss
@eweiss17
Jun 08 2017 13:55
ctrl + f for "fixed" on that page and there is a section for fixed nav bars
Brian
@Cornielle
Jun 08 2017 13:55
Hello World
i have a question
Aleksander Gębicki
@Takumar
Jun 08 2017 13:56
@Cornielle hello and welcome to FCC community - enjoy coding with us! :-)
Brian
@Cornielle
Jun 08 2017 13:56
@Takumar thanks so much , can i do a question for you ?
CamperBot
@camperbot
Jun 08 2017 13:56
cornielle sends brownie points to @takumar :sparkles: :thumbsup: :sparkles:
:star2: 3725 | @takumar |http://www.freecodecamp.com/takumar
Juli Cheng
@julicheng
Jun 08 2017 13:56
I've just removed bootstrap and ran the code and my background has gone funny. How do I make the image display on the full width of the screen like before?
Aleksander Gębicki
@Takumar
Jun 08 2017 13:56
@Cornielle write general question I will answer if I know how to do it :-) Otherwise somebody else will do it
Brian
@Cornielle
Jun 08 2017 13:58
Ok Sir , i was thinking to be a profesional freelancer , and i think that i want to take the way to use the style "mean stack"
Eric Weiss
@eweiss17
Jun 08 2017 13:58
@ahmeah you were probably using some classes from bootstrap and when you removed it they went away
Brian
@Cornielle
Jun 08 2017 13:58
what you think about mean stack ?
Hoang Thanh Tu
@hoangthanhtu
Jun 08 2017 13:58
@ahmeah there are many ways to do that. Below is one of them
html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Aleksander Gębicki
@Takumar
Jun 08 2017 13:59
@Cornielle I'm sorry but I'm not experienced enough to recommend you or advise against this way of working
Piyush Tiwari
@piyush805
Jun 08 2017 13:59
Any way i can go to saved code in codepen at some specific time? Like google docs
Brian
@Cornielle
Jun 08 2017 13:59
@Takumar ok understand , and what is your style of working
Aleksander Gębicki
@Takumar
Jun 08 2017 14:00
@Cornielle I'm still learning as many here, you should ask somebody more experienced who has a lot of projects and know good and week sides of each approach
Brian
@Cornielle
Jun 08 2017 14:01
@Takumar Hehe , ok sir , thanks :) again for your attencion
CamperBot
@camperbot
Jun 08 2017 14:01
cornielle sends brownie points to @takumar :sparkles: :thumbsup: :sparkles:
:warning: cornielle already gave takumar points
Long Nguyen
@longnt80
Jun 08 2017 14:02
@ahmeah add this to your navbar
z-index: 100;
Aleksander Gębicki
@Takumar
Jun 08 2017 14:02
@Cornielle I'm sorry I cannot help you
Long Nguyen
@longnt80
Jun 08 2017 14:04
@ahmeah your navbar was being covered by .divhome, you need to set z-index so navbar stay above .divhome
@ahmeah it has nothing to do with bootstrap
Eric Weiss
@eweiss17
Jun 08 2017 14:08
@ahmeah I did what you did, it's a little messy still
Juli Cheng
@julicheng
Jun 08 2017 14:09
@longnt80 thanks the z-index fixed my problem
CamperBot
@camperbot
Jun 08 2017 14:09
ahmeah sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @longnt80 |http://www.freecodecamp.com/longnt80
Juli Cheng
@julicheng
Jun 08 2017 14:10
thanks guys for all ur help @eweiss17 @hoangthanhtu
CamperBot
@camperbot
Jun 08 2017 14:10
ahmeah sends brownie points to @eweiss17 and @hoangthanhtu :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @hoangthanhtu |http://www.freecodecamp.com/hoangthanhtu
:warning: ahmeah already gave eweiss17 points
Juli Cheng
@julicheng
Jun 08 2017 14:11
i have another question, now that i have removed bootstrap, my image goes off the page. like i have to scroll to the right. how do i get rid of this prob
Long Nguyen
@longnt80
Jun 08 2017 14:12
can you give me the codepen @ahmeah
Eric Weiss
@eweiss17
Jun 08 2017 14:13
well as far as the white spacing around the picture
if you go to dev tools, you can see that .divHome class doesn't extend the entire width of the page
Long Nguyen
@longnt80
Jun 08 2017 14:16
@ahmeah add box-sizing: border-box; to * like this:
* {
  font-family: arial;
  box-sizing: border-box;
}
Eric Weiss
@eweiss17
Jun 08 2017 14:17
didn't even know box-sizing was a property
Long Nguyen
@longnt80
Jun 08 2017 14:17
@ahmeah in fact, you should use box-sizing: border-box; for all your project
@eweiss17 it's a very powerful property
Juli Cheng
@julicheng
Jun 08 2017 14:17
@longnt80 thanks! is that the value that makes everything fit to the screen?
CamperBot
@camperbot
Jun 08 2017 14:17
ahmeah sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:warning: ahmeah already gave longnt80 points
Eric Weiss
@eweiss17
Jun 08 2017 14:17
lol like !important
I would reccomend having <body>
Long Nguyen
@longnt80
Jun 08 2017 14:18
@ahmeah @eweiss17
here's a good read https://css-tricks.com/box-sizing/
it just make your life easier
Juli Cheng
@julicheng
Jun 08 2017 14:20
thanks!
@eweiss17 i thought you didn't have to add body in codepen?
Long Nguyen
@longnt80
Jun 08 2017 14:21
@ahmeah you don't have to
Juli Cheng
@julicheng
Jun 08 2017 14:22
btw another question sorry! you know my nav bar it goes "contact portfolio about home" how do i get it the other way round like "home about portfolio contact" because in the html i wrote, it's in the right order but when i float it to the right it turns up backwards
Long Nguyen
@longnt80
Jun 08 2017 14:24
@ahmeah move your logo to a separate div, float the nav as a whole, don't float li
Eric Weiss
@eweiss17
Jun 08 2017 14:25
so i set your background to the entire body and it filled in those white cracks
though that makes it span your entire page, probably not what you want
Juli Cheng
@julicheng
Jun 08 2017 14:29
@eweiss17 i set the margin and padding as 0 for both * and it seems to fix the prob! ty !
CamperBot
@camperbot
Jun 08 2017 14:29
ahmeah sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:warning: ahmeah already gave eweiss17 points
Juli Cheng
@julicheng
Jun 08 2017 14:32
@longnt80 thanks! that worked! why doesn't it float my class navbar to the right but it does to the nav element?
CamperBot
@camperbot
Jun 08 2017 14:32
ahmeah sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:warning: ahmeah already gave longnt80 points
RonnyNovik
@RonnyNovik
Jun 08 2017 14:33
FRONTTTTTTTT
ENDDDD
UHEEEEEEEEEEEE
@ahmeah YES
YOUARE
YES
Long Nguyen
@longnt80
Jun 08 2017 14:39
@ahmeah what do you mean? you only apply float to nav so only nav float to the right
navbar is unaffected
Juli Cheng
@julicheng
Jun 08 2017 14:41
@longnt80 i mean why doesnt itwork if i float the .navbar to the right like nothing happens to it. but if i float nav the element it does?
Ben said
@BenSaidRachid
Jun 08 2017 14:43
hi all,what can i do to makes my button and input field looks like a calculator?
Long Nguyen
@longnt80
Jun 08 2017 14:43
Because navbar width is 100% of the screen @ahmeah
RonnyNovik
@RonnyNovik
Jun 08 2017 14:43

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.silver-background {
background-color: silver;

}
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>

<div>

<p>Things cats love:</p>

<ul>

<li>cat nip</li>

<li>laser pointers</li>

<li>lasagna</li>
</ul>

<p>Top 3 things cats hate:</p>

<ol>

<li>flea treatment</li>

<li>thunder</li>

<li>other cats</li>
</ol>
</div>

<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.silver-background {
background-color: silver;

}
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>

<div>

<p>Things cats love:</p>

<ul>

<li>cat nip</li>

<li>laser pointers</li>

<li>lasagna</li>
</ul>

<p>Top 3 things cats hate:</p>

<ol>

<li>flea treatment</li>

<li>thunder</li>

<li>other cats</li>
</ol>
</div>

<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

hack
i hack
i hack ze account
i hack every acount
Sylvain
@orphen92
Jun 08 2017 14:44
Hi all excuse me but i have a little question
i have created a function for ajax connection.
I would like to know how can i add some more date when i use my function later
```
var connect = function(url){
    $.ajax({
        url: url,
        dataType: "jsonp",
        data: {
            format: "json",
            action: "query",
            redirects: ""    
        },
    success : function(data){
        console.log(data)
    },
    errors:function(xhr, result, status){
        alert("Error processing your query");
    }});
};

$(document).ready(function() {
    connect("https://fr.wikiquote.org/w/api.php");  
});
Could you help me?
Juli Cheng
@julicheng
Jun 08 2017 14:45
@longnt80 ooo right i c! because it already fills the whole width of page so cant float anywhere?
@longnt80 so could i just remove the navbar class and move everything to the nav element?
Long Nguyen
@longnt80
Jun 08 2017 14:48
@ahmeah if you have no use for navbar, yes
Juli Cheng
@julicheng
Jun 08 2017 14:49
@longnt80 ok thank you again!
CamperBot
@camperbot
Jun 08 2017 14:49
ahmeah sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:warning: ahmeah already gave longnt80 points
Long Nguyen
@longnt80
Jun 08 2017 14:50
No problem
Eric Weiss
@eweiss17
Jun 08 2017 14:56
the nav tag is pretty much a div with a more descriptive name, you don't have to use nav to make a navbar
Juli Cheng
@julicheng
Jun 08 2017 14:58
i tried removing navbar and placing all the stuff in it to the nav element but everything floats back to the left. i think its because of the width is set at 100%
how do i make boxes for the portfolio?
Vlasta Polach
@vlastapolach
Jun 08 2017 15:06
@ahmeah check this: https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp there are great and simple examples
Ben said
@BenSaidRachid
Jun 08 2017 15:16
hi all,my calculator works,but after the first operation when i want to make another it resume with the last result,if i do 1+1=2 the next operation will be 22+2=24 instead of 2+2=4,how can i fix it?
Josie
@Josie-N
Jun 08 2017 15:21

https://codepen.io/CMYK/pen/mwejLm?editors=1100
Anyone willing to help me out with my bootstrap navbar?

I'm just trying to push the form and the button on the right side of my nav.
Cookies from everyone! 🍪

Eric Weiss
@eweiss17
Jun 08 2017 15:21
@ahmeah boxes?
@Josie-N I added this to the css
.form-inline {
  float: right;
}
Andrew Hickman
@ahickman3
Jun 08 2017 15:23
slightly confused about a js concept here. In the js section, we were making objects, and that made sense. Then we used a constructor to make an object, whats the difference? they didnt explain that clearly
Josie
@Josie-N
Jun 08 2017 15:24
@eweiss17 thank you, that makes sense.
CamperBot
@camperbot
Jun 08 2017 15:24
josie-n sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 451 | @eweiss17 |http://www.freecodecamp.com/eweiss17
Juli Cheng
@julicheng
Jun 08 2017 15:24
@eweiss17 i managed to get a few boxes on my portfolio but it looks very messy. how do i fix it so that it is centered and theres 3 boxes on each row? https://codepen.io/ahmeah/pen/mmpyYy
Eric Weiss
@eweiss17
Jun 08 2017 15:25
@abdel974 back again today? The calc is harder than it looks
@ahmeah the easiest would probably be bootstrap grid
make a row and add columns
Valentin
@valentinlybmin
Jun 08 2017 15:26

Guys, I have probably a stupid question , but can anyone tell me why is this not centering http://imgur.com/EfSSqJq ?

It just hangs in the left side kinda.

Eric Weiss
@eweiss17
Jun 08 2017 15:27
if you don't want to use bootstrap than just add padding
Valentin
@valentinlybmin
Jun 08 2017 15:27
By this I mean the div
Eric Weiss
@eweiss17
Jun 08 2017 15:29
you can just post your pen instead of a screenshot
Valentin
@valentinlybmin
Jun 08 2017 15:29
oh , ok, I am not used to this. Just a sec
I just copy a link or?
the link(
the link*
Juli Cheng
@julicheng
Jun 08 2017 15:30
where do i put the padding? @eweiss17
Ben said
@BenSaidRachid
Jun 08 2017 15:30
@eweiss17 well,my calculator works,i fulfill the user story that wasn't optional,if i hit the button that clear the input field it works,but if i hit a number directly after the result,i have an error, i tried to use a flag=true,after the result the flag would be false,then check in my moveNumbers() function if the flag is false,if it's the case, clear the field,but when i put an if in my function it stop working,i don't know why
Valentin
@valentinlybmin
Jun 08 2017 15:31
Eric Weiss
@eweiss17
Jun 08 2017 15:32
@ahmeah just like put some padding on the images
alter it till it looks how you want it
Juli Cheng
@julicheng
Jun 08 2017 15:33
how do i get the image on one line?
Eric Weiss
@eweiss17
Jun 08 2017 15:33
image on one line?
weren't they already on one line
Juli Cheng
@julicheng
Jun 08 2017 15:34
nvm i think i got it :D
Eric Weiss
@eweiss17
Jun 08 2017 15:34
@valentinlybmin it's the margin: auto, get rid of auto and it goes to the left
Valentin
@valentinlybmin
Jun 08 2017 15:35
@eweiss17 I mean, I want it to be centered. Usually this centers it. In my case its not exactly in the middle
Eric Weiss
@eweiss17
Jun 08 2017 15:36
ummm like this?
.box{
  width:800px;
  margin:0;
  position: relative;
  left: 45%;
}
centering isn't so cut-n-dry as you would think it would be, it can be tricky
Juli Cheng
@julicheng
Jun 08 2017 15:36
i think im almost done i have another question tho
Eric Weiss
@eweiss17
Jun 08 2017 15:36
but that shoves it 45% from the left side, you can alter it to 50 or 47.5, wherever you think looks good
Juli Cheng
@julicheng
Jun 08 2017 15:36
u kno my logo how do i get it like on the same line as the nav text
Valentin
@valentinlybmin
Jun 08 2017 15:37
Oh cool .That worked perfectly. But I dont quite understand why it works fine when I am using atom or brackets ,but in codepen is not
karimlearner
@karimlearner
Jun 08 2017 15:37
hello guys
Valentin
@valentinlybmin
Jun 08 2017 15:37
I mean the margin:0 auto works fine to center things
@eweiss17 Thank you for the help man
karimlearner
@karimlearner
Jun 08 2017 15:39
I have a test in fcc and I got stuck in this code I dont know how to put a text in the bttom of my image
this is website
Eric Weiss
@eweiss17
Jun 08 2017 15:41
@ahmeah i just refreshed and the images look good
Ben said
@BenSaidRachid
Jun 08 2017 15:42

@karimlearner put

{
  text-align:center; 
}

to center the text,put your image and the text in the same div

karimlearner
@karimlearner
Jun 08 2017 15:42
I want it as titre
Ben said
@BenSaidRachid
Jun 08 2017 15:44
<h1> or <h2> etc,
Eric Weiss
@eweiss17
Jun 08 2017 15:44
@ahmeah I'll be back later, i'm going on lunch
Ben said
@BenSaidRachid
Jun 08 2017 15:44
i did it with <p> but if you want to put a text below your image as a title use h1, h2 ..
Juli Cheng
@julicheng
Jun 08 2017 15:45
@eweiss17 alright! thanks for your help! enjoy your lunch!
CamperBot
@camperbot
Jun 08 2017 15:45
ahmeah sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 452 | @eweiss17 |http://www.freecodecamp.com/eweiss17
karimlearner
@karimlearner
Jun 08 2017 15:47
ben said nothing has changed I did h1 but the text still out the image
Ben said
@BenSaidRachid
Jun 08 2017 15:55
J
Karinlearner,put the <h1> below your picyure in the sane div,make the background of your div white instead of the backround of your picture
Karim* sorry i'm on my phone
karimlearner
@karimlearner
Jun 08 2017 15:58
@abdel974 thank you a lot I will try
CamperBot
@camperbot
Jun 08 2017 15:58
:cookie: 306 | @abdel974 |http://www.freecodecamp.com/abdel974
karimlearner sends brownie points to @abdel974 :sparkles: :thumbsup: :sparkles:
Pagnito
@Pagnito
Jun 08 2017 16:08
@SkyC0der kAAAA, KAAAA
Gulsvi
@gulsvi
Jun 08 2017 16:09
@Pagnito lol wut
Pagnito
@Pagnito
Jun 08 2017 16:09
// Write a recursive function that outputs the sum of an array of integers
// myFunction([1, 2, 3, 4, 5, 6]) #=> 21
would u know how to do this one?
im tryin to master recursion and on this one, im a bit stumped
Auto-run
@Auto-run
Jun 08 2017 16:10
hello!
How can i add background image in codepen from google?
Gulsvi
@gulsvi
Jun 08 2017 16:11
@Pagnito I'd have to think about it, but sure
Pagnito
@Pagnito
Jun 08 2017 16:11
sweet
Auto-run
@Auto-run
Jun 08 2017 16:11
How can i add background image in codepen from google?
Juli Cheng
@julicheng
Jun 08 2017 16:13
@Auto-run the image you want right click and select copy image address
Auto-run
@Auto-run
Jun 08 2017 16:16
@ahmeah Thank you :)
CamperBot
@camperbot
Jun 08 2017 16:16
auto-run sends brownie points to @ahmeah :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @ahmeah |http://www.freecodecamp.com/ahmeah
karimlearner
@karimlearner
Jun 08 2017 16:16
I can not make a titre for my image , I want it on the bottom of it check out my code please https://codepen.io/mustaphason/pen/dRYrzY
Juli Cheng
@julicheng
Jun 08 2017 16:16
np @Auto-run
Josie
@Josie-N
Jun 08 2017 16:17

https://codepen.io/CMYK/pen/mwejLm?editors=1100

I have a Bootstrap question.
Why are my buttons acting funny?

I wanted to make one of those nice outline button types.
https://snag.gy/LtQG8r.jpg

Cookies for everyone! 🍪 Thank you.

Gulsvi
@gulsvi
Jun 08 2017 16:17
@Pagnito Had to think for a bit, I guess I'd do it like this:
const myFunction = arr => arr.length === 1 ? arr[0] : arr.pop() + myFunction(arr);
console.log(myFunction([1,2,3,4,5,6])); // 21
Pagnito
@Pagnito
Jun 08 2017 16:19
why const?
Gulsvi
@gulsvi
Jun 08 2017 16:19
So basically, take the last element of the array, add it to a running sum, remove it every time you use it
Same thing as:
function myFunction(arr) {
  if (arr.length === 1) {
    return arr[0];
  } else {
    return arr.pop() + myFunction(arr);
  }
}

console.log(myFunction([1,2,3,4,5,6]));
Juli Cheng
@julicheng
Jun 08 2017 16:20
@karimlearner you haven't closed your img tag and what do you mean you cant add a title to the bottom of image? just add h1-6 tag or p?
Markus Ivancsics
@ivancsicsmarkus
Jun 08 2017 16:20
@Josie-N Because tehere is no btn-outline-primary class in bootsrap 3.3.7
Hoang Thanh Tu
@hoangthanhtu
Jun 08 2017 16:21
@Josie-N the buttons with style btn-outline-* are in bootstrap v4
Gulsvi
@gulsvi
Jun 08 2017 16:21
Which is also the same as this :)
function myFunction(arr) {
  if (arr.length === 1) return arr[0];
  return arr.shift() + myFunction(arr);
}

console.log(myFunction([1,2,3,4,5,6]));
Hoang Thanh Tu
@hoangthanhtu
Jun 08 2017 16:21
but in your source code, you're using bootstrap 3.3.7
Pagnito
@Pagnito
Jun 08 2017 16:21
@SkyC0der hmm, so when u concat myFunction(arr) what does myFunction(arr) return?
Gulsvi
@gulsvi
Jun 08 2017 16:22
It returns itself :)
Josie
@Josie-N
Jun 08 2017 16:22
@ivancsicsmarkus @hoangthanhtu thank you!
CamperBot
@camperbot
Jun 08 2017 16:22
josie-n sends brownie points to @ivancsicsmarkus and @hoangthanhtu :sparkles: :thumbsup: :sparkles:
:cookie: 375 | @hoangthanhtu |http://www.freecodecamp.com/hoangthanhtu
:cookie: 593 | @ivancsicsmarkus |http://www.freecodecamp.com/ivancsicsmarkus
Pagnito
@Pagnito
Jun 08 2017 16:22
but isnt that the whole array?
Josie
@Josie-N
Jun 08 2017 16:23
sorry! I didn't know that!
Gulsvi
@gulsvi
Jun 08 2017 16:23
No, it's the function telling it to take the last item of the array and add it
Recursion is hard for me to explain.. hmmm
Markus Ivancsics
@ivancsicsmarkus
Jun 08 2017 16:23
@Josie-N it is a very common mistake!
Gulsvi
@gulsvi
Jun 08 2017 16:23
maybe easier to look at a for loop implementation
Markus Ivancsics
@ivancsicsmarkus
Jun 08 2017 16:24
@Josie-N use bootstrap v4! It is pretty awesome. :fire: :sunglasses:
Mitch Trotter
@mitchtrot
Jun 08 2017 16:25
Is using position: and padding: a destructive means to aligning and positioning? Sort of like not masking in Photoshop?
Pagnito
@Pagnito
Jun 08 2017 16:25
@SkyC0der ok hold on so. how does it stack?
6 + [1,2,3,4,5]
5+ [1,2,3,4]
4 + [1,2,3]
3 + [1,2]
2 + [1]
im pretty sure what i just wrote doesnt make sense, but thats what isee in my head atm
Gulsvi
@gulsvi
Jun 08 2017 16:26
That's right
Pagnito
@Pagnito
Jun 08 2017 16:26
but how does that give us a sum
Gulsvi
@gulsvi
Jun 08 2017 16:27
I don't know how it works internally
Auto-run
@Auto-run
Jun 08 2017 16:27
how can I use the entire image as a background in a certain div?
Pagnito
@Pagnito
Jun 08 2017 16:27
@SkyC0der T.T
dmn how did u do then?
Gulsvi
@gulsvi
Jun 08 2017 16:28
Maybe more examples would help explain it lol
Pagnito
@Pagnito
Jun 08 2017 16:28
oooh hold on, i think i get it
it adds all the popped ones once the stack reached its limit i think
Gulsvi
@gulsvi
Jun 08 2017 16:29
The factorialize a number challenge we had here was a good one for recursion
Pagnito
@Pagnito
Jun 08 2017 16:29
because thats what the function does in the else statement it, pops the element out
Gulsvi
@gulsvi
Jun 08 2017 16:30
function factorialize(num) {
  if (num <= 1) {
    return 1;
  } else {
    return num * factorialize(num - 1);
  }
}

console.log(factorialize(5));
@Pagnito Yeah, it makes the array smaller and smaller until it's only one element, then finally returns that - everything is in memory along the way
Pagnito
@Pagnito
Jun 08 2017 16:30
k sweet thanks as always @SkyC0der
CamperBot
@camperbot
Jun 08 2017 16:31
pagnito sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1647 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 08 2017 16:31
The factorialize example above is similar, it counts down from 5 on every recursion loop until the number is <=1
(by calling factorialize(num - 1))
And that looks so much cleaner in ES6 lol:
const factorialize = num => num <= 1 ? 1 : num * factorialize(num - 1);
Eric Weiss
@eweiss17
Jun 08 2017 16:55
@ahmeah Your page looks good! It's already way better than mine when I did that project
Ben said
@BenSaidRachid
Jun 08 2017 17:35
can anyone help me with my code?for those who weren't here,i'd like to clear the input field after an operation when i hit another number,it works pretty well if i hit the button clear before making another operation,but if i don't do this it will add the result of the previous operation to the next operation,like this 1+1=2 then instead of 2+2=4 i will be 22+2=24,what can i do to fix this?https://codepen.io/abdel974/pen/qjdwjV?editors=1010
also where can i get the calculator design?
JD Tadlock
@jdtdesigns
Jun 08 2017 17:49
@abdel974 Before we look through your code, please go back and use descriptive names for your variables. One letter, unreadable naming conventions are old school and not used anymore and for good reason. Try going back to your code a month from now and figuring out what you did. It won't be easy. ;)
Juli Cheng
@julicheng
Jun 08 2017 17:50
@eweiss17 thanks!!! I still have a few more bits and bobs I wanna do to it but prob later haha
CamperBot
@camperbot
Jun 08 2017 17:50
ahmeah sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 453 | @eweiss17 |http://www.freecodecamp.com/eweiss17
Ben said
@BenSaidRachid
Jun 08 2017 17:57
@jdtdesigns you're absolutly right,many people already told me that,i'm not used to it yet but i'm gonna try from now on,when i code i only think about me,i don't think about if people will understand my code or not,plus when i get back to my old code i sometimes,don't understand what i did
Siddharth Jha
@sid0914027
Jun 08 2017 17:58
Hi Guys I tried running the twitch alternative url https://wind-bow.glitch.me/twitch-api/streams/freecodecamp in the browser it is not working can anyone help
Ben said
@BenSaidRachid
Jun 08 2017 17:58
it's also because i use lot of counter,sometimes i use,i,j k,m,l,o,p etc it means nothing,it's like,counter 1,counter 2 etc
@sid0914027 do you have any code to show us?
Siddharth Jha
@sid0914027
Jun 08 2017 18:01
@abdel974 I tried typing the url provided by Quinsy but it is throwing a 404 error
Ayush Kumar
@Gr8ayu
Jun 08 2017 18:02
I want to get notification sound in my page . How can I get it ??
Kaeleb Rocha
@Kralleb
Jun 08 2017 18:02
@sid0914027 did you use jsonp? is it a cross domain error?
Michael Croteau
@micqey
Jun 08 2017 18:02
Hey Everyone! I'm wondering how to connect to codepen.io via http instead of https, anyone know?
Kaeleb Rocha
@Kralleb
Jun 08 2017 18:02
@micqey it's oveer michael.... http codepen is gone. (a moment of silence)
Ben said
@BenSaidRachid
Jun 08 2017 18:03
then check your console you will see all the data
Siddharth Jha
@sid0914027
Jun 08 2017 18:04
for browser as well we have to include callback is it?
Michael Croteau
@micqey
Jun 08 2017 18:04
@Kralleb I'm working on the Weather App project and I can't find an API to connect to. . . The Project lists Dark Sky API, but they no longer accept CORS and it also mentions trying OpenWeatherMap API but it requires http. . . anyone know of an API i can get some weather data from?
Ben said
@BenSaidRachid
Jun 08 2017 18:04
@sid0914027 do as @Gr8ayu said
Ayush Kumar
@Gr8ayu
Jun 08 2017 18:04
@sid0914027 instead of channel-name write channel's name
Can anyone tell me how can I get notificattion sound in my page ???
Michael Croteau
@micqey
Jun 08 2017 18:06
I even found https://crossorigin.me as a work around and got connected to Dark Sky last night but this morning they are rejecting my connection. . .
Ayush Kumar
@Gr8ayu
Jun 08 2017 18:07
@micqey use add="https://crossorigin.me/https://api.darksky.net/forecast/bc2ba21b2d2ea245b1a67f6dd6c0e766/"+ latitude+","+longitude; this as url for .getJSON()
Siddharth Jha
@sid0914027
Jun 08 2017 18:08
@Gr8ayu I was trying to see the JSON script in the browser not in codepen presently. I understand that u have given me a solution to be included in my JS.
Ayush Kumar
@Gr8ayu
Jun 08 2017 18:09
@sid0914027 If you want to see API content you can use JSON.stringify()
Siddharth Jha
@sid0914027
Jun 08 2017 18:10
@Gr8ayu Thanks man I got it
CamperBot
@camperbot
Jun 08 2017 18:10
sid0914027 sends brownie points to @gr8ayu :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @gr8ayu |http://www.freecodecamp.com/gr8ayu
Michael Croteau
@micqey
Jun 08 2017 18:12
Thanks @Gr8ayu I was using crossorigin.me last night and it was working, but this morning they are blocking me. Is it something about that specific key?
CamperBot
@camperbot
Jun 08 2017 18:12
micqey sends brownie points to @gr8ayu :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @gr8ayu |http://www.freecodecamp.com/gr8ayu
Zane Rogers
@zanerogers1990
Jun 08 2017 18:26
hey guys, might be a silly question but do we cover any more of html, css and bootstrap after our first projects throughout the course?
Eric Weiss
@eweiss17
Jun 08 2017 18:28
It applies to the next wave of projects
but focuses on javascript mainly
Csaba Balogh
@JasonCorp84
Jun 08 2017 18:28
Hello guys
this is my codepen, and I cannot make work my tweet button
any idea why ?
Eric Weiss
@eweiss17
Jun 08 2017 18:32
here is what i did on my page
Michael Croteau
@micqey
Jun 08 2017 18:32
hey @JasonCorp84 I would suggest just getting the button from twitter
Eric Weiss
@eweiss17
Jun 08 2017 18:32
 //implementing into twitter.
        content = $("#quote-content").text();
        $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?text='+content).attr('target', '_blank');
Csaba Balogh
@JasonCorp84
Jun 08 2017 18:32
@eweiss17 nice thx
CamperBot
@camperbot
Jun 08 2017 18:32
jasoncorp84 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 454 | @eweiss17 |http://www.freecodecamp.com/eweiss17
Eric Weiss
@eweiss17
Jun 08 2017 18:34
I believe I found that on the twitter site
what to put for the href anyway
BrunoM24
@BrunoM24
Jun 08 2017 18:39
this calculator project is realy hard
fdawsoniv
@fdawsoniv
Jun 08 2017 18:41
@eweiss17 I just came in for much the same deal. I believe I am updating the href, but the button still makes a tweet with the URL of the pen.
Eric Weiss
@eweiss17
Jun 08 2017 18:42
let me try mine and see what happens
I believe mine works, click the tweet button https://codepen.io/eweiss17/pen/pbYZLE?editors=1010
fdawsoniv
@fdawsoniv
Jun 08 2017 18:42
@eweiss17 Let me know what you need me to show you. I started by getting the button from Twitter itself. I've searched the web and the answers I've found are too old, they've changed their button script since then.
@eweiss17 Thank you. I will dissect that.
CamperBot
@camperbot
Jun 08 2017 18:43
fdawsoniv sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 455 | @eweiss17 |http://www.freecodecamp.com/eweiss17
fdawsoniv
@fdawsoniv
Jun 08 2017 18:44
On a side note, I'm curious to know: do you make your sample pens fancy and nice looking or just make it do the basic function required and nothing more?
Eric Weiss
@eweiss17
Jun 08 2017 18:46
sample pens? the pens for the projects?
fdawsoniv
@fdawsoniv
Jun 08 2017 18:46
Right
Also, I meant for that to be a general question for the room.
Eric Weiss
@eweiss17
Jun 08 2017 18:47
It's a site to learn, put in as much effort as you want
you only have to complete the check points to complete the project
fdawsoniv
@fdawsoniv
Jun 08 2017 18:50
True, but doesn't really answer my question.
Eric Weiss
@eweiss17
Jun 08 2017 18:51
Do i make my pens fancy? I try to make them appealing and learn new methods to do things
fdawsoniv
@fdawsoniv
Jun 08 2017 18:51
OK. Anyone else?
Eric Weiss
@eweiss17
Jun 08 2017 18:51
in that quote generator i did the color switching from blue to red (which looks gross), that wasn't required but it was cool to do
I'm pretty much the only helper in here right now, this room is not as popular as /help or /freecodecamp, there are a couple others but are not currently on
you can ask in /freecodecamp, i'm sure you will get more answers
fdawsoniv
@fdawsoniv
Jun 08 2017 18:53
Alrighty. Back to my question, it looks to me like I'm doing much the same thing, but it still just wants to put in the pen's URL.
Eric Weiss
@eweiss17
Jun 08 2017 18:54
link your pen
Juli Cheng
@julicheng
Jun 08 2017 18:55
@fdawsoniv i mean its up to u! the more effort you put in, the more you get out of it.
@ahmeah Fair enough. I'm leaning more toward being basic. I started off trying to make nice ones, but I spent way too much time on prettying it up. I am more in need to developing functional programming skills. You can always make something pretty later. I need to convince an employer somewhere that I'm capable of getting the job done first.
@eweiss17 I'm thinking it has to do with the way the basic Twitter-provided button script functions.
Eric Weiss
@eweiss17
Jun 08 2017 18:58
@fdawsoniv it could be because you never specify the target (_blank means a new tab)
codepen is sometimes funky with stuff like that
fdawsoniv
@fdawsoniv
Jun 08 2017 18:59
@eweiss17 I just tried throwing that on there and got the same.
Eric Weiss
@eweiss17
Jun 08 2017 18:59
yeah me too...
do you understand how it gets the quote?
it puts it into the url
your url has your codepen
fdawsoniv
@fdawsoniv
Jun 08 2017 19:02
@eweiss17 I don't. I just remembered I changed the href from the default to the intent one I have in there now. I read on the Twitter docs that that was how you can put dynamic content to your tweet.
I don't see my codepen URL anywhere.
Wait, wait, hold on
Nope, no go.
Elliot S.
@SwarmSE
Jun 08 2017 19:03
Looking for a CSS wizard, any out there?
Eric Weiss
@eweiss17
Jun 08 2017 19:06
CSS Wizard?
@fdawsoniv i'm messing around with your pen trying to get it to work
fdawsoniv
@fdawsoniv
Jun 08 2017 19:09
OK, looking at the button in the console I see that URL now. So now I think it has to do with that parameter being set on page load and not changing right. I will try building a generic button and see if that works.
Eric Weiss
@eweiss17
Jun 08 2017 19:09
p=tweetbutton&url=https%3A%2F%2Fcodepen.io%2Ffdawsoniv%2Fpen%2FQpyggz
that was at the end of the twitter url, that is why it shows up in the box
fdawsoniv
@fdawsoniv
Jun 08 2017 19:10
@eweiss17 I saw that, too. I don't know how/where that's being set or how to change it, though.
Eric Weiss
@eweiss17
Jun 08 2017 19:11
oo.....
i may have got it
didn't work...
var x = $(".quoteBox").text();
    console.log(x);
this displays nothing in console, which is odd
fdawsoniv
@fdawsoniv
Jun 08 2017 19:15
Where'd you put that snippet? On document ready or within one of the click functions?
Eric Weiss
@eweiss17
Jun 08 2017 19:16
in the click function
I got it to work
fdawsoniv
@fdawsoniv
Jun 08 2017 19:17
I am getting the quoteBox's text if I put it in ready or under the JSON click function. But nothing within the tweet click function
JD Tadlock
@jdtdesigns
Jun 08 2017 19:17
@eweiss17 You're original problem comes from setting the href of the link on the outside of the json callback @fdawsoniv
Eric Weiss
@eweiss17
Jun 08 2017 19:18
Here is what I did, html
<div class="buttons">
  <button id="getQuote">Click for quote</button>
  <a href=# class="twitter-share-button">Tweet</a>
</div>
applicable js
  //update Tweet button with the gathered quote
  $(".twitter-share-button").click(function() {
    var x = $(".quoteBox").text();
    $(this).attr("href","https://twitter.com/intent/tweet?text=" + x).attr("target", "_blank");
  });
});
it's more like what I did, but it works
it removed your fancy looking twitter button....
You can use fontawesome for the twitter icon. You can also remove the widget js and just use a standard hyperlink with `target="_blank"
@fdawsoniv
Eric Weiss
@eweiss17
Jun 08 2017 19:20
i used font awesome in mine
fdawsoniv
@fdawsoniv
Jun 08 2017 19:21
@eweiss17 Did you put the update tweet function within the getQuote function like @jdtdesigns did as well?
Cause I'm struggling to understand what difference it makes.
Eric Weiss
@eweiss17
Jun 08 2017 19:21
i left yours where it was
JD Tadlock
@jdtdesigns
Jun 08 2017 19:22
Also, you don't need to stringify the result. The data is returned as json and is usable as is @fdawsoniv
@fdawsoniv It's async data. It will not come instantly. You request it with getJSON() and once it's retrieve, the callback function function(json) {} will be fire and passed the data from the request.
Eric Weiss
@eweiss17
Jun 08 2017 19:23
"...will be fire..." :fire:
fdawsoniv
@fdawsoniv
Jun 08 2017 19:23
@jdtdesigns Oh, God. I'm sure you're explaining that very well, but that's gibberish to me. I really don't understand a word of that.
Eric Weiss
@eweiss17
Jun 08 2017 19:24
as far as i can tell what he is saying (some) are doing unnecessary steps
fdawsoniv
@fdawsoniv
Jun 08 2017 19:24
@eweiss17 The only difference I see is that href starts as # (which, if I'm replacing, why would that matter?) and you removed the script tag. When I remove the script tag, the button doesn't work at all.
JD Tadlock
@jdtdesigns
Jun 08 2017 19:25
@eweiss17 I took a few steps out ;)
fdawsoniv
@fdawsoniv
Jun 08 2017 19:25
@jdtdesigns I can't watch a YT right now. I'll email it to myself to watch later. Thank you.
CamperBot
@camperbot
Jun 08 2017 19:25
fdawsoniv sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:star2: 1013 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 08 2017 19:26
The issue was not using asynchronous data correctly, which a lot of people struggle with at first when using API's
@eweiss17
fdawsoniv
@fdawsoniv
Jun 08 2017 19:26
@jdtdesigns I didn't know I was using it at all. I've never heard of it.
Eric Weiss
@eweiss17
Jun 08 2017 19:26
AJAX?
JD Tadlock
@jdtdesigns
Jun 08 2017 19:26
ajax is asynchronous
Eric Weiss
@eweiss17
Jun 08 2017 19:27
Asynchronous Javascript and Xml
fdawsoniv
@fdawsoniv
Jun 08 2017 19:27
@jdtdesigns @eweiss17 OK . . . was that in there?
Eric Weiss
@eweiss17
Jun 08 2017 19:27
I guess what you took from twitter was using that
your getJson is not asynchronous
$.Ajax is
JD Tadlock
@jdtdesigns
Jun 08 2017 19:28
lol, getJSON() is
Eric Weiss
@eweiss17
Jun 08 2017 19:28
okay i just guessed to be honest
JD Tadlock
@jdtdesigns
Jun 08 2017 19:28
you can set async: false in options, but should never be done @eweiss17
Eric Weiss
@eweiss17
Jun 08 2017 19:29
$.ajax just used .getjson and has some parameters already set right
JD Tadlock
@jdtdesigns
Jun 08 2017 19:29
any request for data from a server whether it's yours or somebody else's is async
@eweiss17 correct
fdawsoniv
@fdawsoniv
Jun 08 2017 19:30
@eweiss17 @jdtdesigns You guys have moved beyond me. It's great that it can be made to work, but it doesn't do me any good if I don't learn why. What specifically did you change and why does that make a difference?
reneesandefur
@reneesandefur
Jun 08 2017 19:31
Quick question about challenges. I am currently in another paid bootcamp so I have my dev environment set up with that and I use sublime as my editor. I also have a portfolio already set up that I am revamping, so the question is: do we have to use codepen for the front end certification?
JD Tadlock
@jdtdesigns
Jun 08 2017 19:31
@fdawsoniv Did you copy all the code you used?
Viviana-Arzabe
@Viviana-Arzabe
Jun 08 2017 19:31
how do i center an image
Eric Weiss
@eweiss17
Jun 08 2017 19:31
@fdawsoniv this is advanced stuff man, i only vaguely understand
fdawsoniv
@fdawsoniv
Jun 08 2017 19:31
@jdtdesigns ?
JD Tadlock
@jdtdesigns
Jun 08 2017 19:31
@reneesandefur No, but they request a link to your project. You can give them a github link I believe.
reneesandefur
@reneesandefur
Jun 08 2017 19:32
ok great! thanks!
JD Tadlock
@jdtdesigns
Jun 08 2017 19:32
@fdawsoniv It's just so I can know where you're at
fdawsoniv
@fdawsoniv
Jun 08 2017 19:32
@jdtdesigns Oh. I'm still with the code as I linked it.
reneesandefur
@reneesandefur
Jun 08 2017 19:32
@Viviana-Arzabe margin: auto in css should do the trick
Viviana-Arzabe
@Viviana-Arzabe
Jun 08 2017 19:32
ok
JD Tadlock
@jdtdesigns
Jun 08 2017 19:33
if you coded out all of that yourself and didn't copy/paste some stuff, then it will be easier to explain
otherwise i'll need to go into more detail
@fdawsoniv
Eric Weiss
@eweiss17
Jun 08 2017 19:33
do you understand http requests? GET, POST ect.?
James Czekaj
@JamesCzekaj
Jun 08 2017 19:33
Could I get some advice on where to learn how to make my portfolio? I don't really know how to build it
reneesandefur
@reneesandefur
Jun 08 2017 19:33
@jdtdesigns you probably saw but thanks again
CamperBot
@camperbot
Jun 08 2017 19:33
reneesandefur sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:star2: 1014 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 08 2017 19:34
@Blazertron Go to codecademy.com and do their html/css course. It's free and should get you on the right track to building your portfolio ;)
fdawsoniv
@fdawsoniv
Jun 08 2017 19:34
@jdtdesigns I used the samples as a guideline, but typed it all in myself, yeah.
JD Tadlock
@jdtdesigns
Jun 08 2017 19:35
@fdawsoniv So when you did this:
$.getJSON('forismatic url', function(json) {


});
James Czekaj
@JamesCzekaj
Jun 08 2017 19:35
@jdtdesigns K, I've been on there a little bit, I guess I'll finish it then!
reneesandefur
@reneesandefur
Jun 08 2017 19:35
@Blazertron Or if you're comfortable with html/css just use the old google machine to get some inspiration from other people's portfolios
Eric Weiss
@eweiss17
Jun 08 2017 19:35
@Blazertron You could also look at somebody elses (not the code portion, the finished product) and get ideas that way
JD Tadlock
@jdtdesigns
Jun 08 2017 19:35
do you know what that does @fdawsoniv
reneesandefur
@reneesandefur
Jun 08 2017 19:35
@eweiss17 jinx ;)
Eric Weiss
@eweiss17
Jun 08 2017 19:36
That's pretty much what I did, mimic somebody elses work and add your own spin to it
fdawsoniv
@fdawsoniv
Jun 08 2017 19:36
@jdtdesigns Goes to the forismatic site and 'gets' a quote in JSON format. With the function empty like that, it won't do anything with it.
Eric Weiss
@eweiss17
Jun 08 2017 19:37
calls a GET request from the 'forismatic url' and puts it into the json parameter?
in the json format
fdawsoniv
@fdawsoniv
Jun 08 2017 19:38
@eweiss17 Well, sure, if you don't speak English. ; )
Eric Weiss
@eweiss17
Jun 08 2017 19:39
?
fdawsoniv
@fdawsoniv
Jun 08 2017 19:39
@eweiss17 nm
JD Tadlock
@jdtdesigns
Jun 08 2017 19:40
@fdawsoniv Yes, it does get a quote. Javascript doesn't stop reading your code when it makes that request. It just keeps on going. So if you have this:
$.getJSON('url', function(json) {
  // using the data somehow
  $('#blah').text(json.quoteText);
});

$('another').text(json.quoteAuthor);
what do you think happens?
Eric Weiss
@eweiss17
Jun 08 2017 19:41
I want to answer but i will answer after @fdawsoniv
fdawsoniv
@fdawsoniv
Jun 08 2017 19:43
Go to the HTML element with the ID "blah" and replace the existing text with the contents of the quoteText attribute of the JSON object pulled from 'url.' Looks like 'another' is missing the . or the #, but at any rate I take it you mean for the script to find the "another" element and replace the existing text with the contents of the quoteAuthor attribute of the JSON object pulled from 'url.'
JD Tadlock
@jdtdesigns
Jun 08 2017 19:43
I made this quick example @fdawsoniv https://codepen.io/jdtadlock/pen/rwxBdJ
Eric Weiss
@eweiss17
Jun 08 2017 19:43
Your code above ^ won't do anything
.text() doesn't accept parameters
ahh , raw javascript without JQuery is gross
JD Tadlock
@jdtdesigns
Jun 08 2017 19:45
@eweiss17 Quite tedious ;)
@eweiss17 .text() can be passed a string ;)
@fdawsoniv This $('.another').text(json.quoteAuthor); is outside of the the .getJSON() function right?
fdawsoniv
@fdawsoniv
Jun 08 2017 19:48
@jdtdesigns Well if your objective was to flaunt how quickly you can put together code that functions and looks nicer than anything I can do, you did it. I am not ungrateful for your time. But this has gone on too long. You don't need to go through all this for me. I need to step away for a bit. When I get back, I'll take another crack at it and see if I can use your functioning example to sort out where I went wrong. Thanks again for your effort.
CamperBot
@camperbot
Jun 08 2017 19:48
fdawsoniv sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: fdawsoniv already gave jdtdesigns points
Eric Weiss
@eweiss17
Jun 08 2017 19:48
@jdtdesigns ya.... i was reading the documentation and realized i was wrong
JD Tadlock
@jdtdesigns
Jun 08 2017 19:49
@fdawsoniv Watch that video. It should clear some things up for you.
Eric Weiss
@eweiss17
Jun 08 2017 19:49
@jdtdesigns information overload
it is a daunting task trying to understand though
SopheaS
@SopheaS
Jun 08 2017 19:50
Hi guys! I am on" Build a Random Quote Machine" challenge I want to have my social media buttons onclick then tweet out Text or post a status on facebook. I already have my buttons set up. thank you for your help.
JD Tadlock
@jdtdesigns
Jun 08 2017 19:50
@eweiss17 No worries. jQuery has a good sized learning curve. The more you repeat the same things over and over, the less you have to research or debug.
Eric Weiss
@eweiss17
Jun 08 2017 19:50
I was referring to @fdawsoniv
JohnGalt
@osirisseye
Jun 08 2017 19:50

Have spare second? https://codepen.io/Osiriseye/pen/LLpaOV?editors=1111

Tell me what do you think?

Eric Weiss
@eweiss17
Jun 08 2017 19:50
i'm like a 6/10 in understanding assuming you are a 10/10
Chris
@bestintown23
Jun 08 2017 19:50
Hello Room, i just completed a small template, please take time to take a look and let me know what you think. All opinions welcome! https://s.codepen.io/bestintown23/debug/LLVjOd/xJkjOWeeJgaM
Eric Weiss
@eweiss17
Jun 08 2017 19:51
I understood the code and the pen that you posted
JD Tadlock
@jdtdesigns
Jun 08 2017 19:51
@osirisseye You need to clear the results each time before appending the new results.
Looks nice though ;)
fdemaa
@fdemaa
Jun 08 2017 19:52
@bestintown23 nice, you should center featured pieces
JohnGalt
@osirisseye
Jun 08 2017 19:52
@jdtdesigns oh crap :D forgot about that one :smile:
Joe
@johnwix
Jun 08 2017 19:53
@bestintown23 that's supposed to be a template for a web page?
JD Tadlock
@jdtdesigns
Jun 08 2017 19:53
@eweiss17 I don't know it all lol. But i've repeated quite a lot of jQuery code 1000's of times over 8 years
Chris
@bestintown23
Jun 08 2017 19:53
@fdemaa i thought it was centered, is it appearing to you differently?
fdemaa
@fdemaa
Jun 08 2017 19:54
@bestintown23 is in the left
Chris
@bestintown23
Jun 08 2017 19:54
@johnwix it is, its just going into my portfolio
SopheaS
@SopheaS
Jun 08 2017 19:55
@bestintown23 I think it looks great. how can you make that kind of letter to look that way. I love it.
Chris
@bestintown23
Jun 08 2017 19:55
@SopheaS Google fonts, and thanks
CamperBot
@camperbot
Jun 08 2017 19:55
bestintown23 sends brownie points to @sopheas :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @sopheas |http://www.freecodecamp.com/sopheas
SopheaS
@SopheaS
Jun 08 2017 19:55
ok
Chris
@bestintown23
Jun 08 2017 19:55
@fdemaa what type of device are you using?
SopheaS
@SopheaS
Jun 08 2017 19:55
thank yu
Eric Weiss
@eweiss17
Jun 08 2017 19:56
I wasn't referring to jQuery, I was referring to the asynchronous requests, jQuery has good documentation, it is not difficult to look up o nthe fly
fdemaa
@fdemaa
Jun 08 2017 19:56
@bestintown23 laptop
JD Tadlock
@jdtdesigns
Jun 08 2017 19:58
@eweiss17 Still referring to me? :D
TehNuuki
@TehNuuki
Jun 08 2017 19:58
I'm looking for a reference on how to code the buttons on my navbar to jump to different areas of my page. Anyone have a place I can start?
Chris
@bestintown23
Jun 08 2017 19:58
@fdemaa ooh ok i think i see what you mean, i just pulled it up on my tablet and its off, i'll look into it thanks
CamperBot
@camperbot
Jun 08 2017 19:58
:cookie: 185 | @fdemaa |http://www.freecodecamp.com/fdemaa
bestintown23 sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
SopheaS
@SopheaS
Jun 08 2017 19:59
Hi guys! I am on" Build a Random Quote Machine" challenge I want to have my social media buttons onclick then tweet out Text or post a status on facebook. I already have my buttons set up. thank you for your help.
fdemaa
@fdemaa
Jun 08 2017 19:59
@bestintown23 :+1:
syllov
@syllov
Jun 08 2017 20:00
could someone please take a quick look at my JS, and tell me why it doesnt work? :)
https://codepen.io/syllov/pen/owjroj
Joe
@johnwix
Jun 08 2017 20:00
@bestintown23 it looks great.
JD Tadlock
@jdtdesigns
Jun 08 2017 20:00
@SopheaS You can use https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text= + data.quote. Just set the href of your twitter link to that on each request to the API. Make sure to add target="_blank" to the hyperlink to avoid Codepen errors. ;)
SopheaS
@SopheaS
Jun 08 2017 20:01
Thank you @jdtdesigns
CamperBot
@camperbot
Jun 08 2017 20:01
sopheas sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:star2: 1015 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
reneesandefur
@reneesandefur
Jun 08 2017 20:06
@bestintown23 awesome work! i think @fdemaa was referring to the title or header "featured pieces" although, being an artistic site, i kinda dig the asymmetry
Sidafa Conde
@sconde
Jun 08 2017 20:06

Hello All,

I've completed my Twich Project. I could use some feedback please

https://codepen.io/sconde/full/zzvBVv/

Eric Weiss
@eweiss17
Jun 08 2017 20:09
@syllov This works
$("#generate").on("click", function(){
  $(".quote-box").css(
    "background-color", "red"
  )
});
that is not the animate that you want, but it will change the color to red, i couldn't get your animate to work even with hardcoded colors, so i was going from more basic
Lucci Paula
@luccipaula
Jun 08 2017 20:11
Hello! I'm currently on the Tribute Page project, and I can't figure out why the border around my figure/image is so wide. Can somebody please lend a hand? https://codepen.io/vivalucci/pen/jBjLVM
syllov
@syllov
Jun 08 2017 20:11
@eweiss17 thanks :)
CamperBot
@camperbot
Jun 08 2017 20:11
syllov sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 456 | @eweiss17 |http://www.freecodecamp.com/eweiss17
JD Tadlock
@jdtdesigns
Jun 08 2017 20:11
@syllov You'll need the jQuery color library as well for that. http://plugins.jquery.com/color/ An easier way without loading more js. https://codepen.io/jdtadlock/pen/xrZxZe?editors=0100
Eric Weiss
@eweiss17
Jun 08 2017 20:12
@syllov
var color = colors[randomColor];

$("#generate").on("click", function(){
  $(".quote-box").css(
    "background-color", color
  )
});
you can use what i did as a building block to the animate, or just listen to the other guy
reneesandefur
@reneesandefur
Jun 08 2017 20:13
@caixeta-paula It's based on your image size. add a class or id to your container then reduce the padding
JD Tadlock
@jdtdesigns
Jun 08 2017 20:13
@syllov I added a transition to .quote-box in your css.
Lucci Paula
@luccipaula
Jun 08 2017 20:13
@reneesandefur Thanks I'll try it
CamperBot
@camperbot
Jun 08 2017 20:13
caixeta-paula sends brownie points to @reneesandefur :sparkles: :thumbsup: :sparkles:
:cookie: 196 | @reneesandefur |http://www.freecodecamp.com/reneesandefur
reneesandefur
@reneesandefur
Jun 08 2017 20:15
@caixeta-paula you actually already have the container class so add the css for the padding
Lucci Paula
@luccipaula
Jun 08 2017 20:16
@reneesandefur Yeah I'm trying to use bootstrap
Eric Weiss
@eweiss17
Jun 08 2017 20:16

if you used mine use

cache = false;

to have it continue producing colors on the random

quarkmonkey
@quarkmonkey
Jun 08 2017 20:17
Hi, anyone got a moment to help on a CSS/Bootstrap issue?
Lucci Paula
@luccipaula
Jun 08 2017 20:18
@reneesandefur I actually added a max-width to the figure in CSS and that seems to have worked.
Eric Weiss
@eweiss17
Jun 08 2017 20:19
@quarkmonkey what is it, you can just go ahead and post your problem without asking in the future
reneesandefur
@reneesandefur
Jun 08 2017 20:20
@caixeta-paula great!
quarkmonkey
@quarkmonkey
Jun 08 2017 20:20

@eweiss17 Noted.

OK, I’m gettting a margin above one of my rows (the header row). Can’t figure out how to remove it.

https://codepen.io/quarkmonkey/pen/MmVoOZ/

reneesandefur
@reneesandefur
Jun 08 2017 20:24
@quarkmonkey have you tried setting margin-top to 0?
Lucci Paula
@luccipaula
Jun 08 2017 20:25
I think it's the top row itself that is the problem
quarkmonkey
@quarkmonkey
Jun 08 2017 20:26
@reneesandefur Yeah, but it doesn’t seem to alter anything.
fdawsoniv
@fdawsoniv
Jun 08 2017 20:30
I'm back for more punishment. Here's how my pen looks now. Why is the tweet coming out empty? Also, why are there quotes around my text when I log to the console but not when that same object is put into the html? https://codepen.io/fdawsoniv/pen/Qpyggz
quarkmonkey
@quarkmonkey
Jun 08 2017 20:30
@reneesandefur I’ve spotted a redundant row nested in a row and removed it, but I don’t think that’s the problem.
sunshine2050
@sunshine2050
Jun 08 2017 20:34
I'm stuck at the first project how can I center its elements
TehNuuki
@TehNuuki
Jun 08 2017 20:34
I'm looking for a reference on how to code the buttons on my navbar to jump to different areas of my page. Anyone have a place I can start?
reneesandefur
@reneesandefur
Jun 08 2017 20:35
@quarkmonkey hmm, let me take a look at
quarkmonkey
@quarkmonkey
Jun 08 2017 20:36
@reneesandefur Thanks.
CamperBot
@camperbot
Jun 08 2017 20:36
quarkmonkey sends brownie points to @reneesandefur :sparkles: :thumbsup: :sparkles:
:cookie: 197 | @reneesandefur |http://www.freecodecamp.com/reneesandefur
Dani
@msdanirob3
Jun 08 2017 20:36

is there something wrong with my code, the pills are coming out bunch together with no spaces

<h>
<div class = "container-fluid">
<ul class="nav nav-pills">
<li>
<li>
<a href="#">Home1</a>
</li>
<li>
<a href="#">Menus 1</a>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">Menu 3</a>
</li>
</li>
</ul>
</h>

quarkmonkey
@quarkmonkey
Jun 08 2017 20:37
@msdanirob3 Don’t know if it’s the issue (newbie myself), but it looks like you haven’t closed the div.
(the container-fluid)
Dani
@msdanirob3
Jun 08 2017 20:39
ok I added it but still nothing
Jim Tryon
@jimtryon
Jun 08 2017 20:40
@msdanirob3 It’s hard to read your code, you want to indent html elements, but it looks like you haven’t closed some tags
fdawsoniv
@fdawsoniv
Jun 08 2017 20:41
Anyone?
sunshine2050
@sunshine2050
Jun 08 2017 20:43
Any help how to center the image and the list items here
https://codepen.io/sunshine2050/pen/EXVqpW?editors=1000
quarkmonkey
@quarkmonkey
Jun 08 2017 20:45
@reneesandefur Any thoughts?
TehNuuki
@TehNuuki
Jun 08 2017 20:46
@sunshine2050 try using class .center {
display: block;
margin: 0px auto;
}
add then class .center to your image using class="center"
sunshine2050
@sunshine2050
Jun 08 2017 20:49
@TehNuuki didn't work I also tried block-center class in bootstrap 4 but no help
TehNuuki
@TehNuuki
Jun 08 2017 20:49
That's odd, it worked when I ran it on my browser
sunshine2050
@sunshine2050
Jun 08 2017 20:50
which version of bootstrap are you using ?
TehNuuki
@TehNuuki
Jun 08 2017 20:50
the quick add from settings
sunshine2050
@sunshine2050
Jun 08 2017 20:50
that's weird !
reneesandefur
@reneesandefur
Jun 08 2017 20:50
@quarkmoney it's the padding-top in your body
Islam Ibakaev
@dagman
Jun 08 2017 20:50
hey guys if you gonna build weather app i wrote proxy-server which makes calls to darkskyapi
TehNuuki
@TehNuuki
Jun 08 2017 20:51
agreed, your sure the class was created and added correctly? Make sure your adding it directly to the image element
reneesandefur
@reneesandefur
Jun 08 2017 20:51
@quarkmonkey it's set to 75px you should take it down to 50px and that should do it
quarkmonkey
@quarkmonkey
Jun 08 2017 20:52
@reneesandefur Yes! Thanks for your help.
CamperBot
@camperbot
Jun 08 2017 20:52
quarkmonkey sends brownie points to @reneesandefur :sparkles: :thumbsup: :sparkles:
:warning: quarkmonkey already gave reneesandefur points
sunshine2050
@sunshine2050
Jun 08 2017 20:52
@TehNuuki It's my fault , it's working using .center thanks
CamperBot
@camperbot
Jun 08 2017 20:52
sunshine2050 sends brownie points to @tehnuuki :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @tehnuuki |http://www.freecodecamp.com/tehnuuki
TehNuuki
@TehNuuki
Jun 08 2017 20:54
Awesome @sunshine2050 glad it worked
reneesandefur
@reneesandefur
Jun 08 2017 20:55
@quarkmonkey no problem!
philiplee15
@philiplee15
Jun 08 2017 20:58
whats the coolest front end frameworks for css
TehNuuki
@TehNuuki
Jun 08 2017 20:59
I haven't tried any others but people seem to love bootstrap
Jim Tryon
@jimtryon
Jun 08 2017 21:01
@philiplee15 That is a hard question… I’d probably say bootstrap/foundation
sunshine2050
@sunshine2050
Jun 08 2017 21:03
Actually I had to use bootstrap 3.5 because there were some conflicts , I don't think bootstrap 4 has the same col-*-offset implemented
CMike44
@CMike44
Jun 08 2017 21:04
My <header> tag needs to be positioned as absolute to have a full width but doing so breaks it's child elements. anyone got any ideas? https://codepen.io/mickymikey/pen/gRPbbv/
4javier
@4javier
Jun 08 2017 21:13
Hi guys. I built my first tribute page, and tried to use just the tools explained into these first steps of the path. I added a jquery slideDown() on the divs containing the core text.
JD Tadlock
@jdtdesigns
Jun 08 2017 21:13
@CMike44 I think you want to set it to position: fixed; and give your body padding-top: 45px;
4javier
@4javier
Jun 08 2017 21:14
The effect is not smooth as I expected:
  • the text inside the first div seems to get re-arranged after the expansion
  • there's some kind of white square under the image during the animation, that push left the second div.
CMike44
@CMike44
Jun 08 2017 21:15
@jdtdesigns when you resize the window though, the header gets smaller and it's children are no longer inside it
JD Tadlock
@jdtdesigns
Jun 08 2017 21:18
@4javier The element will be positioned absolute during the animation which will take it out of the document flow. You'll have to account for this in the parent wrapper. It can be a little tricky doing slide in content with text blocks.
@CMike44 You'll have to create break points with media queries to make sure the content of your page doesn't overflow outside the body. The body should also have a min-width of 320px which is the standard minimum these days.
Miljan Grcic
@Nightimer
Jun 08 2017 21:21
@CMike44 Try to remove position:absolute from header, and the just remove margins from body so body {margin: 0px}. I thinks thats the thing you want to do
:)
Pradeep
@warriopradeep
Jun 08 2017 21:21
How to get the header and the image centred inside <div class="jumbotron"></div>??
teevik
@teevik
Jun 08 2017 21:23
CMike44
@CMike44
Jun 08 2017 21:27
@Nightimer thanks
CamperBot
@camperbot
Jun 08 2017 21:27
cmike44 sends brownie points to @nightimer :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @nightimer |http://www.freecodecamp.com/nightimer
Mitch Trotter
@mitchtrot
Jun 08 2017 21:28
Can anyone enlighten me as to why my button won't act as a button? https://codepen.io/mitchtrot/pen/QgjoEa - Thanks.
teevik
@teevik
Jun 08 2017 21:30
What do you mean?
The styling?
4javier
@4javier
Jun 08 2017 21:31
@jdtdesigns
I solved the white square problem: I forgot to exclude the figcaption's paragraph from the animation.
Then I think you was referring to the text rearrangement problem: could you link something that explain why during the animation the divs are considered absolute? Even if I think that at the moment it's an argument too much advanced for me. It's just out of curiosity.
Thanks for your help, if you have the time to give a look at the simple code of my page and give me any hint I'd appreciate that.
CamperBot
@camperbot
Jun 08 2017 21:31
4javier sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:star2: 1016 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Pradeep
@warriopradeep
Jun 08 2017 21:32
@teevik Thanks for the help. But now my design is completely horizontal. Any way to make it similar to the example by Quincy?
CamperBot
@camperbot
Jun 08 2017 21:32
warriopradeep sends brownie points to @teevik :sparkles: :thumbsup: :sparkles:
:cookie: 41 | @teevik |http://www.freecodecamp.com/teevik
teevik
@teevik
Jun 08 2017 21:33
Do you want to use flexboxes? If so, read about them
No idea if you should be using them with bootstrap though
Mitch Trotter
@mitchtrot
Jun 08 2017 21:36
The button won't scroll to the href
JD Tadlock
@jdtdesigns
Jun 08 2017 21:36
@4javier You can use absolute positioning in css to move elements around based on the relative parent element. So
.parent-of-my-element {
  position: relative;
}

.parent-of-my-element .my-element {
  position: absolute; // now can be moved around freely inside of parent-of-my-element
  top: 0; // refers to the top of the parent
  left: 10px; // pushes .my-element 10px away from the left side of the parent
}
JD Tadlock
@jdtdesigns
Jun 08 2017 21:38
So jQuery just positions the element that you're animating to absolute and sets either top, left, right, bottom to a value every millisecond based on how long you set the animation to. @4javier
Pradeep
@warriopradeep
Jun 08 2017 21:38
@teevik Hey thanks again. I had tried it early on but it didn't work.
CamperBot
@camperbot
Jun 08 2017 21:38
warriopradeep sends brownie points to @teevik :sparkles: :thumbsup: :sparkles:
:warning: warriopradeep already gave teevik points
teevik
@teevik
Jun 08 2017 21:39
@mitchtrot Looks like you want the "a" element and not button
Oh, bootstrap doesn't style it then
teevik
@teevik
Jun 08 2017 21:47
@mitchtrot If you want it as an button element, you need to add onclick attribute with js inside. Example with your code https://codepen.io/teevik/pen/YQwPRL
Ayush Kumar
@Gr8ayu
Jun 08 2017 22:04
how can I increase font size of button https://codepen.io/gr8ayu/pen/vZNqZK?editors=0111
4javier
@4javier
Jun 08 2017 22:05
@jdtdesigns
Simpler than I thought. The solution to the problem instead, I think it's over my current skill. Thanks again.
CamperBot
@camperbot
Jun 08 2017 22:05
4javier sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: 4javier already gave jdtdesigns points
Gulsvi
@gulsvi
Jun 08 2017 22:06
@Gr8ayu use CSS:
.btn {
  font-size: 24px;
}
Ayush Kumar
@Gr8ayu
Jun 08 2017 22:06
@SkyC0der that's not working
@SkyC0der i have used button{font-size:90px;}
Gulsvi
@gulsvi
Jun 08 2017 22:07
@Gr8ayu .btn not button
TehNuuki
@TehNuuki
Jun 08 2017 22:08
I changed the size putting the font in a <span> element then using a class or id to change the font size in CSS
Ayush Kumar
@Gr8ayu
Jun 08 2017 22:08
@SkyC0der also tried that
@SkyC0der on removing btn class ,its working
but I want to keep .btn
Gulsvi
@gulsvi
Jun 08 2017 22:09
image.png
What browser? It works fine for me on Chrome as you can see in the image ^^
Ayush Kumar
@Gr8ayu
Jun 08 2017 22:10
@SkyC0der I am also on chrome
@SkyC0der thanks
CamperBot
@camperbot
Jun 08 2017 22:10
gr8ayu sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1648 | @skyc0der |http://www.freecodecamp.com/skyc0der
TehNuuki
@TehNuuki
Jun 08 2017 22:11
On the portfolio challenge. Would anyone be able to point me in the right directions to code the nav buttons to point towards different areas of the page? I believe I need to use jquery but i'm not sure
Gulsvi
@gulsvi
Jun 08 2017 22:13
@TehNuuki See the section called "HTML Links - Create a Bookmark" here: https://www.w3schools.com/html/html_links.asp
Ayush Kumar
@Gr8ayu
Jun 08 2017 22:13
@TehNuuki use <a href="#contact">
it will take you to element with id contact
TehNuuki
@TehNuuki
Jun 08 2017 22:15
I see @SkyC0der @Gr8ayu thank you both! For the life of me I could not find it
CamperBot
@camperbot
Jun 08 2017 22:15
tehnuuki sends brownie points to @skyc0der and @gr8ayu :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @gr8ayu |http://www.freecodecamp.com/gr8ayu
:star2: 1649 | @skyc0der |http://www.freecodecamp.com/skyc0der
BrianWilliams28
@BrianWilliams28
Jun 08 2017 22:37
question to anyone who has finished the weather app challenge, did anyone use Skycons on their page?
Ayush Kumar
@Gr8ayu
Jun 08 2017 22:41
@BrianWilliams28 what's skycon ??
BrianWilliams28
@BrianWilliams28
Jun 08 2017 22:42
Ayush Kumar
@Gr8ayu
Jun 08 2017 22:42
@BrianWilliams28 nope
Anon
@Siingularity
Jun 08 2017 22:45
How do i center a paragraph
I used text-align:center; and it didn't work
Johnny
@jtan3
Jun 08 2017 22:47
@Siingularity can you share your codepen?
Ayush Kumar
@Gr8ayu
Jun 08 2017 22:48
@Siingularity show code
It's an awful project, I can't remember much of how to design a page
Ayush Kumar
@Gr8ayu
Jun 08 2017 22:49
@Siingularity use align="center"
@Siingularity you are using css syntax in html
Anon
@Siingularity
Jun 08 2017 22:50
Oh I see
Johnny
@jtan3
Jun 08 2017 22:51
@Siingularity <p> not p1
Anon
@Siingularity
Jun 08 2017 22:51
Yep it works now
How do I make it so the background highlight is only around the texty
*text
Ayush Kumar
@Gr8ayu
Jun 08 2017 22:52
@Siingularity you should learn again
Tyler Johnson
@tylerjj17
Jun 08 2017 22:52
is there a wiki API im suppose to use?
https://codepen.io/tylerjj17/pen/jwEXMb
Ayush Kumar
@Gr8ayu
Jun 08 2017 22:52
you are doing a log of mistakes
@Siingularity
@tylerjj17 check if this helps https://codepen.io/gr8ayu/pen/GERRdP
Johnny
@jtan3
Jun 08 2017 22:55
@tylerjj17 you should also look up the wiki api to understand how to use it
Sammy
@Sammyghp
Jun 08 2017 23:02
whats up guys, for the tribute page, do we need to use the bootstrap source or can we use our own code?
TehNuuki
@TehNuuki
Jun 08 2017 23:04
I would suggest bootstrap but I don't know if its mandatory or not
Johnny
@jtan3
Jun 08 2017 23:05
@Sammyghp you can do whatever you want. You can make a complex tribute or a simple one.
Sammy
@Sammyghp
Jun 08 2017 23:05
@jtan3 sweet thank you!
CamperBot
@camperbot
Jun 08 2017 23:05
sammyghp sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @jtan3 |http://www.freecodecamp.com/jtan3
Mauro Borges
@mauroborgesm
Jun 08 2017 23:16
Hi everybody
im having trouble centering the content of my tables inside div elements
can someone please help me?
here is the code
I want the images and text to be centered, but so far, i still haven't figured it out
Zaurbek Zhakupov
@zzhakupov
Jun 08 2017 23:25
Hello guys, I completed my Book Trading Club Application created with React+Redux, I spent about a week on it, I will highly appreciate if you will give some feedback what you think can be improved and what to change. Here is GitHub https://github.com/zzhakupov/react-book-club and here is project itself: https://react-book-club.herokuapp.com/ :yum:
Jeff
@adzam5
Jun 08 2017 23:44
Hi, I was working on a Challenge and am stuck in a JS loop. Whenever I go to it my browser tab just freezes. Any suggestions?
JD Tadlock
@jdtdesigns
Jun 08 2017 23:51
@Zooll8 What does it do? Is it just to practice components?
Zaurbek Zhakupov
@zzhakupov
Jun 08 2017 23:52
@jdtdesigns yeah, as a part of fcc curriculum
you can use it to trade imaginary books with people
:yellow_heart:
JD Tadlock
@jdtdesigns
Jun 08 2017 23:53
@adzam5 Go into the inspector->application tab->local storage drop down->find the freecodecamp challenge url and delete it. Then load the challenge again. It will be reset, but you won't have a loop.
@Zooll8 Couldn't get it to do anything other than show the books.
Zaurbek Zhakupov
@zzhakupov
Jun 08 2017 23:54
may be go to 'my books' and add some books
JD Tadlock
@jdtdesigns
Jun 08 2017 23:57
Doesn't have a way to add books. Goes to /my and shows a bunch of books. There's a Grid is not defined error. Looks like you have some debugging to do :D
Long Nguyen
@longnt80
Jun 08 2017 23:57
@Zooll8 still don't know how to use it, maybe you should add the tooltips to your app
Zaurbek Zhakupov
@zzhakupov
Jun 08 2017 23:58
@longnt80 something crashed on server and it can't render input element
Thx for that
going to check it right now
@jdtdesigns you're right :smile: