These are chat archives for FreeCodeCamp/HelpFrontEnd

5th
Feb 2017
Na-Ya
@Na-Ya
Feb 05 2017 00:00
ah I see
Tyler Moeller
@TylerMoeller
Feb 05 2017 00:01
@LemuelReyes All of your .js files should go at the end of your html, right before the closing </body> tag. Add jQuery and then put bootstrap.min.js after that - the order is important because bootstrap.min.js needs jQuery in order to work, so it has to load after jQuery.
Na-Ya
@Na-Ya
Feb 05 2017 00:01
Thanks @TylerMoeller and @Rav404 , it was the version
CamperBot
@camperbot
Feb 05 2017 00:01
na-ya sends brownie points to @tylermoeller and @rav404 :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @rav404 |http://www.freecodecamp.com/rav404
:star2: 1459 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Feb 05 2017 00:04
@LemuelReyes Also, just noticed you have bootstrap.min.js set up as a stylesheet instead of in a script tag and you're using an old version of jQuery. Try this at the end of your HTML:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script>
    AOS.init();
    </script>
LemuelReyes
@LemuelReyes
Feb 05 2017 00:08
@TylerMoeller Thank you! I forgot that jquery has to go before bootstrap. I didn't even notice that the version was old. Thank you! it works perfectly now
CamperBot
@camperbot
Feb 05 2017 00:08
lemuelreyes sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1460 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Cameron Burkholder
@Cameron-Burkholder
Feb 05 2017 00:14
Has anyone completed the Simon Challenge?
Cameron Burkholder
@Cameron-Burkholder
Feb 05 2017 00:26
Here is my code for the Simon Challenge, commented. If you don't understand what a particular bit of code does, please ask. I think the interval is causing the code to not run, but I don't know any other way to do it.
SamLee714
@SamLee714
Feb 05 2017 00:50
Hi guys how do I move an unordered list into the middle of the page? I've tried to text center it but it doesn't come out aligned
Oliver Kavanagh
@KavTech
Feb 05 2017 00:51
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="well">
<div class="col-xs-6">
<div class="well>
<div class="col-xs-6">
</div>
</div>
</div>does anyone know what is wrong with this?
Mike Boardley
@Boardley
Feb 05 2017 00:51
@SamLee714 - Send me the codepen to your code
Mike Boardley
@Boardley
Feb 05 2017 00:54
@SamLee714
ul {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}
@SamLee714 - Put that in your css. That will center the enter ul block
You can adjust the % or change it to fixed px
@SamLee714
SamLee714
@SamLee714
Feb 05 2017 00:56
@Boardley thanks mike massive help
CamperBot
@camperbot
Feb 05 2017 00:56
samlee714 sends brownie points to @boardley :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @boardley |http://www.freecodecamp.com/boardley
Mike Boardley
@Boardley
Feb 05 2017 00:56
@SamLee714 - No problem
Cameron Burkholder
@Cameron-Burkholder
Feb 05 2017 01:14
I set up the Simon game so that my functions are working now, but now my functions run too quickly for the colors to change, and the other things to run appropriately.
Icah Banton
@remdata
Feb 05 2017 01:22
I am using (https://wind-bow.gomix.me/twitch-api./streams/freecodecamp?callback=?) as my api for the Twitch.tv. Is this correct?
Gulsvi
@gulsvi
Feb 05 2017 01:26
@remdata If you remove that dot . after /twitch-api your url shows some JSON, but not sure if that's correct or not. Haven't done that one yet
I would imagine the twitch tv api would have a different domain name
Johnny
@jtan3
Feb 05 2017 01:28
@remdata Try someone online too to see the difference. Like https://wind-bow.gomix.me/twitch-api/streams/ESL_SC2?callback=?
Icah Banton
@remdata
Feb 05 2017 01:29
@SkyCoder01 . Thanks. It getting late. I am not seeing clearly.
CamperBot
@camperbot
Feb 05 2017 01:29
remdata sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 109 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Icah Banton
@remdata
Feb 05 2017 01:29
@jtan3 . Thanks . I will try it.
CamperBot
@camperbot
Feb 05 2017 01:29
remdata sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for jtan3
xemexpress
@xemexpress
Feb 05 2017 01:50
hi everyone, my col-sm-offset is not working. Why?
Gulsvi
@gulsvi
Feb 05 2017 01:59
@xemexpress It's col-sm-4 offset-sm-4 in bootstrap v4
SamLee714
@SamLee714
Feb 05 2017 02:03
Hi guys, what is the best way to caption an image? I'm reading multiple things online.... does anyone use <figure> and <figcaption> ?
xemexpress
@xemexpress
Feb 05 2017 02:05
@SkyCoder01 thanks!!!
CamperBot
@camperbot
Feb 05 2017 02:05
xemexpress sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 110 | @skycoder01 |http://www.freecodecamp.com/skycoder01
xemexpress
@xemexpress
Feb 05 2017 02:09
@SamLee714 You may want to read this http://v4-alpha.getbootstrap.com/content/figures/
I used the two tags
SamLee714
@SamLee714
Feb 05 2017 02:13
@xemexpress thanks, did you still use the <a> element?
CamperBot
@camperbot
Feb 05 2017 02:13
samlee714 sends brownie points to @xemexpress :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @xemexpress |http://www.freecodecamp.com/xemexpress
xemexpress
@xemexpress
Feb 05 2017 02:14
yes. but why not?
SamLee714
@SamLee714
Feb 05 2017 02:15
Ok perfect i'll do it now
Nicholas Steffen
@nicksteffen94
Feb 05 2017 02:16
question: does bootstrap's navbar default to horizontal or vertical?
SamLee714
@SamLee714
Feb 05 2017 02:23
@xemexpress worked like a dream cheers
Cameron Burkholder
@Cameron-Burkholder
Feb 05 2017 03:01
My Simon code works in my head, but I get stuck in a loop now when I run it.
badalsaibo
@heyDante
Feb 05 2017 03:25
@nicksteffen94 horizontal
Nicholas Steffen
@nicksteffen94
Feb 05 2017 03:58
@heyDante That's what I figured but it seems like each element is going to a new line
Taylor
@kdmstr
Feb 05 2017 04:15
I'm trying to get jquery to scroll to a div after a button is clicked but struggling... what am I doing wrong? http://codepen.io/kdmnstr/pen/zNwmEj
Johnny
@JohnnyBizzel
Feb 05 2017 04:24
@kdmstr You forgot to add the reference to jQuery
add jquery.png
@Cameron-Burkholder I am seeing: Uncaught Error: Syntax error, unrecognized expression: Check 3 was correct. Next in sequence.
Taylor
@kdmstr
Feb 05 2017 04:34
wow thank you so much @JohnnyBizzel!
CamperBot
@camperbot
Feb 05 2017 04:34
kdmstr sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1241 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
Johnny
@JohnnyBizzel
Feb 05 2017 04:37
@kdmstr ;)
Daniel
@danielbyun
Feb 05 2017 04:47
real quick question yall.
#jumbo {

    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), url("http://byunsta.co/img/paypal.jpeg"); 
    background-position: 20% 20%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
the image will not show up on the page i’m putting that ID into
but u can literally go into the url and look at the damn image
*used the absolute file path cuz i got frustrated trying to link it to the correct file path
Daniel
@danielbyun
Feb 05 2017 04:53
nvm got it
MRamsey95
@MRamsey95
Feb 05 2017 04:56
Why wont the random quote and author show up when the page loads?
Ken Haduch
@khaduch
Feb 05 2017 05:01
@MRamsey95 - taking a quick look at it.
MRamsey95
@MRamsey95
Feb 05 2017 05:02
@khaduch I appreciate it!
Ken Haduch
@khaduch
Feb 05 2017 05:02
@MRamsey95 - first thing is to load your page with http:// because you are accessing the quotes via http:// - a page that is loaded with https:// will not access information from another site that is not secure.

@MRamsey95 - the next thing is that your data is coming back in an array - an object that is the first element of an array. You have to change your code to this:

      $('#quote').html(data[0].content);
      $('#author').html(data[0].title);

Along with the http:// change mentioned above, and it should load.

alican karalar
@alicankaralar
Feb 05 2017 05:07
hey guys
i need help about this, i want it to make an api call when i press enter
Ken Haduch
@khaduch
Feb 05 2017 05:07
@alicankaralar - what's up?
alican karalar
@alicankaralar
Feb 05 2017 05:07
but it reloads the page
i don't get why that happens
by the way it only works on chrome properly i guess
due to lack of css prefixes
i'll fix that later
MRamsey95
@MRamsey95
Feb 05 2017 05:09
@khaduch thanks! I made the changes but I'm still not getting the quotes?http://codepen.io/mramsey1995/pen/YNaWoj
CamperBot
@camperbot
Feb 05 2017 05:09
mramsey95 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2413 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Feb 05 2017 05:09
@alicankaralar - try taking away the <form> from your HTML. The default action of a submitted form is to reload the page.
alican karalar
@alicankaralar
Feb 05 2017 05:09
@khaduch thanks! but the problem then i have is, i can't add an eventlistener to the added input element
CamperBot
@camperbot
Feb 05 2017 05:09
alicankaralar sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2414 | @khaduch |http://www.freecodecamp.com/khaduch
alican karalar
@alicankaralar
Feb 05 2017 05:10
what's happening there is
Ken Haduch
@khaduch
Feb 05 2017 05:10
@MRamsey95 - after you made the changes did you hit the RUN button? It works for me when I loaded the new page.
alican karalar
@alicankaralar
Feb 05 2017 05:11
when you click the magnifying glass i inject an <input> element to the page, for which then i want to add an eventlistener for enter key, but it returns an error stating addeventlistener is not a function
MRamsey95
@MRamsey95
Feb 05 2017 05:11
@khaduch really? i click run and nothing changes..
thats weird
alican karalar
@alicankaralar
Feb 05 2017 05:12
oh wait @khaduch i forgot to camelcase the eventlistener in js ... fml
im not having that error anymore
Ken Haduch
@khaduch
Feb 05 2017 05:13
@MRamsey95 - I just reloaded the page from the URL that you posted and it came up with a quote?
MRamsey95
@MRamsey95
Feb 05 2017 05:14
@khaduch I have no idea what's going on then.. lol
@khaduch thanks for the help though!
CamperBot
@camperbot
Feb 05 2017 05:14
mramsey95 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: mramsey95 already gave khaduch points
Ken Haduch
@khaduch
Feb 05 2017 05:14
@MRamsey95 - I am using firefox, for one thing. Just try reloading the page from your URL that you posted and see? I just shut down my chrome browser, but I'll go and try it there, too, just in case?
@MRamsey95 - no, it worked fine there, in Chrome, too...
MRamsey95
@MRamsey95
Feb 05 2017 05:17
@khaduch firefox worked! although chrome still isnt working.. any idea as to why?
Ken Haduch
@khaduch
Feb 05 2017 05:17
@MRamsey95 - I just saw it work in Chrome, too?
MRamsey95
@MRamsey95
Feb 05 2017 05:20
@khaduch I got it! i had to remove my https everywhere extention and restart chrome . Thanks!
CamperBot
@camperbot
Feb 05 2017 05:20
mramsey95 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: mramsey95 already gave khaduch points
Ken Haduch
@khaduch
Feb 05 2017 05:21
@MRamsey95 - ah! the old https everyone... great! Good luck finishing that up... I'm signing off for tonight.
Nicholas Steffen
@nicksteffen94
Feb 05 2017 05:24
Would anyone be able to help me figure out why my bootstrap navbar is vertical rather than horzontal? http://codepen.io/Ncik/pen/rjvPEP?editors=1100
alican karalar
@alicankaralar
Feb 05 2017 05:34
@nicksteffen94 you have to use display:inline for that in your css
Nicholas Steffen
@nicksteffen94
Feb 05 2017 05:36
am i missing some syntax? I added both UL and LI display:inline but havent seen a change
http://codepen.io/Ncik/pen/rjvPEP?editors=1100
hkleindl
@hkleindl
Feb 05 2017 05:40
I'm
alican karalar
@alicankaralar
Feb 05 2017 05:45
@nicksteffen94 nav-link class it seems like prevents it
when you remove nav-link from your elements they become inline, why, i don't know, you have to look it up
i'm not really familiar with bootstrap so i don't want to misinform you
then display inline works
Nicholas Steffen
@nicksteffen94
Feb 05 2017 05:49
Thank you! I'll look into it, i had run out of ideas to look into. Would you mind posting your changes btw?
h1tag
@h1tag
Feb 05 2017 05:51
@nicksteffen94 I'm not sure but maybe because you are using a list. Try using buttons or anchor elemnts instead and wrap them in bootstrap class row like this: <div class="row">... buttons or anchors code ... </div>
i removed some classes until it became inline, you can use most of the original bootstrap classes i believe the classes in list elements etc were overriding display:inline
Nicholas Steffen
@nicksteffen94
Feb 05 2017 05:56
@alicankaralar @fortMaximus Thank you both! I removed the list and just set them as links and added a navbar inline css and now its starting to look the way I want!
CamperBot
@camperbot
Feb 05 2017 05:56
nicksteffen94 sends brownie points to @alicankaralar and @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
:cookie: 266 | @alicankaralar |http://www.freecodecamp.com/alicankaralar
h1tag
@h1tag
Feb 05 2017 05:58
@nicksteffen94 you can do it with list elements. Here's how: http://www.w3schools.com/css/css_navbar.asp
I didn't know that because I used buttons for my navigation bar but I think list elements are better for the navigation bar
Amit Patel
@AmitP88
Feb 05 2017 06:06
Hey guys, i'm working on my client's site and I need a little help. I just finished writing the for statements for my JSON to populate the menu items, but i'm trying to eliminate some repeating code (specifically the for statements at the end of menu.js) by creating a function that will generate the for statements. However, i'm having trouble coming up with a function to do this. The suggestion I got was to use the array of choice and the element that the data will be appended to as the parameters of the function, but beyond that, i'm a little lost as to how to write this. Repo: https://github.com/AmitP88/Khmer-Family-Cafe/tree/gh-pages Demo: https://amitp88.github.io/Khmer-Family-Cafe/
Thanks!
h1tag
@h1tag
Feb 05 2017 06:35
@Smuggles have you tried googling your question?
alican karalar
@alicankaralar
Feb 05 2017 06:36
carter looks like thurston moore
h1tag
@h1tag
Feb 05 2017 06:38
@Smuggles here's the first result I got (by googling: "how to center bullets in css") : http://stackoverflow.com/questions/5347833/centering-bullets-on-a-centered-list
c0d0er
@c0d0er
Feb 05 2017 09:38
@TylerMoeller thanks
CamperBot
@camperbot
Feb 05 2017 09:38
c0d0er sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1461 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
arvinsabares
@arvinsabares
Feb 05 2017 10:08
@AmitP88 you can optimize your code in menu.js if you wrap this in a function and pass in the following parameters:
columnXdish
menu.columnXdishes
columnXdish
#main-column-X
    for (var columnXdish in menu.columnXdishes) {
        var formattedPic = HTMLdishPic.replace("%data%", menu.columnXdishes[columnXdish].image);
        var formattedName = HTMLdishName.replace("%data%", menu.columnXdishes[columnXdish].name);
        var formattedPrice = HTMLdishPrice.replace("%data%", menu.columnxdishes[columnXdish].price);
        var formattedDescription = HTMLdishDescription.replace("%data%", menu.columnXdishes[columnXdish].description);

        var HTMLdishInfoContainer = '<div class="menu-info">' + formattedName + formattedDescription + formattedPrice + '</div>';
        var HTMLdishContainer = '<div class="row dish">' + formattedPic + HTMLdishInfoContainer + '</div>';

        $("#main-column-X").append(HTMLdishContainer);    
    }
jgendrinal
@jgendrinal
Feb 05 2017 10:29
Hi FCC! :) I need help with the following code: http://pastebin.com/hnfCKvqi
I couldn't get the button to work in the navbar when you click it, it doesn't budge to reveal the other items.
Super thank youuuuu
Nitin Chandran Nair
@NitinNair89
Feb 05 2017 10:30
where's the jquery and bootstrap.js included? @jgendrinal
jgendrinal
@jgendrinal
Feb 05 2017 10:33
Ohhhhhh @NitinNair89 thanks!!!
CamperBot
@camperbot
Feb 05 2017 10:33
jgendrinal sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 389 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
jgendrinal
@jgendrinal
Feb 05 2017 10:33
How do you give brownie points?
Nitin Chandran Nair
@NitinNair89
Feb 05 2017 10:35
when you thank someone, that person gets brownie points
did adding jquery work?
arvinsabares
@arvinsabares
Feb 05 2017 10:36
@NitinNair89 how do you receive brownie points? apparently i am unable to receive it =/
Nitin Chandran Nair
@NitinNair89
Feb 05 2017 10:36
You will get it now. Thanks @arvinsabares
CamperBot
@camperbot
Feb 05 2017 10:36
nitinnair89 sends brownie points to @arvinsabares :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for arvinsabares
Nitin Chandran Nair
@NitinNair89
Feb 05 2017 10:36
ahh
i think brownie points only for FCC members
Freecodecamp members
arvinsabares
@arvinsabares
Feb 05 2017 10:37
oh but i am a FCC member
you mean a paid member? @NitinNair89
Nitin Chandran Nair
@NitinNair89
Feb 05 2017 10:38
nope, i am a free member
on what challenge are you?
arvinsabares
@arvinsabares
Feb 05 2017 10:39
i finished html/css/jquery and skipped the tribute and portfolio challenge and now halfway though JS
jgendrinal
@jgendrinal
Feb 05 2017 10:40
wait, so you need get past a challenge?
Nitin Chandran Nair
@NitinNair89
Feb 05 2017 10:41
try completing the challenge.. i don't know
h1tag
@h1tag
Feb 05 2017 10:42
@arvinsabares did you change your name recently?
arvinsabares
@arvinsabares
Feb 05 2017 10:45
@fortMaximus nope. I don't think so.
Iñigo Casillas
@InigoCasillas
Feb 05 2017 11:04
Hey guys how can i make my website nice for every device?
Nitin Chandran Nair
@NitinNair89
Feb 05 2017 11:05
make it responsive
Iñigo Casillas
@InigoCasillas
Feb 05 2017 11:05
check it out please
macieqx
@macieqx
Feb 05 2017 12:01
Can anyone tell me why at 769-1024 font is not getting smaller (from 1.4rem to 1.0rem)?
Media query seems ok for me
http://codepen.io/macieqx/full/YNvrpM/
shreyas23sk
@shreyas23sk
Feb 05 2017 12:07
hello
Well, I ws making the product landing page, and i encountered some problems
WHy is the form element being covered by the header? and why can't i fix the header, rather than the nav, using position : fixed; ?
Michael Schmidt
@lafisrap
Feb 05 2017 12:23
@macieqx Write @media all and (max-width: 1024px) instead of @media all and (max-device-width: 1024px)
Michael Schmidt
@lafisrap
Feb 05 2017 12:30
@shreyas23sk float: right; should be with ul { ... }
Michael Schmidt
@lafisrap
Feb 05 2017 12:35

@shreyas23sk And to fix the menu also:
´´´

fcc_foldout_toggler {

position: fixed !important;
}

fcc_foldout_menu {

position: fixed !important;
}
´´´

Icah Banton
@remdata
Feb 05 2017 12:35
Good Morning all. How you make all your elements resize regardless of your screen size?
Michael Schmidt
@lafisrap
Feb 05 2017 12:37
@remdata Use vw and vh instead of px as unit. vw for relative to width, vh for relative to height.
Kmakks
@Kmakks
Feb 05 2017 12:41
HI guys
@lafisrap Can you give me some criticism in a portfolio
im making
Icah Banton
@remdata
Feb 05 2017 12:42
@lafisrap . thanks
CamperBot
@camperbot
Feb 05 2017 12:42
remdata sends brownie points to @lafisrap :sparkles: :thumbsup: :sparkles:
:cookie: 314 | @lafisrap |http://www.freecodecamp.com/lafisrap
Kmakks
@Kmakks
Feb 05 2017 12:42
I dont have someone to tell me what they would rate it
.
chavezn2004
@chavezn2004
Feb 05 2017 13:08
can anyone tell me where I can upload a picture of my codepen to add to one of my placeholders? I tried cloudinary but couldn't get that to work.
Desiree
@DizzysContent
Feb 05 2017 13:17
hello everyone... Im completely overwhelmed by this "build a tribute page". It's like i've lost all knowledge of what i've learned... can anyone give me some words of encouragement to help me through this?
playingwithinfinity
@playingwithinfinity
Feb 05 2017 13:20
Can someone help me with my Pomodoro clock's break timer? https://codepen.io/jimpix/pen/mRpRdj
Eric
@eric-ds
Feb 05 2017 13:20
It's perfectly fine to go back through some of the exercises and look elsewhere for information, that's part of what programming is about for me, being able to figure out how to do what I want to do. @DizzysContent
Phiggins567
@phiggins567
Feb 05 2017 13:21

I was wandering if someone could help. I'm trying to create a responsive navigation bar and when it is on small screens I want it to display icon (which it does). But I can't get it to show the rest of the menu when icon is clicked. any ideas?

http://codepen.io/phiggins567/pen/BpVovP

Desiree
@DizzysContent
Feb 05 2017 13:22
thanks @tanto11625 im on google the whole way to try figure out ways to make my pen look good
CamperBot
@camperbot
Feb 05 2017 13:22
dizzyscontent sends brownie points to @tanto11625 :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @tanto11625 |http://www.freecodecamp.com/tanto11625
Ashan Mohammed
@AshanMohammed
Feb 05 2017 13:41
hello guys,
i am trying to build a landing page for a mobile app. In that landing page i like to show the play store and app store statistics for the app (example; downloads count,reviews etc..). How do i achieve this?
Ruhul amin
@Ruhulcse
Feb 05 2017 14:09
hi
problem
taltmann42
@taltmann42
Feb 05 2017 14:18
@Ruhulcse in CSS you don't use the = to define styles, look at how it's done in .red-text. There's also an example in the instructions
Ruhul amin
@Ruhulcse
Feb 05 2017 14:19
@taltmann42 thank you very much.
CamperBot
@camperbot
Feb 05 2017 14:19
ruhulcse sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 458 | @taltmann42 |http://www.freecodecamp.com/taltmann42
problem
taltmann42
@taltmann42
Feb 05 2017 14:39
@Ruhulcse comments in html: <!-- stuff -->. Comments in CSS: /* stuff */
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 14:46
could someone help me with the UI of tic-tac-toe ?? I am drawing a blank ...
Tom
@moT01
Feb 05 2017 14:51
@Mr-Kumar-Abhishek i made a bunch of square divs
with borders on some sides
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 14:52
@moT01 how to make the options to choose x and o ??
Tom
@moT01
Feb 05 2017 14:52
i used radio buttons
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 14:53
@moT01 could you show me an example ??
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 15:00
@moT01 thanks :) it helped !
CamperBot
@camperbot
Feb 05 2017 15:00
mr-kumar-abhishek sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 496 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Feb 05 2017 15:01
anyone do the markdown previewer?
Nikita
@bukulele
Feb 05 2017 15:10
hello everyone! I'm working on my local weather app in codepen and "on click" function to switch celsius and farenheit temperature works only once, I don't understand why. Could somebody look in my code and give me any advice please? https://codepen.io/bukulele/pen/EZLZEP
Ruhul amin
@Ruhulcse
Feb 05 2017 15:10
https://www.freecodecamp.com/challenges/link-to-external-pages-with-anchor-elements#?solution=%0A%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%3E%0A%3Cstyle%3E%0A%20%20.red-text%20%7B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%7D%0A%0A%20%20h2%20%7B%0A%20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B%0A%20%20%7D%0A%0A%20%20p%20%7B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20font-family%3A%20Monospace%3B%0A%20%20%7D%0A%0A%20%20.thick-green-border%20%7B%0A%20%20%20%20border-color%3A%20green%3B%0A%20%20%20%20border-width%3A%2010px%3B%0A%20%20%20%20border-style%3A%20solid%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%0A%20%20.smaller-image%20%7B%0A%20%20%20%20width%3A%20100px%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Ch2%20class%3D%22red-text%22%3ECatPhotoApp%3C%2Fh2%3E%0A%0A%3Cimg%20class%3D%22smaller-image%20thick-green-border%22%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat%22%20alt%3D%22A%20cute%20orange%20cat%20lying%20on%20its%20back.%20%22%3E%0A%0A%3Cp%20class%3D%22red-text%22%3EKitty%20ipsum%20dolor%20sit%20amet%2C%20shed%20everywhere%20shed%20everywhere%20stretching%20attack%20your%20ankles%20chase%20the%20red%20dot%2C%20hairball%20run%20catnip%20eat%20the%20grass%20sniff.%3C%2Fp%3E%0A%3Cp%20class%3D%22red-text%22%3EPurr%20jump%20eat%20the%20grass%20rip%20the%20couch%20scratched%20sunbathe%2C%20shed%20everywhere%20rip%20the%20couch%20sleep%20in%20the%20sink%20fluffy%20fur%20catnip%20scratched.%3C%2Fp%3E%0A
where will i use anchor tag?
Cameron Burkholder
@Cameron-Burkholder
Feb 05 2017 15:15
I don't know why my "if" statement isn't running. It should run when the user has clicked the number of color squares equal to the number of turns in the turns array (arr.length == turns.length), but it isn't.
Tom
@moT01
Feb 05 2017 15:15
@bukulele it must be the test
not passing
Nikita
@bukulele
Feb 05 2017 15:19
@moT01 sorry, I don't understand what do you mean
Tom
@moT01
Feb 05 2017 15:20
i meant the if test
my first guess, ...not sure
makes it a lot easier for others to help if your code was properly indented
Tom
@moT01
Feb 05 2017 15:26
@bukulele worked for me using .html
Nikita
@bukulele
Feb 05 2017 15:29
@moT01 oh, perfect! thank you so much! it's also worked for me :)
CamperBot
@camperbot
Feb 05 2017 15:29
bukulele sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 497 | @mot01 |http://www.freecodecamp.com/mot01
Ruhul amin
@Ruhulcse
Feb 05 2017 15:34
@Cameron-Burkholder
Cameron Burkholder
@Cameron-Burkholder
Feb 05 2017 15:40
Yes? @Ruhulcse
Theodore P.
@Ierofantis
Feb 05 2017 16:06
Hi there. Anyone knows a way for showing my images on codepen? I was using imgur( I was hosting my images there) but now the codepen it gives my some 404 errors. As I ve read on google it has something to do with security block etc.
Michiel
@MichielHuijse
Feb 05 2017 16:09
@Ierofantis I do this with by posting the url of an image I want to show.
Gulsvi
@gulsvi
Feb 05 2017 16:11
@Ierofantis try https://postimage.org
Michiel
@MichielHuijse
Feb 05 2017 16:11
@Ierofantis <img src="the/url/image.jpeg id="blabla">
Theodore P.
@Ierofantis
Feb 05 2017 16:12
@MichielHuijse Unfortunatelly I cant do this. These images are customized in photoshop by me so i have to host them first
@SkyCoder01 I will give it a try thanks
CamperBot
@camperbot
Feb 05 2017 16:12
ierofantis sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 113 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Theodore P.
@Ierofantis
Feb 05 2017 16:12
@MichielHuijse thanks for the answer too
CamperBot
@camperbot
Feb 05 2017 16:12
ierofantis sends brownie points to @michielhuijse :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @michielhuijse |http://www.freecodecamp.com/michielhuijse
Llandy3d
@Llandy3d
Feb 05 2017 17:08
is there a simple way to show code snippets in an html page with code highlighted ?
Santiago Fernandez
@sf-jd
Feb 05 2017 17:13
style the element that contains the code to show it highlighted?
can set the element's background to black, font to terminal font, and emphasise the reserved words maybe
Llandy3d
@Llandy3d
Feb 05 2017 17:15
I see, I thought there was a tag that would have done that automatically but I was wrong
Santiago Fernandez
@sf-jd
Feb 05 2017 17:15
theres prolly some js plugin out there
and theres definetly some bootstrap class to deal with it as well
yep
Llandy3d
@Llandy3d
Feb 05 2017 17:16
oh, thanks a lot!
Santiago Fernandez
@sf-jd
Feb 05 2017 17:17
np
Spyrantis Theodoros
@thodorisanta
Feb 05 2017 17:19

So i started my calculator, any thoughts on how i should do the buttons position?

https://codepen.io/oshikurou/pen/jyKLyg?editors=1100

Dan
@MindWhys
Feb 05 2017 17:20
Hello all, I am trying to do the Local Weather website but I can't seem to access data from within the get.JSON function:
MarkABrady
@MarkABrady
Feb 05 2017 17:26
How do I add a png picture to Codepen from my downloaded pictures on my computer?
Tom
@moT01
Feb 05 2017 17:29
@MarkABrady gotta upload it to somewhere
you can upload to codepen if your a pro member i believe, which costs money, ...so i would upload it somewhere else and link to it
MarkABrady
@MarkABrady
Feb 05 2017 17:31
@moT01 upload it to somewhere else and link to it? How is that done? Do I need a site on the web?
JC Awe
@qjawe
Feb 05 2017 17:33
Hello
Tom
@moT01
Feb 05 2017 17:33
upload it to a photo site, ...like photobucket or one of the other million, ...find the url that will then take you right to that photo, copy the url, ..and use it in your code to grab the image
MarkABrady
@MarkABrady
Feb 05 2017 17:34
I got it!
It's from a free site. I just right clicked on the image, copied the image address, and put that address into the src.
@moT01 thanks!
CamperBot
@camperbot
Feb 05 2017 17:35
markabrady sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 499 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Feb 05 2017 17:42
@MindWhys any luck?
i was unable to get anything from the url, ...by going to it in the browser
Dan
@MindWhys
Feb 05 2017 17:46
@moT01 no luck so far...weird...the url is the only bit that works for me
Tom
@moT01
Feb 05 2017 17:47
k, this time it worked
Dan
@MindWhys
Feb 05 2017 17:51
@moT01 I'm glad something works at least
arief hussain
@arieftec
Feb 05 2017 18:11
hello all
Dan
@MindWhys
Feb 05 2017 18:13
@arieftec hello
JC Awe
@qjawe
Feb 05 2017 18:14
Hi
Dan
@MindWhys
Feb 05 2017 18:14
@qjawe Helo
JC Awe
@qjawe
Feb 05 2017 18:15
Hi @MindWhys any comments on this http://jcawe.co/NUS-EduTech-SATDev/
arief hussain
@arieftec
Feb 05 2017 18:16
hi all
hello @MindWhys
Dan
@MindWhys
Feb 05 2017 18:23
@qjawe looks very slick :)
JC Awe
@qjawe
Feb 05 2017 18:24
Thanks just a template
Want to improve it using CDN bootstrap instead
Dan
@MindWhys
Feb 05 2017 18:24
@qjawe are you doing a project for that company or is it your own website?
I am afraid that it looks like you are far further ahead with programming that myself
JC Awe
@qjawe
Feb 05 2017 18:35
I'm still learning bootstrap
And is for the NUS EduTech Hackathon over the weekend
normaliz3
@normaliz3
Feb 05 2017 19:06
hi guys :) i have a container with a jumbotron and a well with col-md-12.. and im trying to get the body 50px from the top down. and my css is this .body{margin-top 50px;} isnt that the right way?
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
like that
do i need to turn on the css in codepen or something?
aj-willi
@aj-willi
Feb 05 2017 19:09
try margin-bottom
normaliz3
@normaliz3
Feb 05 2017 19:10
no it have to be margin-top because i want the container down from the top of the site.
aj-willi
@aj-willi
Feb 05 2017 19:11
idk bro
normaliz3
@normaliz3
Feb 05 2017 19:12
but do i maby have to turn on the css or something?
aj-willi
@aj-willi
Feb 05 2017 19:12
try <br></br>
makes space
Spyrantis Theodoros
@thodorisanta
Feb 05 2017 19:12

so im doing the calculator project and i had to arrange the height of the buttons manually (talking about the 0 buttonand the = button). is there a way for the site to take the height of the other buttons near them and adjust them?

https://codepen.io/oshikurou/pen/WRyJwm?editors=1100

aj-willi
@aj-willi
Feb 05 2017 19:12
what editor you are using?
use sublime text or brackets it's good for live preview
normaliz3
@normaliz3
Feb 05 2017 19:12
codepen
aj-willi
@aj-willi
Feb 05 2017 19:13
codepen is shit tbh
normaliz3
@normaliz3
Feb 05 2017 19:13
yes it is but i dont have to add the bootstrap then xD
aj-willi
@aj-willi
Feb 05 2017 19:14
fair enough
normaliz3
@normaliz3
Feb 05 2017 19:14
but i have brackets :+1: gonna use that :P
aj-willi
@aj-willi
Feb 05 2017 19:15
try adding <br></br> where you want space, it will lower the bottom
normaliz3
@normaliz3
Feb 05 2017 19:16
that is true but margin-top should work xD what ever i gonna use brackets :D
Dan
@MindWhys
Feb 05 2017 19:28
@normaliz3 have you tried padding-top: 50px; ?
normaliz3
@normaliz3
Feb 05 2017 19:29
@MindWhys i just did this and it worked .container {
margin-top: 60px;
}
Dan
@MindWhys
Feb 05 2017 19:30
@normaliz3 I'm glad it worked :)
Spyrantis Theodoros
@thodorisanta
Feb 05 2017 19:43

so im doing the calculator project and i had to arrange the height of the buttons manually (talking about the 0 buttonand the = button). is there a way for the site to take the height of the other buttons near them and adjust them?

https://codepen.io/oshikurou/pen/WRyJwm?editors=1100

Mettenoi
@Mettenoi
Feb 05 2017 19:54

This does not show up as a grid, but just as a list with bullets:

<ul class="small-block-grid-3">
<li><img src="https://i.ytimg.com/vi/l_zKpdIZi5s/maxresdefault.jpg" height="150"></li>
<li><img src="https://i.ytimg.com/vi/ohajf5PK-qs/maxresdefault.jpg" height="150"></li>
</ul>

Any help would be appreciated :)
Dan
@MindWhys
Feb 05 2017 20:07
@Mettenoi hi...at the moment you are creating an UnorderedList. That is what UL stands for
LI stands for List Item
You need it to look more like this:html
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:10
could some one help me figure out why my game is not clearing the board properly after two rounds of the game https://github.com/Mr-Kumar-Abhishek/tic-tac-toe/blob/dev/js/main.js
Dan
@MindWhys
Feb 05 2017 20:10

'''html

<table>
<thead>
<tr>
<th>Pet name</th>
<th>Species</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Black & white</td>
<td>rabbit</td>
<td>black and white</td>
</tr>
<tr>
<td>Daemon</td>
<td>cat</td>
<td>black</td>
</tr>
<tr>
<td>Angel</td>
<td>cat</td>
<td>orange</td>
</tr>
</tbody>
</table>
'''

CamperBot
@camperbot
Feb 05 2017 20:10
:bulb: to format code use backticks! ``` more info
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:10
oops
normaliz3
@normaliz3
Feb 05 2017 20:11
yo wassup. im in codepen now. and when im i the editor and writing code. all the text and picture i have is in the center becuause i used <div class="text-center"></div> but if i change to full view it is not in center, it's on the left side... is thast a bug or what?
Dan
@MindWhys
Feb 05 2017 20:11
<table>
            <thead>
                <tr>
                    <th>Pet name</th>
                    <th>Species</th>
                    <th>Color</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Black & white</td>
                    <td>rabbit</td>
                    <td>black and white</td>
                </tr>
                <tr>
                    <td>Daemon</td>
                    <td>cat</td>
                    <td>black</td>
                </tr>
                <tr>
                    <td>Angel</td>
                    <td>cat</td>
                    <td>orange</td>
                </tr>
            </tbody>
        </table>
Mettenoi
@Mettenoi
Feb 05 2017 20:11
@MindWhys Sorry, I am not sure I know what to do. What should it look like instead?
Dan
@MindWhys
Feb 05 2017 20:12
@Mettenoi apologies, see above...you need to use the key words <table> <thead> etc
<table</table> establishes the beginning and end of your table
<thead></thead> is where you put the labels for each section of your table
Mettenoi
@Mettenoi
Feb 05 2017 20:13
@MindWhys And the table is the whole grid?
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:13
@normaliz3 depends ... your code ??
Dan
@MindWhys
Feb 05 2017 20:13
@Mettenoi try cutting and pasting in my code and see how it looks
Jacob Leatherwood
@dadleatherwood
Feb 05 2017 20:14
Can someone help me with the photo in my jumbotron element? I want it to adjust when I scale up or down, and I want it to be a circle. Thank you!! http://codepen.io/dadleatherwood/pen/vgrpov
Mettenoi
@Mettenoi
Feb 05 2017 20:15
@MindWhys Yes, I see. And I can just ad images instead of text?
normaliz3
@normaliz3
Feb 05 2017 20:15
@Mr-Kumar-Abhishek <div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">
<h1 class="text-center">Gerard James Butler</h1>
<h2 class="text-center"><em>The man who went from studying law to acting.</em></h2>
<div class="thumbnail">
<div class="text-center">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjE4NDMwMzc4Ml5BMl5BanBnXkFtZTcwMDg4Nzg4Mg@@._V1_UY317_CR6,0,214,317_AL_.jpg">
<div class="caption text-center"><em>Actor, producer and singer</em>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Dan
@MindWhys
Feb 05 2017 20:15
@Mettenoi honestly, I have never tried to add images to it...see if it works
alpox
@alpox
Feb 05 2017 20:16
@Mettenoi In td and th elements you can put any valid html
Mettenoi
@Mettenoi
Feb 05 2017 20:17
@MindWhys Thanks I will try.
CamperBot
@camperbot
Feb 05 2017 20:17
mettenoi sends brownie points to @mindwhys :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @mindwhys |http://www.freecodecamp.com/mindwhys
Mettenoi
@Mettenoi
Feb 05 2017 20:17
@alpox Thanks so much :)
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:18
@normaliz3 hm... only class do something else is the the thumbnail class.... give the codepen link ...
@normaliz3 hm... only class to do something else is the thumbnail class.... give the codepen link ...
Dan
@MindWhys
Feb 05 2017 20:19
@alpox can you help me with my Local Weather Website?
normaliz3
@normaliz3
Feb 05 2017 20:19
@Mr-Kumar-Abhishek i cant get the thumbnail class to work either
@Mr-Kumar-Abhishek i cant fix the thumbnail part with custom settings, but it's anying that the page is center in edit mode but not in fullscreen...?
alpox
@alpox
Feb 05 2017 20:22
@MindWhys Depends on your needs
Dan
@MindWhys
Feb 05 2017 20:23
Please have a look, I can't seem to get it to access the JSON
https://codepen.io/MindWhys/pen/RKJLeP?editors=1011
Mettenoi
@Mettenoi
Feb 05 2017 20:24
Does anybody know how to make a grid with images, that will adjust to the size of the screen? So one image will jump down on the next row of the grid, if the screen is small.
Dan
@MindWhys
Feb 05 2017 20:25
@Mettenoi I think you might be looking for flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:25
@normaliz3 it looks okay in full screen too... you just need to add some more classes for col-xs-12 div to make it more responsive
Mettenoi
@Mettenoi
Feb 05 2017 20:26
@MindWhys Thanks again. The other thing worked as well, I just need it to be flexible :)
CamperBot
@camperbot
Feb 05 2017 20:26
mettenoi sends brownie points to @mindwhys :sparkles: :thumbsup: :sparkles:
:warning: mettenoi already gave mindwhys points
alpox
@alpox
Feb 05 2017 20:26
@MindWhys Add &callback=? at the end of your url
chrnzhng
@chrnzhng
Feb 05 2017 20:26
Could really use some help
thanks
Dan
@MindWhys
Feb 05 2017 20:26
I actually mean to try flexbox soon...let me know how it works out :)
normaliz3
@normaliz3
Feb 05 2017 20:27
@Mr-Kumar-Abhishek it is not in center for me in fullscreen -.- maby a bug or something? how do i make it more responsive? like col-md-12 or somethin so its xsmall and medium?
Gulsvi
@gulsvi
Feb 05 2017 20:29
nvm, I used position absolute to fix it
Patrick
@SweetmanTech
Feb 05 2017 20:30
@chrnzhng what part of your code do you need help with?
normaliz3
@normaliz3
Feb 05 2017 20:31
@Mr-Kumar-Abhishek like this? <div class="col-xs-12 col-md-12"> ?
Dan
@MindWhys
Feb 05 2017 20:31
@alpox oh my! thank you! I have been stuck on that for ages! What did that bit of code do?
CamperBot
@camperbot
Feb 05 2017 20:31
mindwhys sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 764 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Feb 05 2017 20:38

@MindWhys Your problem was:

XMLHttpRequest cannot load https://api.darksky.net/forecast/db0c9ddd914db9247c920a50e9ecec2e/47.6804336,9.191270099999999?exclude=minutely,hourly,daily,alerts,flags. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

The typical CORS (Cross Origin Request Sharing) issue.
The browser does not allow requests to foreign domains unless the request domain explicitly allows it.

The only ways to come around that are:

  1. The origin requested has to set the Access-Control-Allow-Origin header for you (Unlikely that they will do that for you ;-) )
  2. You use JSONP requests instead of JSON requests (This is what you do with &callback=? since jQuery sees that query parameter and infers from it that you want to do a JSONP request. I won't go into detail now how JSONP works, just keep in mind that its not secure.)
  3. Use a proxy server (As example crossorigin.me) which proxies your request and sets the access headers for you. This is a more secure option, but slows down traffic because it has to go through an additional endpoint.
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:41
@normaliz3 http://codepen.io/Mr-Kumar-Abhishek/pen/oByyBJ use classes to make it more responsive for larger screens ....
@normaliz3 refer here to understand how grid system works http://getbootstrap.com/css/#grid-options
hernanfinucci
@hernanfinucci
Feb 05 2017 20:42
why doesnt my img prepended to #location load?
Dan
@MindWhys
Feb 05 2017 20:43
@alpox Thanks again for taking the time to explain that. How come FreeCodeCamp gets us to do a project that requires you to use insecure API's?
CamperBot
@camperbot
Feb 05 2017 20:43
mindwhys sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: mindwhys already gave alpox points
normaliz3
@normaliz3
Feb 05 2017 20:45
@Mr-Kumar-Abhishek i know the grid system, but it is so anying that it is not centered in full screen. and that the thumbnail doesent work. because codepen is using bootstrap 4.0 alpha -.-""""
taltmann42
@taltmann42
Feb 05 2017 20:46
@normaliz3 as far as I know, codepen doesn't use bootstrap at all on its own, it loads the CSS you provide in the settings, so you can just use bootstrap 3 if you want
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:46
@normaliz3 you could set codepen to use any version of bootstrap (between check the codepen link which I gave )
@normaliz3 just go the settings and change the CDN link to your desired choice of front end framework
normaliz3
@normaliz3
Feb 05 2017 20:47
@taltmann42 i know i have to set it to use bootstrap :D
but when i add bootstrap it adding the alpha 4.0
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:48
@normaliz3 add the CDN links manually ~
taltmann42
@taltmann42
Feb 05 2017 20:48
@normaliz3 https://www.bootstrapcdn.com/ use a link from there instead of using the provided list
normaliz3
@normaliz3
Feb 05 2017 20:48
okei :)
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:49
taltmann42
@taltmann42
Feb 05 2017 20:49
or don't use bootstrap at all and make your own gridsystem :D
normaliz3
@normaliz3
Feb 05 2017 20:49
there we go :D
got it to work now :)
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:50
normaliz3
@normaliz3
Feb 05 2017 20:50
but is it bether for me to try to use the alpha and learn that? because it prob gonna come out soon
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:50
making your own gridsystem is good
it cuts off the extra css
loads pages faster ~
normaliz3
@normaliz3
Feb 05 2017 20:51
okei <.9
:) *
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:52
I cannot figure out why it is not clearing the board after two rounds ...
alpox
@alpox
Feb 05 2017 20:54
@MindWhys Its not the APIs which are insecure, its the request. You can use crossorigin.me to be more secure.
taltmann42
@taltmann42
Feb 05 2017 20:56
@Mr-Kumar-Abhishek I currently can't help you with the clearing but I had a suggestion for cleaning up the code a bit if you don't mind?
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 20:57
:)
@taltmann42 I am all ears
Dan
@MindWhys
Feb 05 2017 20:58
@alpox cool, so should I add http://crossorigin.me/ to the start of the url instead of what you sugested before?
taltmann42
@taltmann42
Feb 05 2017 21:01

@Mr-Kumar-Abhishek you can minimize the code a lot in these functions:

$("#1").click(function(){
            if( TICTACTOE.percieve.isBlockEmpty(1) == true ){

                $(this).html(TICTACTOE.playerSign);
                TICTACTOE.boardFill[0] = 2;
                TICTACTOE.events.afterUserClick();
            }
        });
        $("#2").click(function(){
            if ( TICTACTOE.percieve.isBlockEmpty(2) == true ){

                $(this).html(TICTACTOE.playerSign);
                TICTACTOE.boardFill[1] = 2;
                TICTACTOE.events.afterUserClick();
            }
        });
...and so on

just use $(".tic-tac-box"), inside the function get the box to fill with $(this).index()

So it all can be reduced to this:

userClick: function(){
        $(".tic-tac-box").click(function(){
                       var boxIndex = $(this).index();
            if( TICTACTOE.percieve.isBlockEmpty(boxIndex+1) == true ){

                $(this).html(TICTACTOE.playerSign);
                TICTACTOE.boardFill[boxIndex] = 2;
                TICTACTOE.events.afterUserClick();
            }
        });
}
@Mr-Kumar-Abhishek and I've seen a selector $("#1, #2, #3, ...") - just use $(".tic-tac-box") for that one too. If it only works for one box then, you can still use $(".tic-tac-box").each(function(){...});
alican karalar
@alicankaralar
Feb 05 2017 21:05
hey...
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 05 2017 21:06
@taltmann42 thanks :) I will short them out ~
CamperBot
@camperbot
Feb 05 2017 21:06
mr-kumar-abhishek sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 459 | @taltmann42 |http://www.freecodecamp.com/taltmann42
alican karalar
@alicankaralar
Feb 05 2017 21:06
im stuck at one point
how do we wire an <input> elements value to api request? without using a submit button. when the user presses enter it should make an api request
taltmann42
@taltmann42
Feb 05 2017 21:07
@alicankaralar is the input inside a form element?
alican karalar
@alicankaralar
Feb 05 2017 21:07
no @taltmann42 because form element kinda messes things up
i couldn't find a way around it
taltmann42
@taltmann42
Feb 05 2017 21:08
@alicankaralar jep that's because the default behaviour of a form is loading a new page. But you can prevent the browser from doing that, when making an event-listener for the submit-event; do you use jquery or plain JS?
alican karalar
@alicankaralar
Feb 05 2017 21:08
well i prefer plain js
but i have jquery in my code
document.getElementById('searchbar').value
so this is the value i guess
searchbar being the input element
taltmann42
@taltmann42
Feb 05 2017 21:10
okay plain JS is no problem. You should add the form again, and assuming it has an ID of "searchform" you can do that:
document.getElementById("searchform").addEventListener("submit", function(event){
   event.preventDefault(); //this prevents the form from reloading the page
  //get your input value here and make the api-call
});
@alicankaralar
alican karalar
@alicankaralar
Feb 05 2017 21:10
wow
thanks @taltmann42
CamperBot
@camperbot
Feb 05 2017 21:11
alicankaralar sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 460 | @taltmann42 |http://www.freecodecamp.com/taltmann42
taltmann42
@taltmann42
Feb 05 2017 21:11
:thumbsup:
alican karalar
@alicankaralar
Feb 05 2017 21:11
so i have to prevent default
taltmann42
@taltmann42
Feb 05 2017 21:12
yep
alican karalar
@alicankaralar
Feb 05 2017 21:12
what about using only input
i mean without form
taltmann42
@taltmann42
Feb 05 2017 21:12
then you'd have to listen for the keyup event and check if the keycode is the one from the enter-key
or keydown, whatever you prefer
keypress works too :D
alican karalar
@alicankaralar
Feb 05 2017 21:13
hmm i tried document.keypress(function(e) { if (e.which===13) { } });
taltmann42
@taltmann42
Feb 05 2017 21:14
i think you're mixing up plain JS and jQuery
alican karalar
@alicankaralar
Feb 05 2017 21:14
ah yes sorry i forgot its $(document). in the beginning
taltmann42
@taltmann42
Feb 05 2017 21:15
okay, and that didn't work?
alican karalar
@alicankaralar
Feb 05 2017 21:15
yes it didn't somehow
let me restore my code and paste a codepen
alpox
@alpox
Feb 05 2017 21:15
@MindWhys If you'd like, yes. These little projects from fcc don't require so much security though :-)
alican karalar
@alicankaralar
Feb 05 2017 21:18
@taltmann42 somehow now it works but i have another error :)
but a second
now when you run press enter - in the inspector- (dev tools chrome), you can see in the console i am not allowed access
alican karalar
@alicankaralar
Feb 05 2017 21:23
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:50091' is therefore not allowed access.
so i need to provide a user-agent
taltmann42
@taltmann42
Feb 05 2017 21:24
it also doesn't work from codepen so wikipedia is blocking the request - do they expect an API key? didn't work with it yet

@alicankaralar from the documentation:

// Using XMLHttpRequest
xhr.setRequestHeader( 'Api-User-Agent', 'Example/1.0' );

apparently you really have to use a unique user agent

hmm that doesn't help either. maybe someone else who already did the wikipedia-viewer can help
alican karalar
@alicankaralar
Feb 05 2017 21:27
yes i did that but yeah doesn't do it for me
it needs access-control-allow-origin
taltmann42
@taltmann42
Feb 05 2017 21:28
as far as I know, this is up to the provider of the API to determine if the request is eligible to actually request that resource
alican karalar
@alicankaralar
Feb 05 2017 21:29
hmm
alican karalar
@alicankaralar
Feb 05 2017 21:32
@voxgranular thanks!
CamperBot
@camperbot
Feb 05 2017 21:32
alicankaralar sends brownie points to @voxgranular :sparkles: :thumbsup: :sparkles:
:cookie: 254 | @voxgranular |http://www.freecodecamp.com/voxgranular
alican karalar
@alicankaralar
Feb 05 2017 21:32
@taltmann42 thanks you too :)
CamperBot
@camperbot
Feb 05 2017 21:32
alicankaralar sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:warning: alicankaralar already gave taltmann42 points
voxgranular
@voxgranular
Feb 05 2017 21:33
@alicankaralar no problem, just finished that one myself :-)
alican karalar
@alicankaralar
Feb 05 2017 21:38
looks good :)
hey how much did this assignment take you
the shuffle icon is a good idea :)
voxgranular
@voxgranular
Feb 05 2017 21:40
@alicankaralar thanks! How much time? I'm not sure, did it over a couple of evenings.
CamperBot
@camperbot
Feb 05 2017 21:40
voxgranular sends brownie points to @alicankaralar :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @alicankaralar |http://www.freecodecamp.com/alicankaralar
alican karalar
@alicankaralar
Feb 05 2017 21:44
looks very nice and the code is good :)
voxgranular
@voxgranular
Feb 05 2017 21:52
ty :)
Icah Banton
@remdata
Feb 05 2017 21:59
Hello. I want to add div elements to my html elements using jQuery and CSS. Dose anyone know of a good online source where I can learn about this? Is this even possible?
Paulo Tokimatu
@paulotokimatu
Feb 05 2017 22:03
@remdata You can use .html or .append
http://api.jquery.com/append/
Icah Banton
@remdata
Feb 05 2017 22:08
@paulotokimatu . Thanks. Can this be done in conjunction with CSS?
CamperBot
@camperbot
Feb 05 2017 22:08
remdata sends brownie points to @paulotokimatu :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @paulotokimatu |http://www.freecodecamp.com/paulotokimatu
Paulo Tokimatu
@paulotokimatu
Feb 05 2017 22:10
@remdata You can write a html component with styling or set a class for the element
So yeah, it would work as you are thinking, I guess
Icah Banton
@remdata
Feb 05 2017 22:12
@paulotokimatu . Do you know of a source where I can learn about it?
alpox
@alpox
Feb 05 2017 22:13
@remdata Any CSS tutorial on the web
Paulo Tokimatu
@paulotokimatu
Feb 05 2017 22:13
@remdata Check the link I sent you before
Icah Banton
@remdata
Feb 05 2017 22:19
@alpox . Which one(s) do you recommend?
alpox
@alpox
Feb 05 2017 22:21
@remdata No specific one, i never used one. I usually learn by doing. Try to tackle some task and as soon as i hit the brick i google what i need
Icah Banton
@remdata
Feb 05 2017 22:25
@alpox. Thanks. I do the same thing but sometimes it helps to know which sources are good sources.
CamperBot
@camperbot
Feb 05 2017 22:25
remdata sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 765 | @alpox |http://www.freecodecamp.com/alpox
Gulsvi
@gulsvi
Feb 05 2017 22:27

@remdata with .html(), you can write everything just as you would normally:

$('body').html(
  `<div class="row">
      some text
    <div class="col-xs-4">some text</div>
    <div class="col-xs-4">some text</div>
    <div class="col-xs-4">some text</div>
  </div>`
);

You could write your entire page this way on document.ready if desired. It's what I just did with my wikipedia viewer. Nothing in the HTML panel at all. https://codepen.io/skycoder/pen/GrGQdJ

Cameron Burkholder
@Cameron-Burkholder
Feb 05 2017 22:28

My Simon Game somewhat works, but the code sequences have strange behavior. The first and second sequences run without a hitch, but after that, the game runs erratically and I cannot isolate the problem. Can anyone spot what causes the bahavior?

http://codepen.io/CameronBurkholder/pen/ggKrdr?editors=0010

Robin
@LuckyRabbits
Feb 05 2017 22:31
Hi again, I need your help. The dropdown caret in my navbar isn't responding. Can someone take a 👀 ? Here is my code: http://codepen.io/luckyrabbit/pen/MJXVzd?editors=1100
kanchanachalla
@kanchana9
Feb 05 2017 22:35
Any inputs on how to start a tic tac toe development?
Gulsvi
@gulsvi
Feb 05 2017 22:37
@LuckyRabbits your </li> is closed too early on line 25, move it after the first </ul> on line 31. Also, add jQuery and bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
Clyde Lobo
@oppiniated
Feb 05 2017 22:38
@LuckyRabbits You had an issue with the html. Also you had not included jquery and bootstrap js. I've forked it
Robin
@LuckyRabbits
Feb 05 2017 22:39
err..you're gonna laugh..what do you mean when you say you've Forked it? @oppiniated
Clyde Lobo
@oppiniated
Feb 05 2017 22:40
@LuckyRabbits You can fork.. or create a copy of a pen. I've created a copy of your pen and fixed it
Icah Banton
@remdata
Feb 05 2017 22:41
@SkyCoder01 . Thanks. appreciate it. I was just looking at alternate ways of doing that ie. with CSS.
CamperBot
@camperbot
Feb 05 2017 22:41
remdata sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 117 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Robin
@LuckyRabbits
Feb 05 2017 22:42
Now that you've made a fork how can I access that copy? @oppiniated
Derp
NVM
I see it
Gulsvi
@gulsvi
Feb 05 2017 22:43
@remdata It's similar with .css():
$('body').html(
  `<p>Hello World!</p>`
);

$('body').css({
  'color': 'red',
  'font-weight': 'bold',
  'font-size': '24px',
  'text-align': 'center'
});
Icah Banton
@remdata
Feb 05 2017 22:46
@SkyCoder01 . examples help a lot.
alpox
@alpox
Feb 05 2017 22:47
@remdata My top sources are MDN and Stackoverflow when it comes to webdev (Stackoverflow for all programming stuff)
DatBread
@DatBread
Feb 05 2017 22:49
hey guys,
I am having an issue here. I have a content div and a sidebar div on the right side. I am trying to set the height of the sidebar the same as the content div, but i can't figure out how to achive that. The height attribute in the css won't even apply on the image.
And my list in the footer isn't align't horizontaly having a row div with 4 * col-md-3
https://codepen.io/HighSan/pen/QdreeE
any help appreciated
Robin
@LuckyRabbits
Feb 05 2017 22:50
@oppiniated I coped that HTML from the forked version and added bootstrap. I added https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css but the dropdown still isn't responding
Which jQuery should I use?
:(
Icah Banton
@remdata
Feb 05 2017 22:56
@SkyCoder01. I use Stackoverflow as well. Will consider MDN.
Moisés Man
@moigithub
Feb 05 2017 22:56
@LuckyRabbits bootstrap have some static component and dynamic componenets
for thos dynamic compoenents it uses jquery.. and bootstrap.js libraries u need to add on ur codepen JS settings
Robin
@LuckyRabbits
Feb 05 2017 22:58
@moigithub Yup I've added it from the gear icon next to JS
@moigithub It not working tho
Moisés Man
@moigithub
Feb 05 2017 22:58
chek what version its adding
Robin
@LuckyRabbits
Feb 05 2017 23:00
NVM I looked at the settings from the forked version.
Gulsvi
@gulsvi
Feb 05 2017 23:00
@LuckyRabbits Look at the pen that @oppiniated wrote for you and copy/paste the jquery links they used: http://s.codepen.io/clydelobo/pen/zNaLjO?editors=1100
Robin
@LuckyRabbits
Feb 05 2017 23:01
Thank you @moigithub @SkyCoder01 @oppiniated for the guidance
CamperBot
@camperbot
Feb 05 2017 23:01
luckyrabbits sends brownie points to @moigithub and @skycoder01 and @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 118 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 547 | @oppiniated |http://www.freecodecamp.com/oppiniated
:star2: 2659 | @moigithub |http://www.freecodecamp.com/moigithub
Robin
@LuckyRabbits
Feb 05 2017 23:02
:)
It works now WOOOOWHOOO!
danper2213
@danper2213
Feb 05 2017 23:20
Hi everyone, I have some question about ("Build a Tribute Page"). i can choose any person? and
Robin
@LuckyRabbits
Feb 05 2017 23:21
@danper2213 Of course! Choose anyone.
danper2213
@danper2213
Feb 05 2017 23:25
and i have that follow the same structure about the "time line" or i can change?.
Robin
@LuckyRabbits
Feb 05 2017 23:26
You would need to check off all of the story point checkboxes to clear the coding project--so yes.
ObjectiveCFido
@ObjectiveCFido
Feb 05 2017 23:30
Anyone know how I could either move a Bootstrap carousel down or scale down the height? It's covering my navbar.
Amit Patel
@AmitP88
Feb 05 2017 23:35
@arvinsabares Thank you, I will try that :)
CamperBot
@camperbot
Feb 05 2017 23:35
amitp88 sends brownie points to @arvinsabares :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for arvinsabares
ObjectiveCFido
@ObjectiveCFido
Feb 05 2017 23:37
Anyone know how I could either move a Bootstrap carousel down or scale down the height? It's covering my navbar.
Robin
@LuckyRabbits
Feb 05 2017 23:37
@ObjectiveCFido maybe increase the CSS body{ margin-top} ?
ObjectiveCFido
@ObjectiveCFido
Feb 05 2017 23:37
@LuckyRabbits Ok let me try that
Roberto Di Lillo
@koop4
Feb 05 2017 23:37
Hi all
Robin
@LuckyRabbits
Feb 05 2017 23:38
👋🏼
ObjectiveCFido
@ObjectiveCFido
Feb 05 2017 23:39
@LuckyRabbits Thanks! It worked
CamperBot
@camperbot
Feb 05 2017 23:39
objectivecfido sends brownie points to @luckyrabbits :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @luckyrabbits |http://www.freecodecamp.com/luckyrabbits
danper2213
@danper2213
Feb 05 2017 23:41
@LuckyRabbits Thank you !
CamperBot
@camperbot
Feb 05 2017 23:41
danper2213 sends brownie points to @luckyrabbits :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @luckyrabbits |http://www.freecodecamp.com/luckyrabbits