These are chat archives for FreeCodeCamp/HelpFrontEnd

5th
Apr 2017
yuggup
@yuggup
Apr 05 2017 00:25
I cannot get my image onto my page
is something wrong with this anyone?
<img src="https://pixabay.com/en/money-mongolia-currency-bank-756633/">
yuggup
@yuggup
Apr 05 2017 00:28
lol.
i just need a picture of genghis khan
couldn't get the wikipedia image link to work either
Roxroy
@roxroy
Apr 05 2017 00:29
@yuggup , you have right click and select get url
yuggup
@yuggup
Apr 05 2017 00:30
Thank yooooou
Saboor Malik
@MathematicsCoding
Apr 05 2017 00:57
Hey how do I add an image to background?
is it possible?
Darren Kam
@darrenk1801
Apr 05 2017 00:59
@MathematicsCoding Yes, it is possible. You would use the background-image property on the body element of your page. https://www.w3schools.com/cssref/pr_background-image.asp
Saboor Malik
@MathematicsCoding
Apr 05 2017 01:00
What about <body background ="URL">
Darren Kam
@darrenk1801
Apr 05 2017 01:01
@MathematicsCoding You could take that route too, but CSS is the standard nowdays. If you do want to apply the background image using HTML, you'd use that.
Saboor Malik
@MathematicsCoding
Apr 05 2017 01:01
Okay
So i just add URL to it right?
Darren Kam
@darrenk1801
Apr 05 2017 01:02
@MathematicsCoding Which method are you using?
Saboor Malik
@MathematicsCoding
Apr 05 2017 01:03
HTML
I did it but image is too big
I can only see half of it
Never mind I can just use texture image instead
Darren Kam
@darrenk1801
Apr 05 2017 01:05
@MathematicsCoding Okay, use whatever works best for your project.
Saboor Malik
@MathematicsCoding
Apr 05 2017 01:05
Yeah im working on random quote machine
I just want to do designs first
Johnny
@jtan3
Apr 05 2017 01:06
@MathematicsCoding you can always resize the background. https://css-tricks.com/almanac/properties/b/background-size/
Gulsvi
@gulsvi
Apr 05 2017 01:06
If you're using codepen, don't add the <body> tag, they add it for you
Saboor Malik
@MathematicsCoding
Apr 05 2017 01:07
Hm
What do you think?
Jeremy Fleshman
@JFles
Apr 05 2017 01:07
Can anyone explain why the random quote API returns the same quote using jQuery in Chrome, but it returns randomized when tested in Edge?
https://codepen.io/jfleshman/pen/gLdKeo
Darren Kam
@darrenk1801
Apr 05 2017 01:08
@MathematicsCoding So you are using CSS in your project. You should use it then! It would make it much easier for you to make the background image fit.
Saboor Malik
@MathematicsCoding
Apr 05 2017 01:08
Yeah
I think design is good for now
Im going to work on random quote API...
Saboor Malik
@MathematicsCoding
Apr 05 2017 01:15
...
I cant get this button to center
Never mind it was for text only
Why cant I add font awesome to this button?
j1417
@j1417
Apr 05 2017 01:47
hi! which tool can i use for the graphical interface in the simons game challenge????
Ive made it with css but it is really ugly....
Saboor Malik
@MathematicsCoding
Apr 05 2017 01:51
@j1417 Can I see
Jeremy Fleshman
@JFles
Apr 05 2017 01:52
@MathematicsCoding did you figure it out?
Saboor Malik
@MathematicsCoding
Apr 05 2017 01:52
@JFles Yeah
Saboor Malik
@MathematicsCoding
Apr 05 2017 01:52
I added bootstrap under css setting
@j1417 Nice desings
j1417
@j1417
Apr 05 2017 01:53
?
Saboor Malik
@MathematicsCoding
Apr 05 2017 01:53
Maybe that white circle should be completly white? try to make it better
desgins*
Wtf what the correct word?
design
@j1417 The designs is better but It would be cool if you made the design like this http://www.virtual-pet-game.com/images/Games/Simon/Simon.svg
With three buttons but it is fine..
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:10
Is anyone on?
Gulsvi
@gulsvi
Apr 05 2017 02:10
Hi @MathematicsCoding
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:10
@SkyCoder01 Hey
Why wont this API works?
Why wont Quotes turn to different word..
Gulsvi
@gulsvi
Apr 05 2017 02:11
$ is not defined is the error I get
Means you don't have jQuery
Ctrl+Shift+J to see your browser's console and errors
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:12
Well that command wont work
It take me to download lists...
But I have other way..'
Right click, pick "inscept ..
inspect
I see $ is not defined..
Gulsvi
@gulsvi
Apr 05 2017 02:14
Ctrl+J takes me to downloads, Ctrl+Shift+J takes me to the console
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:14
I did ctrl...
and shift
j
Gulsvi
@gulsvi
Apr 05 2017 02:15
Anyway, you just need to add jQuery and put your code in the JS panel
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:15
How?
Gulsvi
@gulsvi
Apr 05 2017 02:15
Settings -> JavaScript -> Quick-add
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:16
I checked it out and I thought it didnt have quick add..
I added jQuery
<script>
     $(document).ready(function() {
    $("#getMessage").on("click", function(){
      $(".message").html("Mistakes are always forgivable, if one has the courage to admit them.");
    });
  });
  </script>
Gulsvi
@gulsvi
Apr 05 2017 02:16
Now, put everything between your <script> tags in the JS Panel
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:16
I was gonna say..
Jose Diaz
@jsd540
Apr 05 2017 02:16
Working on the tribute page challenge and wanted to know how to upload an image using code pen.
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:17
And it said token is illegal..
Gulsvi
@gulsvi
Apr 05 2017 02:17
@jsd540 Use a service like https://postimage.io - they'll give you a link to a picture
@MathematicsCoding Save your pen, I'll refresh it to take a look
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:18
ok
saved
Gulsvi
@gulsvi
Apr 05 2017 02:18
Remove the <script> tags from your JS panel
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:18
Ok
It worked thanks @SkyCoder01
CamperBot
@camperbot
Apr 05 2017 02:18
mathematicscoding sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 867 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:19
So anything should I change?
Gulsvi
@gulsvi
Apr 05 2017 02:19
Now you're all set up. For now, it's good. Though, you shouldn't have that <link> tag or <body> tag in there
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:19
Its okay..
Gulsvi
@gulsvi
Apr 05 2017 02:19
The <link> tag goes in Settings -> Stuff for <head>
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:19
..
Gulsvi
@gulsvi
Apr 05 2017 02:19
It just might cause you problems later :)
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:19
Codepen is too new for me
Maybe but for now its fine..
So now I got to figure out how to Change quotes each click..
Gulsvi
@gulsvi
Apr 05 2017 02:20
Yeah, the hard part starts now
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:20
Im going to take a look at project for this challenge
Gulsvi
@gulsvi
Apr 05 2017 02:22
@j1417 I don't think you're going to find a tool to create that Simon game UI for you. It's the last project before you become a certified front-end developer. Practice some more and you'll get it.
Jose Diaz
@jsd540
Apr 05 2017 02:23
@SkyCoder01 Awesome worked really well thanks
CamperBot
@camperbot
Apr 05 2017 02:23
jsd540 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 868 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 05 2017 02:23
No problem!
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:23
@SkyCoder01 are you certified front-end developer?
Gulsvi
@gulsvi
Apr 05 2017 02:24
No, I haven't done the advanced projects yet
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:24
oh
I might be? in few months maybe..
Gulsvi
@gulsvi
Apr 05 2017 02:24
I've been doing this for 10 weeks, but gave up since the beta is almost done.
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:24
I wanna be certified front-end developer before summer vacation is over
@SkyCoder01 I see
What's your WPM?
Gulsvi
@gulsvi
Apr 05 2017 02:25
~79
Depends on what I'm typing and for how long
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:25
oh
Amit Patel
@AmitP88
Apr 05 2017 02:25
hey guys, anyone here ever been to a hackathon? I'm attending my first one next month and I'm wondering how to prepare. I've been reviewing topics that I need sharpening up on such as JS, AJAX, APIs, etc
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:26
Mine is 70+ for one minute...
My goal is 75-90 for now
Gulsvi
@gulsvi
Apr 05 2017 02:26
I want to learn dvorak :) and get it past 100
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:26
dvorak?
Gulsvi
@gulsvi
Apr 05 2017 02:26
It's a keyboard layout that was designed for fast typing
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:26
oh
lol make me want to google what it look like
Gulsvi
@gulsvi
Apr 05 2017 02:27
QWERTY and DVORAK
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:27
Yeah
Strange layout
Is that for programming or something?
Gulsvi
@gulsvi
Apr 05 2017 02:28
It's for fast typing, I heard that the one we use today was meant to be slow because old typewriters would get stuck
DVORAK puts all the vowels together on one side and most used letters on the right side
least used letters in the hard to reach areas
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:29
Yeah...
Hard to reach s
L = S
If I learn dvorak and I might be confused with qwerty..
Gulsvi
@gulsvi
Apr 05 2017 02:30
Probably hard to switch between the two
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:30
Is there another layout?
Gulsvi
@gulsvi
Apr 05 2017 02:31
Those are the only ones I know of QWERTY and DVORAK.
Two people hated QWERTY lol
Gulsvi
@gulsvi
Apr 05 2017 02:32
lol
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:34
I have added href to button element but I click it then it doesnt go anywhere
target=_blank?
Gulsvi
@gulsvi
Apr 05 2017 02:34
Yeah, another codepen thing
target="_blank"
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:35
<button href = "https://en.wikipedia.org/wiki/Bruce_Lee" target="_blank" class="fa fa-info-circle btn btn-primary"> Bruce Lees</button>
Gulsvi
@gulsvi
Apr 05 2017 02:35
You can only use href="" on <a> elements
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:35
oh right..
So nest it with a elements right
Gulsvi
@gulsvi
Apr 05 2017 02:36
No, you can replace <button> with <a>
the btn btn-primary will make it look like a button
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:37
<div>
  <a href="https://en.wikipedia.org/wiki/Bruce_Lee"</a>
     <button target="_blank" class="fa fa-info-circle btn btn-primary"> Bruce Lees</button>
</div>
Well this is fine
Gulsvi
@gulsvi
Apr 05 2017 02:37
<a href = "https://en.wikipedia.org/wiki/Bruce_Lee" target="_blank" class="fa fa-info-circle btn btn-primary"> Bruce Lees</a>
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:38
Yeah..
Gulsvi
@gulsvi
Apr 05 2017 02:39
I have to go now... good luck with the quote machine :)
Saboor Malik
@MathematicsCoding
Apr 05 2017 02:39
@SkyCoder01 Thanks
CamperBot
@camperbot
Apr 05 2017 02:39
mathematicscoding sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: mathematicscoding already gave skycoder01 points
Alex Kuczera
@akubie
Apr 05 2017 02:51
Hi there! Has anyone done "Record Collection" in the front end javascript? I am having difficulty with updating the properties of arrays within objects, but I swear I am doing it right! :D
Ken Haduch
@khaduch
Apr 05 2017 02:56
@ImAlexanderK - what does your code look like?
@ImAlexanderK - just post the function part of it, not the entire collection object, if you want to show what you have.
Alex Kuczera
@akubie
Apr 05 2017 03:00
Ok I'll do my best to share it
I haven't shared a code block before haha
Ken Haduch
@khaduch
Apr 05 2017 03:01
use the Markdown format - three backticks ```, then a new line, then your code, then a newline, then three ```
This message was deleted
Alex Kuczera
@akubie
Apr 05 2017 03:01
```
// Only change code below this line
function updateRecords(id, prop, value) {  

   if (value === "") {
        delete collection[id][prop];
    } else if (collection[id].hasOwnProperty(prop)) {
        if (prop === "tracks") {
            collection[id][prop].push(value);
            } else {
                collection[id][prop] = value;
            }
    } else {
        if (prop === "tracks") {
          collection[id] = prop;
          collection[id][prop] = "value";
        } else {
          collection[id] = "prop";
          collection[id][prop] = "value";
        }
    }
  return collection;
}
sweet! Thanks @khaduch for your patience
CamperBot
@camperbot
Apr 05 2017 03:03
imalexanderk sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2700 | @khaduch |http://www.freecodecamp.com/khaduch
Alex Kuczera
@akubie
Apr 05 2017 03:04
Now I understand that maybe my function is incorrect, but I am mostly concerned with the bottom half of the function. The problem states to add in the 'prop' and 'value' if it does not exist... I thought I had it correct, but maybe I am messing up how I am adding in data to the arrays.
Ken Haduch
@khaduch
Apr 05 2017 03:05
@ImAlexanderK - okay - you are not doing the tracks part properly - are any of the cases passing? It looks like it could be failing when the tracks property is not present in the object?
Alex Kuczera
@akubie
Apr 05 2017 03:06
ahhhh I kind of looked past that part. now I know I have random quotation marks, its because I didn't know if
collection[id] = prop;
or
collection[id] = "prop"; is the correct way to add in a value to an array. Im about 99% sure its the first one
Ken Haduch
@khaduch
Apr 05 2017 03:07
and actually, you are doing some of the things wrong if it isn't the tracks property. For instance - this: collection[id] = prop; is not correct. And this: collection[id][prop] = "value"; is not correct. None of the stuff on the bottom is correct...
Alex Kuczera
@akubie
Apr 05 2017 03:07
haha ok, hence why none of it is working. I was able to get the top part working. I have half the problem solved, just a few cases aren't passing through
Ken Haduch
@khaduch
Apr 05 2017 03:08
if you are accessing a record, you are using collection[id], and if you want to add a property with the value, and the value is being sent in the variable (the function arg) value, you would want to do this, for the non-"tracks" case: collection[id][prop] = value; Which is what you are doing in the top section of your code. The same thing should be done if the property is not already in the object.
@ImAlexanderK - the next thing is if you have a missing tracks property, you have to add it, in the same way, but the value has to be contained within an array.
Alex Kuczera
@akubie
Apr 05 2017 03:11
oh right! I've been copying and pasting code all over the place and royally messed that up.
It should look like the upper half, except something like:
} else {
        if (prop === "tracks") {
          collection[id] = [];
          collection[id][prop].push(value);
thanks for the help @khaduch! Back to the drawing board, that definitely cleared up some questions I had
CamperBot
@camperbot
Apr 05 2017 03:15
imalexanderk sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: imalexanderk already gave khaduch points
Ken Haduch
@khaduch
Apr 05 2017 03:15
@ImAlexanderK - no! You do not want to do collection[id] = []; because that is just clobbering the entire object that exists in collection[id]! You could do collection[id][prop] = []; and then the push. Or you could do collection[id][prop] = [value];, creating the array on the fly.
Alex Kuczera
@akubie
Apr 05 2017 03:16
Oh yeah, that is what I meant to type out. Ok I'll let you know how it goes ;D
Josh Beyer
@Joshbeyer
Apr 05 2017 03:54
can somone look at my code pen and help me figure out why my divs are collapsing please
Ken Haduch
@khaduch
Apr 05 2017 04:05
@Joshbeyer - taking a quick look...
Josh Beyer
@Joshbeyer
Apr 05 2017 04:05
@khaduch thanks
CamperBot
@camperbot
Apr 05 2017 04:05
joshbeyer sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2701 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Apr 05 2017 04:07
@Joshbeyer - you're trying to make your own grid?
Josh Beyer
@Joshbeyer
Apr 05 2017 04:08
@khaduch I am using the grid from http://getskeleton.com/#grid
Ken Haduch
@khaduch
Apr 05 2017 04:09
@Joshbeyer - it kind of looks like it is working? What do you think is wrong?
Josh Beyer
@Joshbeyer
Apr 05 2017 04:09
I was going to use bourbon neat, but I can't figure it out. I have used skeleton several times in the past without any issues.
For some reason, the paragragh that says "We'll help you design yours" is coming after the grid.. when in the markup its before
the grid is going through the header
wait thats backwards, the paragraph is going out of the header
actually, everything after nav is placed out side the header for some reason
Josh Beyer
@Joshbeyer
Apr 05 2017 04:14
I can just take the h1 and p out of the header, and it works just fine.. I just don't like not know what I was doing wrong.
Ken Haduch
@khaduch
Apr 05 2017 04:15
@Joshbeyer - I think that the margin and padding are pushing your h1 and that paragraph down outside of the header?
Josh Beyer
@Joshbeyer
Apr 05 2017 04:17
I have been up for a long time.. I knew it was a simple mistake lol i can't believe I overlooked that
Ken Haduch
@khaduch
Apr 05 2017 04:17
If you turn off the fixed height in the header code, then the row / column part drops down below the "We'll help you design yours" text...
@Joshbeyer - it's crazy stuff... I've been up a long time, too... going offline now - hope I gave you something to go on? Good luck!
Josh Beyer
@Joshbeyer
Apr 05 2017 04:19
Yes, its working fine now. Thanks!
Faddah Wolf
@faddah
Apr 05 2017 04:19
hi all, i could still use some help with my portfolio project, i keep getting it near done, then something messes up and i’m stuck again. here’s the codepen: https://codepen.io/faddah/pen/egVyrM — what is happening now is, in the portfolio section, suddenly, the top three panels that had actual <iframe>’s in them to actual projects of mine, suddenly vanished and are not showing. it may have been some typo or something left out in my HTML or CSS, i’ve combed them looking for what caused this, but can’t seem to find it. any help, please?
RakeshNerkar
@Rakesh18754
Apr 05 2017 04:34
In console when i did this
var test = 1;
console.log(test);
1
undefined
why it returns 2 outputs?
any idea?
V Arun Kumar
@arunvkumr
Apr 05 2017 04:36
Hey guys, i'm working on twitch project and based on the guidelines given in the project page of fcc, they mentioned to use https://wind-bow.gomix.me/twitch-api/ but when i try to use the link in console i get redirection error and redirecting to https://wind-bow.glitch.me/twitch-api/, and i switched to glitch.me and its working. i just want to ask whether it is alright to use glitch or is there any other way to use gomix?
V Arun Kumar
@arunvkumr
Apr 05 2017 04:43
@Rakesh18754 the first output 1 is from console.log(print value to console not return value to console) and the second output undefined is the return value of console.log, after console.log(test);call a function(ofc you have to define it first) and see what it returns.
@Rakesh18754 for any queries about JS use this room https://gitter.im/FreeCodeCamp/HelpJavaScript
o2ri
@o2ri
Apr 05 2017 05:49

hey, in pomodor clock i have an onclick on a div that start the timer
ho do i prevent additional clicks on that div so it wont activate the function again and again?

http://codepen.io/o2ri/pen/XMQmNg/

kirbyedy
@kirbyedy
Apr 05 2017 05:50
@o2ri disable it on click
o2ri
@o2ri
Apr 05 2017 05:51
how to do it?
Winnie Wu
@WinnieFuller
Apr 05 2017 05:51
@fortMaximus Thank you for the suggestion and encouragement.
CamperBot
@camperbot
Apr 05 2017 05:51
winniefuller sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 702 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
kirbyedy
@kirbyedy
Apr 05 2017 05:52
basically something like this: onclick="this.disabled=true
search around a bit, there are different ways to do it
o2ri
@o2ri
Apr 05 2017 05:55
tried onclick="this.disabled=true;timer(0.1)", didnt work ,
but thanks for the direction
one more thing lets say i want to ad a stop button , what is the way it can stop the interval from antoher function?
V Arun Kumar
@arunvkumr
Apr 05 2017 05:56
kirbyedy
@kirbyedy
Apr 05 2017 06:00
@arunvkumr this works apparently
so I guess its ok to use it
V Arun Kumar
@arunvkumr
Apr 05 2017 06:01
@kirbyedy thanks :+1:
CamperBot
@camperbot
Apr 05 2017 06:01
arunvkumr sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1986 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Apr 05 2017 06:02
@o2ri $("your button").attr("disabled", true);
o2ri
@o2ri
Apr 05 2017 06:02
how do i form the function name after onclick="this.disabled=true;
is it jquery?
i am tryinn not to learn it at the beging
Mohamed Derhalli
@derhallim
Apr 05 2017 06:25
@o2ri why not doing onclick='myfunc()'
then u would have
function myfunc(){
//do whatever here
}
RakeshNerkar
@Rakesh18754
Apr 05 2017 06:30

1-"7"
logs - 6

any idea why?

alpox
@alpox
Apr 05 2017 06:37
@Rakesh18754 Javascript has no strict typing and so it converts the "7" to a 7 in an integer calculation
Spyrantis Theodoros
@thodorisanta
Apr 05 2017 06:41

im working on the twitch api project, can i get some help please? How and i suppose to make the buttons work? :/

http://codepen.io/oshikurou/pen/YZrqBy?editors=0111

grantknaver
@grantknaver
Apr 05 2017 06:52
Please help anyone I am stuck
snickerz
@snickerz
Apr 05 2017 06:56
does anyone know of a free weather api that runs on javescript?? TIA to use for the weather project??
@snickerz freecodecamp links to this one https://openweathermap.org/current#geo
snickerz
@snickerz
Apr 05 2017 07:07
@jtan3 thank you will try that
CamperBot
@camperbot
Apr 05 2017 07:07
snickerz sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 360 | @jtan3 |http://www.freecodecamp.com/jtan3
Henry
@GitHub-Henry
Apr 05 2017 08:53
def
@defregga
Apr 05 2017 08:54
Is it just me, or is the editor in the tutorials a bit buggy? Whenever it loads the next task and I set the cursor to edit, I end up in the wrong line when starting to edit.
Henry
@GitHub-Henry
Apr 05 2017 08:56
@defregga i use code pen for my tutorials then paste my answer into the tutorial
works for me
Melissa Knapp
@MelEKn
Apr 05 2017 08:58
Hey, what do I have to do on CodePen in order for the stuff I write in the CSS section to work? Right now if I write something in the CSS section, it doesn't do anything, but if I copy/paste it into the HTML section and put <style> and </style> on either side of it, it works.
Henry
@GitHub-Henry
Apr 05 2017 08:59
look at behaviors
@MelEKn
def
@defregga
Apr 05 2017 09:00
Thanks @GitHub-Henry
CamperBot
@camperbot
Apr 05 2017 09:00
defregga sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @github-henry |http://www.freecodecamp.com/github-henry
Henry
@GitHub-Henry
Apr 05 2017 09:01
@MelEKn pen settings behavior, auto save, auto preview settings
Melissa Knapp
@MelEKn
Apr 05 2017 09:01
@GitHub-Henry Why do I need to auto preview? I've just been clicking save and then run.
Henry
@GitHub-Henry
Apr 05 2017 09:02
@MelEKn i was meaning those are the settings that set the behavior of the pen
Melissa Knapp
@MelEKn
Apr 05 2017 09:02
@GitHub-Henry OK, so what do I do to for what I write in the CSS section to work like it does in the HTML section with <style> </style> around it?
@GitHub-Henry Wow that was garbled. What do I need to to for what I write... etc
Henry
@GitHub-Henry
Apr 05 2017 09:04
@MelEKn you want css in your html?
@MelEKn trying to understand
Melissa Knapp
@MelEKn
Apr 05 2017 09:04
@GitHub-Henry Right now if I write something in the CSS section, it doesn't do anything, but if I copy/paste it into the HTML section and put <style> and </style> on either side of it, it works. I would like to be able to just write it in the CSS section.
Henry
@GitHub-Henry
Apr 05 2017 09:05
@MelEKn if the auto preview is enabled it should show your css as soon as it gets saved in the css box
Melissa Knapp
@MelEKn
Apr 05 2017 09:06

@GitHub-Henry So for example, if I write in the CSS section of CodePen:

body{
color: white;
background-color: black;
}

It doesn't do it, the background and text color are still default. But if I go to the HTML section and write

<style>
body{
color: white;
background-color: black;
}
</style>

then it works, and the background is black and the text is white.

I don't need auto preview, I'm clicking run and that's worked fine for everything else.

I assume there's some sort of tag or something I'm supposed to be adding that I'm not, but I have no idea what it is, so I was hoping someone here would know?
Henry
@GitHub-Henry
Apr 05 2017 09:08
post pen
@MelEKn
h1tag
@h1tag
Apr 05 2017 09:10
@MelEKn the Bootstrap css file link goes in the CSS settings
Melissa Knapp
@MelEKn
Apr 05 2017 09:11
@fortMaximus I did that too, but when it didn't work I decided to do both just in case :{
*:P
If you go to the settings for CSS, you'll see that Bootstrap is added
the version that is added is setting is v4-alpha
Melissa Knapp
@MelEKn
Apr 05 2017 09:12
@fortMaximus OK, I changed it to that one in settings, but it's still not working
@GitHub-Henry Yes? Did you mean to send another link to my pen?
h1tag
@h1tag
Apr 05 2017 09:13
@MelEKn also you don't need the body tags in html on Codepen
and remove the style tags too
Melissa Knapp
@MelEKn
Apr 05 2017 09:13
@fortMaximus OK, I only added them because I thought that might be why the CSS wasn't working. What do I label the styles I want for the entire page then?
Henry
@GitHub-Henry
Apr 05 2017 09:13
@MelEKn here's what i think, you need and ID to give your element priority over BS
Melissa Knapp
@MelEKn
Apr 05 2017 09:14
@fortMaximus But the style tags are the only way I can style the page at all. I didn't have them originally and the CSS still didn't work, that's the whole reason I added them, so that can't be the problem.
@GitHub-Henry OK, what does that mean and how would I do it?
Henry
@GitHub-Henry
Apr 05 2017 09:15
When using BS they have priority with a bunch of classes, to have a higher priority use IDs then select those IDs, it will give your CSS a higher priority and make the changes you want.
Melissa Knapp
@MelEKn
Apr 05 2017 09:15
@fortMaximus But OK, I'll take the style tags out
Henry
@GitHub-Henry
Apr 05 2017 09:15
Simply put, use IDs in your HTML, then use CSS selector to target those IDs
BS= Bootstrap
@MelEKn I've run into this as an issue with BS
Melissa Knapp
@MelEKn
Apr 05 2017 09:16
@fortMaximus Oh wow, it does work now!
@fortMaximus That's so bizarre, it didn't work before when I'd set it up exactly like this. Weird!
@fortMaximus Thanks :)
CamperBot
@camperbot
Apr 05 2017 09:17
melekn sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 703 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Henry
@GitHub-Henry
Apr 05 2017 09:17
@MelEKn So what was the issue?
Melissa Knapp
@MelEKn
Apr 05 2017 09:17
@GitHub-Henry Absolutely no idea
@GitHub-Henry I even changed the Bootstrap version back to the one CodePen adds when you click the button to see if that was the issue-- nope
Henry
@GitHub-Henry
Apr 05 2017 09:20
@MelEKn well i know it worked with the IDs
@MelEKn Does it just work now?
h1tag
@h1tag
Apr 05 2017 09:20
@MelEKn maybe the body tags were creating conflict
Melissa Knapp
@MelEKn
Apr 05 2017 09:20
@fortMaximus But I only added those after the CSS didn't work :-/
Henry
@GitHub-Henry
Apr 05 2017 09:21
@fortMaximus yes, code pen is supposed to be the stuff inside the body tags, don't include body tags
Melissa Knapp
@MelEKn
Apr 05 2017 09:21

@fortMaximus OH! Wait, no, I must have added them because I was starting
body{
color: white;
background-color: black;
}

with "body" so thought they must be necessary.

@fortMaximus the body tags were the problem. Mystery solved! thanks :)
CamperBot
@camperbot
Apr 05 2017 09:21
melekn sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: melekn already gave fortmaximus points
Jordy
@JordyDew
Apr 05 2017 09:23
Hey. how does the numbers with col-xs- (where is the number) work? I don't understand what the numbers mean, or what they call. I can't see the output, because of my blindness, again :-)
Melissa Knapp
@MelEKn
Apr 05 2017 09:23

Ok, so, one more question for everyone. I've been trying to make this work for a while so I'm not just asking to be spoon fed. How do I make the CSS work on html that's been generated from the JS section? Like for example,

var temp = 'Temperature: ' + Math.round(weatherData.main.temp) + '<a class="like-link" onclick="convertToC(' + weatherData.main.temp + ')">&#8457;</a>';
  $("#temperature").html(temp);

works fine EXCEPT for the fact that class="like-link" doesn't work. The problem isn't the class, because it worked fine on text that started out in the HTML section.

Henry
@GitHub-Henry
Apr 05 2017 09:23
@MelEKn nope, remove body tags from html, and select body tags still works in codepen
Melissa Knapp
@MelEKn
Apr 05 2017 09:24
The conversion works, it's just that the text isn't styled.
h1tag
@h1tag
Apr 05 2017 09:24
@JordyDew the numbers mean the number of columns
Jordy
@JordyDew
Apr 05 2017 09:25
yes, and what's one column?
Henry
@GitHub-Henry
Apr 05 2017 09:25
@MelEKn did you try adding a class to the html
h1tag
@h1tag
Apr 05 2017 09:26
@JordyDew
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases
Melissa Knapp
@MelEKn
Apr 05 2017 09:26

@GitHub-Henry the code I linked didn't do that? I thought that's what the

<a class="like-link" onclick= ...

part did.

(er, code I pasted, not linked)
The onclick part works, but not class="like-link"

(in the CSS section I have

.like-link{
color: blue;
text-decoration: underline;
}

)

Henry
@GitHub-Henry
Apr 05 2017 09:28
@MelEKn the onclick part could add a class to the html which could style your text
Melissa Knapp
@MelEKn
Apr 05 2017 09:29
@GitHub-Henry How?
@GitHub-Henry The onclick part isn't part of the original HTML section, it's generated from the JS section
h1tag
@h1tag
Apr 05 2017 09:30
@JordyDew and the number of columns is a way to specify how much space do you want the element inside it to take on that viewport
Henry
@GitHub-Henry
Apr 05 2017 09:30
if the JS generates the html, then that's where the class would be added @MelEKn
Melissa Knapp
@MelEKn
Apr 05 2017 09:30
@GitHub-Henry So why doesn't the code I pasted work?
  var temp = 'Temperature: ' + Math.round(weatherData.main.temp) + '<a class = "like-link" onclick="convertToC(' + weatherData.main.temp + ')">&#8457;</a>';
  $("#temperature").html(temp); 
Why isn't it using the style for class = "like-link" ?
h1tag
@h1tag
Apr 05 2017 09:31
@JordyDew viewports like: large screen, medium screen, small, xsmall and so on
Henry
@GitHub-Henry
Apr 05 2017 09:31
@MelEKn does the link-link class get added to the html?
Melissa Knapp
@MelEKn
Apr 05 2017 09:32

@GitHub-Henry I'm not sure what you mean, it's in the CSS section. I added some text to the bottom of the HTML section that says

<p class = "like-link"> Does this look like a link? </p>

and THAT gets the style of blue and underlined.

But not the part that came from the JS section
h1tag
@h1tag
Apr 05 2017 09:33
@MelEKn the styling is working
Screenshot.png
Melissa Knapp
@MelEKn
Apr 05 2017 09:34
@fortMaximus That part is, yes, as I said, but it's not working for the ℉

@fortMaximus As I said above,

<p class = "like-link"> Does this look like a link? </p>
gets the style of blue and underlined

But not the part that came from the JS section, the
var temp = 'Temperature: ' + Math.round(weatherData.main.temp) + '<a class = "like-link" onclick="convertToC(' + weatherData.main.temp + ')">&#8457;</a>';
$("#temperature").html(temp);

Melissa Knapp
@MelEKn
Apr 05 2017 09:40
Ok, finally solved it! The problem was that it should be "<span class= ..." instead of "<a class = " ...
Jordy
@JordyDew
Apr 05 2017 09:41

@fortMaximus So

<div class="row">
<div class="col-xs-1" id="left-column"></div>
<div class="col-xs-2" id="right-column"></div>
</div>

means:
there are two columns on the page, the left one is #left-column en the right one is #right-column...
Or is it like this:

<div class="row">
<div class="col-xs-5" id="left-column"></div>
<div class="col-xs-7" id="right-column"></div>
</div>

the left column is #left-column and is maller than the right one, who's named #right-column.
Or do I missunderstand something?

Henry
@GitHub-Henry
Apr 05 2017 09:42
@MelEKn congrats on your styling solution
def
@defregga
Apr 05 2017 09:44
Question: the times listed for each module in the course map, do they suggest a speed one should be moving at? I am a wee bit faster than they recommend and wonder what are good points to stop a session/day of study.
Melissa Knapp
@MelEKn
Apr 05 2017 09:45
@GitHub-Henry Thanks. And thanks to you and @fortMaximus for taking the time to help me out :)
CamperBot
@camperbot
Apr 05 2017 09:45
melekn sends brownie points to @github-henry and @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: melekn already gave fortmaximus points
:cookie: 279 | @github-henry |http://www.freecodecamp.com/github-henry
h1tag
@h1tag
Apr 05 2017 09:47
@JordyDew you can do it both ways. And yes, the columns will line up stacked to each other from left to right like you described above
in the first code snippet the elements between <div class="col-xs-1" id="left-column"></div> will take a space of one column and the elements between <div class="col-xs-2" id="right-column"></div> will take the space of 2 columns and you will have 9 free remaining columns in that row
Duyali
@Duyali
Apr 05 2017 09:51
where can i find my own link in Codepen
Doni Yafi
@yafiwebdev
Apr 05 2017 09:52
You mean after you've finished the project and wanna submit it? @Duyali
Doni Yafi
@yafiwebdev
Apr 05 2017 09:53
Ok click change view
and make it full
@Duyali
then copy the url
Spyrantis Theodoros
@thodorisanta
Apr 05 2017 09:54
how can i nest in css a class with a link? something like
.class > a{.....}`
@thodorisanta I don't really get you
Spyrantis Theodoros
@thodorisanta
Apr 05 2017 09:56
@yafiwebdev i want to change the text color of a paragraph for instance but only the paragraphs that are in a div with a class of .class1
Johnny
@JohnnyBizzel
Apr 05 2017 09:57
@thodorisanta Easy enough to do with a style sheet
Duyali
@Duyali
Apr 05 2017 09:57
@yafiwebdev thanks
CamperBot
@camperbot
Apr 05 2017 09:57
duyali sends brownie points to @yafiwebdev :sparkles: :thumbsup: :sparkles:
:cookie: 343 | @yafiwebdev |http://www.freecodecamp.com/yafiwebdev
Jordy
@JordyDew
Apr 05 2017 09:57
@fortMaximus and that remaining columns are just whitespace? And what's the width of one column?
Doni Yafi
@yafiwebdev
Apr 05 2017 09:57
you use this .class1 p { color:red; }
Johnny
@JohnnyBizzel
Apr 05 2017 09:58
@thodorisanta Learn CSS here: https://www.w3schools.com/css/default.asp
Isan Bothra
@isanbothra
Apr 05 2017 09:59
can anyone suggest me a solution for "how to keep the navigation bar link to the section (of the webpage) highlighted when currently viewing that section?"
Spyrantis Theodoros
@thodorisanta
Apr 05 2017 09:59
@JohnnyBizzel okay i fixed it. i used .class > p but it didnt work. and then i just removed the > and it worked
@yafiwebdev
Johnny
@JohnnyBizzel
Apr 05 2017 10:00

@yafiwebdev says...

you use this .class1 p { color:red; } @thodorisanta

Duyali
@Duyali
Apr 05 2017 10:01
please give me some advice.this is my first web pagehttps://codepen.io/Duyali/full/wJONMx/
Henry
@GitHub-Henry
Apr 05 2017 10:02
@Duyali isn't that the sample tribute page?
Doni Yafi
@yafiwebdev
Apr 05 2017 10:03
@isanbothra give the section an id and link it to it as the href of the <a>
Johnny
@JohnnyBizzel
Apr 05 2017 10:03
@GitHub-Henry Yes but in his own style ;)
@yafiwebdev Make the title more prominent.
Isan Bothra
@isanbothra
Apr 05 2017 10:04
can anyone suggest me a solution for "how to keep the navigation bar link to the section (of the webpage) highlighted when currently viewing that section?"
Doni Yafi
@yafiwebdev
Apr 05 2017 10:04
@isanbothra you already asked
and I replied
Isan Bothra
@isanbothra
Apr 05 2017 10:04
@yafiwebdev i am nt asking that...
Doni Yafi
@yafiwebdev
Apr 05 2017 10:04
oh you want it highlighted
sorry
Isan Bothra
@isanbothra
Apr 05 2017 10:04
@yafiwebdev please read it carefully
yeah
h1tag
@h1tag
Apr 05 2017 10:07
@JordyDew yes, the remaining columns are just whitespace. And the width of a column in Bootstrap will depend on the viewport you specify with it and it's specified using a percentage, for example: on extra small (xs) devices the width of col-xs-1 will be 8.33333333%
Duyali
@Duyali
Apr 05 2017 10:07
@GitHub-Henry what do you mean?
i dont understand
Isan Bothra
@isanbothra
Apr 05 2017 10:08
@Duyali he means that u hav copied the code of sample tribute page...
Doni Yafi
@yafiwebdev
Apr 05 2017 10:08
@Duyali This is the sample page of the challenge
Johnny
@JohnnyBizzel
Apr 05 2017 10:10

@Duyali Here is my tribute page. http://codepen.io/JohnnyBizzel/full/bpvrBv/

And some of my favourites: http://codepen.io/collection/nqawWO/

Jordy
@JordyDew
Apr 05 2017 10:11
@fortMaximus And does xs also look good on laptop screens, or bigger?
Isan Bothra
@isanbothra
Apr 05 2017 10:11
@yafiwebdev means i hav to use j-script for that??
Duyali
@Duyali
Apr 05 2017 10:12
@yafiwebdev This is my own code, but he used the same picture, but the style is a little bit out of their own
i want web page is the same as him
h1tag
@h1tag
Apr 05 2017 10:14
@JordyDew xs means extra small and it's used for small screens, less than 768px (phones)
Isan Bothra
@isanbothra
Apr 05 2017 10:14
@Duyali at the end of the page it is written that "Written and coded by Quincy Larson"
h1tag
@h1tag
Apr 05 2017 10:15
Written and coded by Quincy Larson
lol
Doni Yafi
@yafiwebdev
Apr 05 2017 10:17
@isanbothra I guess so
h1tag
@h1tag
Apr 05 2017 10:18
@Duyali change "Written and coded by Quincy Larson " to "Written and coded by Duyali"
Doni Yafi
@yafiwebdev
Apr 05 2017 10:18
@Duyali at the end of the page it is written that "Written and coded by Quincy Larson"
lol
Isan Bothra
@isanbothra
Apr 05 2017 10:18
cant use css to do that? @yafiwebdev
Doni Yafi
@yafiwebdev
Apr 05 2017 10:19
@isanbothra Try using scrollspy of Bootstrap if you want
or ask around more
o2ri
@o2ri
Apr 05 2017 10:21
@derhallim that exctaly what i did, but i want it to run only one time
or not to start each time : http://codepen.io/o2ri/pen/XMQmNg/
Johnny
@JohnnyBizzel
Apr 05 2017 10:25

@yafiwebdev

@Duyali at the end of the page it is written that "Written and coded by Quincy Larson"
lol

If you are going to copy, at least destroy the evidence :joy:

Duyali
@Duyali
Apr 05 2017 10:25
I mean that I was imitating people to write, fonts, pictures, content has not changed, just a simple imitation style, you can carefully compare the two code
Doni Yafi
@yafiwebdev
Apr 05 2017 10:26
@Duyali Don't clone, try to do your own
At least for this one
You can clone other websites for practice
When I first started, I cloned Google homepage
Do something similar to what's in the sample, but put s different image, and some text from wikipedia or something, and change the colors
you get a new one, your own
Johnny
@JohnnyBizzel
Apr 05 2017 10:28
@Duyali You should get out of the habit of copying when you are learning. It is harder to write your own code if you copy all the time.
h1tag
@h1tag
Apr 05 2017 10:31
@JohnnyBizzel she says that she didn't copy the code, she copied the style (not the style code) and the content
Duyali
@Duyali
Apr 05 2017 10:31
@yafiwebdev @JohnnyBizzel Thanks for your advice
CamperBot
@camperbot
Apr 05 2017 10:31
duyali sends brownie points to @yafiwebdev and @johnnybizzel :sparkles: :thumbsup: :sparkles:
:warning: duyali already gave yafiwebdev points
:star2: 1614 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
nik3108
@nik3108
Apr 05 2017 10:32
how to build a tribute page
Johnny
@JohnnyBizzel
Apr 05 2017 10:33
@fortMaximus Just giving some general advice. "Written and coded by Quincy Larson" was at the footer.
h1tag
@h1tag
Apr 05 2017 10:34
yea, saw it and told her to change it
h1tag
@h1tag
Apr 05 2017 10:48
@JordyDew it's like creating a rule so that when the screen size is less than or greater than a certain number of pixels the content will take that much width
rugano
@rugano
Apr 05 2017 10:48
Hello campers,my codepen editor just went blank after i tried to experiment with their Font awesome icons.all the other projects cannot be seen.how do i correct it?
Is it ok to use codepen for a project from another site?I made a business card from MDN css comprehension ?
h1tag
@h1tag
Apr 05 2017 10:52
Is it ok to use codepen for a project from another site?I made a business card from MDN css comprehension ?
why not?
rugano
@rugano
Apr 05 2017 10:54
what could be wrong with my editor?
h1tag
@h1tag
Apr 05 2017 10:54
idk
rugano
@rugano
Apr 05 2017 11:00
It looks like this,totally blank: https://codepen.io/Njue/pens/public
heroiczero
@heroiczero
Apr 05 2017 11:01
@rugano did you save your work?
rugano
@rugano
Apr 05 2017 11:02
i tried to save but the editor won't respond
h1tag
@h1tag
Apr 05 2017 11:02
@rugano your previous pens are still there
rugano
@rugano
Apr 05 2017 11:03
ok,how do i clear the mess?
h1tag
@h1tag
Apr 05 2017 11:04
you'll have to manually delete them one by one
but what did you exactly do to generate them?
Matthew Sinkgraven
@s0nic12
Apr 05 2017 11:04
Anyone care to offer any feedback on my calculator before i submit? :D
https://s0nic12.github.io/calculator.html
rugano
@rugano
Apr 05 2017 11:07
@fortMaximus i was trying to experiment writing social media buttons as demonstrated at codepen
and they seem to be infinite
h1tag
@h1tag
Apr 05 2017 11:08
lol
rugano
@rugano
Apr 05 2017 11:08
lol
h1tag
@h1tag
Apr 05 2017 11:08
where's this demonstrated?
rugano
@rugano
Apr 05 2017 11:09
let me get the link
Rabbitzzc
@Rabbitzzc
Apr 05 2017 11:12
Hi! I am a beginner.https://www.freecodecamp.cn/challenges/design-a-danmu-app .It's diffixult for me.Do you have some dates?
Simo
@SimoOmis10
Apr 05 2017 11:12
hello i have one problem with photoshop cc i installed an extension , the problem is when i click on extension is not stay showing (disappear )
Jordy
@JordyDew
Apr 05 2017 11:14
@fortMaximus what's a better one for laptop screens of 15,6" ?
Ken Haduch
@khaduch
Apr 05 2017 11:17
@s0nic12 - hi Matt - I did a quick test on my phone. Of the few things that I tried, most seemed to work, but one thing that was incorrect was the ability to enter multiple decimal points, which probably resulted in some errors because no results were displayed when hitting =. Couldn't see the dev console on the phone to check for any error message. But that is something to check.
Federico Dente
@fez994
Apr 05 2017 11:18
Hi guys, do you know why the "offline" goes a bit out of the container when i shrink it? Here is a screen shot http://imgur.com/Dkqzski and here is my pen http://codepen.io/fez994/pen/GrbqrN
h1tag
@h1tag
Apr 05 2017 11:19
@JordyDew the medium col-md-*for devices greater than or equal 992px and less than or equal 1200px
px means pixels
Matthew Sinkgraven
@s0nic12
Apr 05 2017 11:22
@khaduch Thanks a lot Ken! I knew I must have overlooked something :D hopefully that was the only bug
Jordy
@JordyDew
Apr 05 2017 11:23
@fortMaximus Thanks for all your answers! You helped me a lot!
CamperBot
@camperbot
Apr 05 2017 11:23
jordydew sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 704 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Sonja
@sonjaSch
Apr 05 2017 11:58
to colorfull?
Folu Fara
@nisutabo
Apr 05 2017 12:27
for the tribute page exercise, am i not allowed to use css?
Isan Bothra
@isanbothra
Apr 05 2017 12:28
@nisutabo yeah for sure...
Folu Fara
@nisutabo
Apr 05 2017 12:28
@isanbothra you mean I can use it?
@isanbothra ok
Isan Bothra
@isanbothra
Apr 05 2017 12:29
yes you can...
Folu Fara
@nisutabo
Apr 05 2017 12:29
@isanbothra ok great. thanks
CamperBot
@camperbot
Apr 05 2017 12:29
nisutabo sends brownie points to @isanbothra :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @isanbothra |http://www.freecodecamp.com/isanbothra
rugano
@rugano
Apr 05 2017 12:29
at last corrected the mess,
@fortMaximus thanks
CamperBot
@camperbot
Apr 05 2017 12:31
rugano sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 705 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
KatSaldivar
@KatSaldivar
Apr 05 2017 12:50
@sonjaSch Loooks good! how do you get the background div to be transparent while the text is still opaque? I've been setting the whole div to opacity: 0.7; but it turns everything see-through.
Jordy
@JordyDew
Apr 05 2017 13:03
Hi, where do I need to place an image when I just have it on my pc? I don't think I can upload it to CodePen?
Ken Haduch
@khaduch
Apr 05 2017 13:05
@JordyDew - there are places that you can upload to, such as postimg.org - check that out and see if it helps you. http://postimg.org - you will then have a URL that you can link to in your project.
Folu Fara
@nisutabo
Apr 05 2017 13:17
hi, how do i get my caption to be the same width as my image?
i would like to capsule the image and the caption if that makes sense
Jordy
@JordyDew
Apr 05 2017 13:20
Thank you for the tip, @khaduch
CamperBot
@camperbot
Apr 05 2017 13:20
jordydew sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2703 | @khaduch |http://www.freecodecamp.com/khaduch
BlancetNoir
@BlancetNoir
Apr 05 2017 13:30
Anybody knows why this is working locally, but not on codepen?
kirbyedy
@kirbyedy
Apr 05 2017 13:32
@BlancetNoir check your console, it says mixed content
Mixed Content: The page at 'https://codepen.io/blancetnoir/pen/xpWdmz' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_=1491399159394'. This request has been blocked; the content must be served over HTTPS.
Jason
@jasonetaylor
Apr 05 2017 13:35
@johndsykes86 Can you remind me what you were trying to do when you got the cross origin error?
BlancetNoir
@BlancetNoir
Apr 05 2017 13:35
Ahh, so I need to find a quote API that serves content over HTTPS
Oh I could just change http to https and its working now, thanks @kirbyedy
CamperBot
@camperbot
Apr 05 2017 13:36
blancetnoir sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1988 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Apr 05 2017 13:36
pretty much yea
Paradox5
@Paradox5
Apr 05 2017 13:40
Hol
Harsh Chandra
@HarshHC
Apr 05 2017 13:50
Hey people I need some help in jQuery or u can say JS
how can i append large html into a div
Ben Line
@Benwebdev
Apr 05 2017 13:51
@HarshHC What challenge you on ?.
Harsh Chandra
@HarshHC
Apr 05 2017 13:52

i know we could add 1 like by using

$(".myClass").html("<whatever>");

or

$(".myClass").append("<whatever>");
@Benwebdev im not exactly working on a challenge right now , I wanted to practice all JS I learned to make a project on a topic of my own before I do the projects in FCC
Ben Line
@Benwebdev
Apr 05 2017 13:53
@HarshHC Okay, is this code on codepen ?.
@HarshHC Link me and I'll take a look or are you wanting to know how to append html with jquery ?.
Harsh Chandra
@HarshHC
Apr 05 2017 13:54
@Benwebdev yup sure :) i'll link it however it will be very difficult to understand since a lot is done it
Ben Line
@Benwebdev
Apr 05 2017 13:55
@HarshHC Just link me to the codepen or what not and I'll take a look.
Harsh Chandra
@HarshHC
Apr 05 2017 13:56
@Benwebdev so currently im working on the add another flight part of the project , for it go to the end part of my JS its marked with comments
Ben Line
@Benwebdev
Apr 05 2017 13:56
@HarshHC, right so now tell me where your stuck.
@HarshHC very nice btw!.
Harsh Chandra
@HarshHC
Apr 05 2017 13:57
@Benwebdev im trying to add a new flight , a flight in the format how others are present however this time with the data which was input ,
@Benwebdev thanks :)
CamperBot
@camperbot
Apr 05 2017 13:57
harshhc sends brownie points to @benwebdev :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @benwebdev |http://www.freecodecamp.com/benwebdev
Harsh Chandra
@HarshHC
Apr 05 2017 13:58
@Benwebdev u can click on the add new flights below the flight list to see where to input
@Benwebdev so ive got variables with all data I need including the ones with the input , but now I wanna append a new flight to the list
@Benwebdev I tried to take the same html from other flights and put variables in the place of the data however JS is showing an error how can I do this
Ben Line
@Benwebdev
Apr 05 2017 14:00
@HarshHC Looking at code hang on :).
Harsh Chandra
@HarshHC
Apr 05 2017 14:01
@Benwebdev I can try to explain my code in detail if its difficult to understand :) its a bit tricky to understand if you've not been working on it
gulptech
@gulptech
Apr 05 2017 14:01
@nisutabo did you figure out your caption issue ?
Ben Line
@Benwebdev
Apr 05 2017 14:02
@HarshHC Can we take this to dm's
Harsh Chandra
@HarshHC
Apr 05 2017 14:02
@Benwebdev sure
Folu Fara
@nisutabo
Apr 05 2017 14:02
@gulptech sort of. i just adjusted the margins to fit the width of the picture ...
gulptech
@gulptech
Apr 05 2017 14:03
@nisutabo https://v4-alpha.getbootstrap.com/content/figures/ this is where you want to look
Folu Fara
@nisutabo
Apr 05 2017 14:05
@gulptech ok cool. thanks
CamperBot
@camperbot
Apr 05 2017 14:05
nisutabo sends brownie points to @gulptech :sparkles: :thumbsup: :sparkles:
:cookie: 234 | @gulptech |http://www.freecodecamp.com/gulptech
gulptech
@gulptech
Apr 05 2017 14:05
@nisutabo and don’t forget to also add the smaller-image class to the caption so it is the same
Folu Fara
@nisutabo
Apr 05 2017 14:06
@gulptech gotchu
maxblanch
@maxblanch
Apr 05 2017 14:10
Hey fellow campers. I'm right now in the first Front-end Basic Challenge. I'm having in issue working out my bootstrap thumbnail. It seems I'm having everything right but it doesn't work. Anybody help me ? http://codepen.io/maxblanch/pen/bqJBJJ
gulptech
@gulptech
Apr 05 2017 14:11
hmm...why does this irc channel disconnect when using irccloud ?
Ben Line
@Benwebdev
Apr 05 2017 14:12
@maxblanch Looking for you :).
@maxblanch Can you give me some more information on what's wrong. what do you mean by issue working out my bootstrap thumbnail ?.
maxblanch
@maxblanch
Apr 05 2017 14:15
@Benwebdev Do you see my code pen ? I don't see the white border around my picture
Ben Line
@Benwebdev
Apr 05 2017 14:15
@maxblanch Yes I see :).
maxblanch
@maxblanch
Apr 05 2017 14:15
@Benwebdev This is what is it should like : https://codepen.io/freeCodeCamp/full/NNvBQW
Ben Line
@Benwebdev
Apr 05 2017 14:15
@maxblanch When you ask for support make sure you list whats wrong ;).
@maxblanch
You need to add styles ?.
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
to the thumbnail class or the image itself.
maxblanch
@maxblanch
Apr 05 2017 14:18
@Benwebdev We're not supposed to add style in our project. Only html with bootstrap classes
gulptech
@gulptech
Apr 05 2017 14:19
@maxblanch your image does not have a thumbnail class so it will not have the border
Ben Line
@Benwebdev
Apr 05 2017 14:19
@gulptech I just thought that.
@gulptech Your right, if it's bootstrap classes only. just add the thumbnail class to the image. The above code is what is missing though.
maxblanch
@maxblanch
Apr 05 2017 14:20
@gulptech I put my thumbnail class in the div parent to img
gulptech
@gulptech
Apr 05 2017 14:20
saw that..but that class will not work like you typed it
bootstrap 4 will use img-thumbnail
maxblanch
@maxblanch
Apr 05 2017 14:23
@gulptech OHH ! you're right. the lesson was filmed with bootstrap 3, and I realized I'm working with Bootstrap 4
@gulptech @Benwebdev Thanks guys, everything's working now ! Big thank you !
CamperBot
@camperbot
Apr 05 2017 14:23
maxblanch sends brownie points to @gulptech and @benwebdev :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @benwebdev |http://www.freecodecamp.com/benwebdev
:cookie: 235 | @gulptech |http://www.freecodecamp.com/gulptech
Sonja
@sonjaSch
Apr 05 2017 14:25
@KatSaldivar oh thx
CamperBot
@camperbot
Apr 05 2017 14:25
sonjasch sends brownie points to @katsaldivar :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @katsaldivar |http://www.freecodecamp.com/katsaldivar
Sonja
@sonjaSch
Apr 05 2017 14:25
This message was deleted
@KatSaldivar just saw ur post
@KatSaldivar I just make the bg transparent but the textcolor black
Jordy
@JordyDew
Apr 05 2017 14:40
Mayank Jain
@mjtheking02
Apr 05 2017 14:40
Hey guys bootstrap class are not working on codepen.io website any suggestion? I went to setting selected javascript and under it i selected bootstrap that also doesnt work
h1tag
@h1tag
Apr 05 2017 14:42
@JordyDew it would be better if you place everything in the middle columns
Jordy
@JordyDew
Apr 05 2017 14:43
@mjtheking02 Go to settings > CSS > combo box and select Bootstrap, the first option.
h1tag
@h1tag
Apr 05 2017 14:44
@JordyDew and use the following link for Bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Jordy
@JordyDew
Apr 05 2017 14:44
@fortMaximus how can I do so?
h1tag
@h1tag
Apr 05 2017 14:45
the link I showed you above is for version 3 (which is the one you learned in the freecodecamp challenges), the one you now have is for version 4 alpha @JordyDew
remove the version 4 link you have currently
and add the one I pasted for you above
you add this one by copying and pasting the link above after removing the one you had previously
@mjtheking02 can you paste the link to your pen?
Mayank Jain
@mjtheking02
Apr 05 2017 14:53
yes
I got it thanx
Ene Catalin
@EneCatalin
Apr 05 2017 15:04
hey guys, I need some help, I have no idea how to download an image, is there an easy trick or do I have to cut it with photoshop
blob
I've even downloaded the whole page, can't find that subheader thingy
h1tag
@h1tag
Apr 05 2017 15:06
@EneCatalin right click > save image as
Ene Catalin
@EneCatalin
Apr 05 2017 15:06
noooope
h1tag
@h1tag
Apr 05 2017 15:06
?
Ene Catalin
@EneCatalin
Apr 05 2017 15:07
it doesn't show
gulptech
@gulptech
Apr 05 2017 15:07
what image are you trying to download ?
Ene Catalin
@EneCatalin
Apr 05 2017 15:07
if it were that easy I'd have gotten it
the one I highlated
I don't think it registers as an image for some reason
gulptech
@gulptech
Apr 05 2017 15:11
what image ? the logo is an image, the bubbles is an image
Ene Catalin
@EneCatalin
Apr 05 2017 15:16
how did you get that ?
I saved the whole page
h1tag
@h1tag
Apr 05 2017 15:16
you have to check the source code
gulptech
@gulptech
Apr 05 2017 15:17
or download the wordpress theme…it is free :)
h1tag
@h1tag
Apr 05 2017 15:17
right click > inspect element
this one is in the CSS code
Ene Catalin
@EneCatalin
Apr 05 2017 15:18
omg
h1tag
@h1tag
Apr 05 2017 15:18
lol
Ene Catalin
@EneCatalin
Apr 05 2017 15:18
I can't believe it, it was there, in a link form
I tried to look at it that way but didn't think of looking trough the code in the down part thingy
gulptech
@gulptech
Apr 05 2017 15:19
in chrome…inspect, then go sources..
Ene Catalin
@EneCatalin
Apr 05 2017 15:19
I was just looking at the page structure and going wtf...
h1tag
@h1tag
Apr 05 2017 15:19
inspect element, shows the code for that specific element
it's good to learn the browser developer tools
Ene Catalin
@EneCatalin
Apr 05 2017 15:21
yeah, I actually feel retarded sometimes, took me about 2 days before I noticed how to look at variable values in js console
Jordy
@JordyDew
Apr 05 2017 15:21
@fortMaximus sorry, but I had some problems with my computer! I am back now!
I added the link, and how can I put the content in the middle columns, like you said?
maxblanch
@maxblanch
Apr 05 2017 15:22
Hey guys, here's my first front-end basic projet. Feel free to comment ! http://codepen.io/maxblanch/full/bqJBJJ/
h1tag
@h1tag
Apr 05 2017 15:22
@JordyDew remember when you told me before about the remaining free columns would be an empty space
James Dimitrakopoulos
@JamesDimi
Apr 05 2017 15:24
Guys need help
why wont my col offset -4 like i write ?
Gulsvi
@gulsvi
Apr 05 2017 15:24
@maxblanch Nice job. The col-xs class doesn't exist in Bootstrap 4, change col-xs-12 to col-12. You may also want to reduce the font size of "Musk's Acheivements" so it fits better on smaller screens. (and fix the spelling :))
h1tag
@h1tag
Apr 05 2017 15:25
so you will have to create an equal empty space around the elements (equal number of free columns to the right and left of the elements) @JordyDew
Jordy
@JordyDew
Apr 05 2017 15:25
@fortMaximus I don't understand it anymore. normally, I added all the code to one large column, but the timeline is a row of 12 columns wide...
Gulsvi
@gulsvi
Apr 05 2017 15:26
Jordy
@JordyDew
Apr 05 2017 15:27
@fortMaximus I haven't seen your message! I try it immediately!
James Dimitrakopoulos
@JamesDimi
Apr 05 2017 15:27
@SkyCoder01 lol never noticed codepen changed from bootsrap 3 to 4
@SkyCoder01 thanks a lot :)
CamperBot
@camperbot
Apr 05 2017 15:27
jamesdimi sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 869 | @skycoder01 |http://www.freecodecamp.com/skycoder01
maxblanch
@maxblanch
Apr 05 2017 15:27
@SkyCoder01 Oups for the spelling ! I don't like the headings h1 to h6. So I found the display-1 to 4 class on bootstrap 4. font-weight is smaller
Gulsvi
@gulsvi
Apr 05 2017 15:27
@JamesDimi Oh yeah,lol, you could also change to bootstrap 3 :)
James Dimitrakopoulos
@JamesDimi
Apr 05 2017 15:28
@SkyCoder01 what do you think is better? Keep 3 or starting to get used to 4?
Gulsvi
@gulsvi
Apr 05 2017 15:28
@JamesDimi It's probably good to learn bootstrap 4, but don't get comfortable with the class names. They may change again when they release the beta
James Dimitrakopoulos
@JamesDimi
Apr 05 2017 15:29
@SkyCoder01 ok gonna try it , thanks a lot~
CamperBot
@camperbot
Apr 05 2017 15:29
jamesdimi sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: jamesdimi already gave skycoder01 points
Gulsvi
@gulsvi
Apr 05 2017 15:30
@maxblanch You could also maybe check out Media Queries in CSS. It will let you choose the font size based on the width of the screen: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Ene Catalin
@EneCatalin
Apr 05 2017 15:31
oh another quick one, does the default bootstrap navbar come with a margin ?
Gulsvi
@gulsvi
Apr 05 2017 15:32
@EneCatalin I think there's a small bottom margin, but nothing on left-right-top
(for bootstrap 3 anyway :p)
KatSaldivar
@KatSaldivar
Apr 05 2017 15:33
@sonjaSch How do you make only the bg transparent?
Ene Catalin
@EneCatalin
Apr 05 2017 15:33
right, thanks, that explains it
h1tag
@h1tag
Apr 05 2017 15:36
@SkyCoder01 Hey!
gulptech
@gulptech
Apr 05 2017 15:36
i don’t think bootstrap4 has any bottom margin
Gulsvi
@gulsvi
Apr 05 2017 15:36
Hi @fortMaximus :) how are you today?
@EneCatalin none on bootstrap 4 either. https://v4-alpha.getbootstrap.com/examples/navbars/
h1tag
@h1tag
Apr 05 2017 15:37
Good. you?
@SkyCoder01 TY
CamperBot
@camperbot
Apr 05 2017 15:37
fortmaximus sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 870 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 05 2017 15:37
It depends on the navbar type - some have a bottom margin
Doing okay. Thanks! Just waking up @fortMaximus :coffee:
CamperBot
@camperbot
Apr 05 2017 15:38
skycoder01 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 706 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Apr 05 2017 15:38
:cake:
Jordy
@JordyDew
Apr 05 2017 15:39
@fortMaximus Thankyou! Does that look better?
http://codepen.io/JordyDew/full/xqeYgZ/
CamperBot
@camperbot
Apr 05 2017 15:39
jordydew sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 707 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Apr 05 2017 15:41
@JordyDew you still didn't change the Bootstrap link to version 3
Adam Simonini
@adamsimonini
Apr 05 2017 15:41
anyone else have problems where webpages run fine when loaded from their desktops, but are missing style components when run from codepen?
Gulsvi
@gulsvi
Apr 05 2017 15:43
@collabitron A lot of people accidentally set up their codepen with Bootstrap 4 but have Bootstrap 3 running locally.
Or, they don't set up the stylesheets correctly in codepen which causes CSS settings to not work as expected
Adam Simonini
@adamsimonini
Apr 05 2017 15:46
@SkyCoder01 all my my libraries use CDNs so as to avoid running libraries locally. From my understanding, if I load the same URL into the codepen under "add extrnal" then it should work
perhaps my issue is that my local CSS file isn't loading, but I thought simply copying and pasting the CSS from my local file to the codepen file would work seamlessly
Gulsvi
@gulsvi
Apr 05 2017 15:47
@collabitron Yes, that should work. You can also just copy / paste everything you have in between your <head> tags to the "Stuff for <head>" section in the Settings for your project
Adam Simonini
@adamsimonini
Apr 05 2017 15:48
@SkyCoder01 oh interesting. I didn't know that existed. I will do that now. Also, for my local JS and CSS files, which have locally directed links in my HTML, there should not be a problem so long as I copy and paste the contents of those files directly into codepen in the appropriate places, right?
Gulsvi
@gulsvi
Apr 05 2017 15:49
@collabitron Yeah, that will work fine
Adam Simonini
@adamsimonini
Apr 05 2017 15:49
here is an example of a codepen of mine that is missing some styling, specifically on the H1 as well as the input area for the search http://codepen.io/AJSIM/pen/qrwRwQ
Gulsvi
@gulsvi
Apr 05 2017 15:49
Just make sure you don't have the <body> tags in your HTML or anything outside of those tags. Remove any <script> tags and make sure they're set up as external resources
Adam Simonini
@adamsimonini
Apr 05 2017 15:50
ah, so there are additional rules to using codepen that I didn't know about. I was copying and pasting everything into the html
Gulsvi
@gulsvi
Apr 05 2017 15:50
Yeah, codepen adds <body> for you and everything else goes into settings
You'll want to make sure your scripts load in the right order too - jquery first, then libraries that need jQuery listed after that, for example
Jordy
@JordyDew
Apr 05 2017 15:51
@fortMaximus Could you try again? Normally, I changed the Bootstrap link. If not, then is there a relly strange problem here!
Adam Simonini
@adamsimonini
Apr 05 2017 15:52
@SkyCoder01 thanks for the help this far! I'm already regaining some of the styling I was missing :)
CamperBot
@camperbot
Apr 05 2017 15:52
collabitron sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 871 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 05 2017 15:52
No problem!
h1tag
@h1tag
Apr 05 2017 15:53
@JordyDew yes, the Bootstrap link is ok now
Jordy
@JordyDew
Apr 05 2017 15:54
@fortMaximus So, it all looks good now?
Lennie Lenford
@drgs100
Apr 05 2017 15:58
Anyone else get stuck bringing JSON into Codepen? I'm working on the Random Quote Machine.
h1tag
@h1tag
Apr 05 2017 15:58
@JordyDew you're nesting a row inside a row, I don't think this is necessary and it will not achieve the centering effect that you're trying to achieve
I am not sure, I'll take a look at it later
gulptech
@gulptech
Apr 05 2017 15:59
@JordyDew look at the jumbotron
Jordy
@JordyDew
Apr 05 2017 16:00
@gulptech what is that?
gulptech
@gulptech
Apr 05 2017 16:00
check on the bootstrap website
Gulsvi
@gulsvi
Apr 05 2017 16:04
@drgs100 Check your browser's debug console for errors, usually Ctrl+Shift+J. JSON requests work great with codepen, as long as the API you're calling supports cross origin requests.
Isan Bothra
@isanbothra
Apr 05 2017 16:05
hello
Jordy
@JordyDew
Apr 05 2017 16:06
@gulptech I looked it up, but one question left: what are the advantages?
gulptech
@gulptech
Apr 05 2017 16:07
style it can look much better
h1tag
@h1tag
Apr 05 2017 16:09
@JordyDew "A jumbotron indicates a big box for calling extra attention to some special content or information." from w3schools website
Jordy
@JordyDew
Apr 05 2017 16:13
@fortMaximus and @gulptech Yes, I also found that! I added a jumbotron; does it look fine? And I removed the nested row divs... Is it okay?
h1tag
@h1tag
Apr 05 2017 16:14
@JordyDew I'll be right back
in 10 mins
Jordy
@JordyDew
Apr 05 2017 16:17
@fortMaximus Ok, to then.
h1tag
@h1tag
Apr 05 2017 16:24
@JordyDew OK, it looks better now :+1:
@JordyDew Do you have an image in your mind or an outline in your mind of how it should look like?
Simon Miller
@simonmillerr
Apr 05 2017 16:32
Why is nothing coming through my console.log?!Can anyone help me.
Gulsvi
@gulsvi
Apr 05 2017 16:33
@simonmillerr Check your debug console - you'll see the error
DmitriiVacula
@DmitriiVacula
Apr 05 2017 16:34
Can someone tell me please how to set the background-image for this website(http://dmitriivacula.uphero.com/days/day8/animalsounds.html), the code is here http://codepen.io/DmitriiVacula/pen/mWQQVV?editors=1100.
Simon Miller
@simonmillerr
Apr 05 2017 16:35
ok ill try @SkyCoder01
thanks @SkyCoder01
CamperBot
@camperbot
Apr 05 2017 16:35
simonmillerr sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 873 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 05 2017 16:35
@simonmillerr If you're on windows/linux, it's Ctrl+Shift+J
Simon Miller
@simonmillerr
Apr 05 2017 16:35
what about mac
I know mac sux
btw
Gulsvi
@gulsvi
Apr 05 2017 16:36
@simonmillerr On Mac, I'm not sure - maybe you can right-click the page, choose "inspect" and then find something like "console" after that.
Google will know better than me :)
Simon Miller
@simonmillerr
Apr 05 2017 16:37
ok
really appreciate it
h1tag
@h1tag
Apr 05 2017 16:39
@DmitriiVacula do you mean the image in the header?
if yes, right click the image, then choose copy image location
greggy
@glonsdale
Apr 05 2017 16:42
Afternoon yall
I'm trying to call the wikipedia api. when i paste my url into my browser it shows me the JSON
but my ajax call isnt working
it just says request cancelled
kirbyedy
@kirbyedy
Apr 05 2017 16:43
@simonmillerr command+alt+I
Gulsvi
@gulsvi
Apr 05 2017 16:44
@glonsdale Are you using a form and seeing the page refresh?
greggy
@glonsdale
Apr 05 2017 16:44
any ideas what might be causing this?
yes
ive tried all combos of http/https
Gulsvi
@gulsvi
Apr 05 2017 16:45
The default behavior of a form is to submit the data and refresh the page - you can prevent that with the preventDefault method
Simon Miller
@simonmillerr
Apr 05 2017 16:45
ayy thanks @kirbyedy
CamperBot
@camperbot
Apr 05 2017 16:45
simonmillerr sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1989 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
greggy
@glonsdale
Apr 05 2017 16:45
ah i see
let me try that
Ene Catalin
@EneCatalin
Apr 05 2017 16:45
so I've got another question, how can bootstrap override my css when I include my css file after ?
Ene Catalin
@EneCatalin
Apr 05 2017 16:45
so I include bootstrap, then I include mine. I thought the order or inclusion mattered
I just realized this after I got blocked and tried an !important to check
Gulsvi
@gulsvi
Apr 05 2017 16:46
@EneCatalin The order should matter - bootstrap's utility classes use !important though, and then order won't matter. It could also be a matter of how you have it set up in codepen
There's also the issue of CSS specificity - if bootstrap's CSS is more specific than yours on some elements, they win
Ene Catalin
@EneCatalin
Apr 05 2017 16:49
I am using my local pc for this
anyway, thanks for the tip
also, for good practice, if I use an !important should I do something after ? Like say at the top/bot of my page I used that tag or anything ? It seems like a headache waiting to happen
h1tag
@h1tag
Apr 05 2017 16:52
@JordyDew actually your bootstrap still needs some work. I'll be here for one more hour. If you get here before I leave, we will work on it . If not, then tomorrow
Gulsvi
@gulsvi
Apr 05 2017 16:53
@EneCatalin As a good practice, you should never use !important - 99.999% of the time, there is another way
Ene Catalin
@EneCatalin
Apr 05 2017 16:54
I had that feeling
Gulsvi
@gulsvi
Apr 05 2017 16:55
Ask here and we'll help you find the right selector so you don't have to use !important
Ene Catalin
@EneCatalin
Apr 05 2017 16:56
this creates a problem for me, wait, I am trying to figure it out
Joe Avery
@javery0
Apr 05 2017 16:56
Hey, basically trying to align an image (inside of a div) to the center and for some reason just cannot get it to work
Ene Catalin
@EneCatalin
Apr 05 2017 16:57
so I am trying to modify the breadcrumb padding. It took me a while (retarded) to realize the trick to making text stick over an image (css background image) so I went ahead and put that in a bootstrap crumble element
now the crumble thingy went with the width of my text so, of course, I decided to pad it and discovered it works, but only the bottom half. Top is stuck
Gulsvi
@gulsvi
Apr 05 2017 16:58
@javery0 What's your code look like?
Ene Catalin
@EneCatalin
Apr 05 2017 16:59
and I can't really center my text (or I have no idea how to) without adding equal padding to both top and bot
h1tag
@h1tag
Apr 05 2017 16:59
Gulsvi
@gulsvi
Apr 05 2017 16:59
@EneCatalin Are you using bootstrap 4 or 3?
Joe Avery
@javery0
Apr 05 2017 17:00
Thanks man
Gulsvi
@gulsvi
Apr 05 2017 17:00
Bootstrap 4 has vertical alignment classes built in
Ene Catalin
@EneCatalin
Apr 05 2017 17:00
ooooooooooooooops
massive fuck up, it turns out it works in codepen
so my previous css is probably interfering
h1tag
@h1tag
Apr 05 2017 17:01
lol
Ene Catalin
@EneCatalin
Apr 05 2017 17:01
thing is, I haven't touched the breadcrumb class before so I am really stuck
nvm
3 lines above
h1tag
@h1tag
Apr 05 2017 17:02
me neither
Ene Catalin
@EneCatalin
Apr 05 2017 17:02
ol.breadcrumb{
padding-top:0;
}
that was written
I don't know the emoji for facepalm
h1tag
@h1tag
Apr 05 2017 17:03
:facepunch: would do it
Gulsvi
@gulsvi
Apr 05 2017 17:03
:weary: :palm_tree:
h1tag
@h1tag
Apr 05 2017 17:03
lol
it took me a second
Gulsvi
@gulsvi
Apr 05 2017 17:04
I try :)
Ene Catalin
@EneCatalin
Apr 05 2017 17:04
sorry guys, I need to find a way to organize my css, it's kind of a mess
h1tag
@h1tag
Apr 05 2017 17:10
“Sometimes when I’m writing JavaScript I want to throw up my hands and say “this is bull**!” but I can never remember what “this” refers to.” — Ben Halpern
yoni chanowitz
@yonichanowitz
Apr 05 2017 17:16
@fortMaximus LOL
Jordy
@JordyDew
Apr 05 2017 17:17
@fortMaximus Do you mean a picture of the layout?
h1tag
@h1tag
Apr 05 2017 17:19
@JordyDew not an actual one, but like how do you imagine it to look like or if there's a rough outline of how do you want it to look like that you can describe in text
Jordy
@JordyDew
Apr 05 2017 17:23
@fortMaximus Not very detailed, but I think about something like the following:
One big column with text, a heading one with a picture of my own braille display next to it; the timeline is a list on the full width of my page with four items next to each other.
That's what I wanted; simple but useful...
That's the easiest to build, when you don't see anything :-)
h1tag
@h1tag
Apr 05 2017 17:25
@JordyDew it looks exactly like you described :smile:
but because you have a typo
and if you fix that typo it'll not look as you described
on the 4th row in the html code you have this <div class="-col-md-6">
there's a dash before col-md-6
Jordy
@JordyDew
Apr 05 2017 17:28
@fortMaximus Thank you very much! Without your help, I wouldn't be become as far as I am now!! Front End development and visual programming are very hard, when you can't see anything :-) I just thought: let's try it... And what do you mean with your 2nd sentence?
CamperBot
@camperbot
Apr 05 2017 17:28
jordydew sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 708 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Apr 05 2017 17:29
@JordyDew a typo is A mistake made in the typing process of printed material
a typographical error
Jordy
@JordyDew
Apr 05 2017 17:31
@fortMaximus Thanks again! Normally, it should be solved. Is that the only one?
CamperBot
@camperbot
Apr 05 2017 17:31
jordydew sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: jordydew already gave fortmaximus points
h1tag
@h1tag
Apr 05 2017 17:33
@JordyDew yes
@JordyDew you also have columns nested inside each other, this may not give you the desired result
Jordy
@JordyDew
Apr 05 2017 17:35
@fortMaximus Allright! I started yesterday, and I only skipped most Bootstrap challenges. Now, I made my first looking good webpage with the help of the community!
Thanks for all!
CamperBot
@camperbot
Apr 05 2017 17:35
jordydew sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: jordydew already gave fortmaximus points
h1tag
@h1tag
Apr 05 2017 17:35
@JordyDew :thumbsup:
Jordy
@JordyDew
Apr 05 2017 17:36
@fortMaximus Right? What should I have to do?
h1tag
@h1tag
Apr 05 2017 17:36
@JordyDew can you navigate to line 4 in your html code
to line 4
never mind, you fixed it
Jordy
@JordyDew
Apr 05 2017 17:41
@fortMaximus Do I have to do something with that line?
KatSaldivar
@KatSaldivar
Apr 05 2017 17:41
I'm on the Where Art Thou algorithm and I'm having with the hasOwnProperty() stuff. its showing as false, butI don't see why its false if it contains it.
h1tag
@h1tag
Apr 05 2017 17:41
@JordyDew I was going to tell you to fix the typo that was there but you already fixed it
KatSaldivar
@KatSaldivar
Apr 05 2017 17:42
function whatIsInAName(collection, source) {
  // What's in a name?
  var arr = [];
  // Only change code below this line

  return collection[2].hasOwnProperty(source);

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

whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });
h1tag
@h1tag
Apr 05 2017 17:43
@JordyDew but after that line, you have nested columns inside the col-md-6div
Jordy
@JordyDew
Apr 05 2017 17:43
@fortMaximus Oh, yeah, I saw the extra - before col-md-6 and deleted it. Should I do something with the nested columns?
h1tag
@h1tag
Apr 05 2017 17:43
yes, remove them
Jordy
@JordyDew
Apr 05 2017 17:48
@fortMaximus I removed them, but there raised one question: lookss the unordered list anymore like I wanted?
h1tag
@h1tag
Apr 05 2017 17:49
@JordyDew no, they're not on one line anymore
@JordyDew one other suggestion is to use this columns combination col-md-2, col-md-8, col-md-2
Jordy
@JordyDew
Apr 05 2017 17:51
@fortMaximus So, what should I do to fix that? Do I need to work with several rows?
h1tag
@h1tag
Apr 05 2017 17:51
because I see that the content in the middle needs more space
Javier
@Reykjabik
Apr 05 2017 17:52
Any help with the Share twitter button on the Random Quote Machine? I've been struggling since Sunday and I'm on the verge of tears!
I have the feeling that thet HTML onclick doesn't work
h1tag
@h1tag
Apr 05 2017 17:54
@JordyDew no, just change the columns from col-md-3, col-md-6, col-md-3 to col-md-2, col-md-8, col-md-2
Jordy
@JordyDew
Apr 05 2017 17:56
@fortMaximus I changed the columns like you proposed. What it thougt to do to make the timeline one row is the following:
Give all li elements from that time line the class col-md-2 . Will that work? Or is that invalid code?
gulptech
@gulptech
Apr 05 2017 17:57
@Reykjabik unrelated but you should use background-color: rgba(255,255,255,0.5) in your .screen class and not opacity;
unless you really want to dim EVERYTHING
Gulsvi
@gulsvi
Apr 05 2017 17:58
@KatSaldivar source is equal to {last: "Capulet"}. It would return true if you did: collection[2].hasOwnProperty('last') but returns false because you are doing: collection[2].hasOwnProperty({last: "Capulet"}) (if that makes sense)
caseym94
@caseym94
Apr 05 2017 17:58
hello is this a good place to ask about github?
Javier
@Reykjabik
Apr 05 2017 17:58
I'll try that @gulptech , thanks. i guess that solves the transparency of the twitter button
CamperBot
@camperbot
Apr 05 2017 17:58
reykjabik sends brownie points to @gulptech :sparkles: :thumbsup: :sparkles:
:cookie: 236 | @gulptech |http://www.freecodecamp.com/gulptech
Isan Bothra
@isanbothra
Apr 05 2017 17:58
nav bar toggler button not functioning... need help
KatSaldivar
@KatSaldivar
Apr 05 2017 17:59
@SkyCoder01 thanks! I ended up doing collection[i].hasOwnProperty(Object.keys(source))
CamperBot
@camperbot
Apr 05 2017 17:59
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 874 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Javier
@Reykjabik
Apr 05 2017 17:59
share your pen @isanbothra
h1tag
@h1tag
Apr 05 2017 18:00

@JordyDew

ul li{
  display: inline;
}

you can use the above code in your css code but note that this will remove the bullets from the list items

Gulsvi
@gulsvi
Apr 05 2017 18:00
@Reykjabik The Twitter Widget is really hard to get working sometimes - it takes a while to load and often overwrites your quote by the time it does load. The easy way is to create your own twitter button and drop the Twitter Widget JS file entirely.
Javier
@Reykjabik
Apr 05 2017 18:02
@SkyCoder01 I guess I could try that... it's just that I assume that if we're asked to include a twitter button at this level we should try the "official" one
h1tag
@h1tag
Apr 05 2017 18:04
@isanbothra add jQuery and Bootstrap JS file in that order
Javier
@Reykjabik
Apr 05 2017 18:06
@SkyCoder01 btw, how can I actually "share" on twitter without the official button?
Isan Bothra
@isanbothra
Apr 05 2017 18:06
but it is done without using jquery in :
@fortMaximus
Gulsvi
@gulsvi
Apr 05 2017 18:06
@Reykjabik To use the official button, check out the JavaScript createShareButton method: https://dev.twitter.com/web/tweet-button/javascript-create
Jordy
@JordyDew
Apr 05 2017 18:07
@fortMaximus Thank you! I did so!
CamperBot
@camperbot
Apr 05 2017 18:07
jordydew sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: jordydew already gave fortmaximus points
Gulsvi
@gulsvi
Apr 05 2017 18:07
Otherwise, just use the URL explained here: https://dev.twitter.com/web/tweet-button/web-intent @Reykjabik
Javier
@Reykjabik
Apr 05 2017 18:08
that's precisely what I´m using. the thing is that I only need to modify the href, but it doesn't seem to work @SkyCoder01 @SkyCoder01
Gulsvi
@gulsvi
Apr 05 2017 18:09
@Reykjabik Right, you're using it, but the twitter widget code loads asynchronously and overwrites your code. :)
Javier
@Reykjabik
Apr 05 2017 18:10
damn widget...
Gulsvi
@gulsvi
Apr 05 2017 18:10
If you're interested in seeing working code - check out my codepen here. It fires off a new quote when the twitter widget's ready event is fired and then uses the createShareButton code to append the right text to the URL: http://codepen.io/skycoder/pen/mWLYrw
Javier
@Reykjabik
Apr 05 2017 18:11
@SkyCoder01 thanks man, I'll take a look
CamperBot
@camperbot
Apr 05 2017 18:11
reykjabik sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 875 | @skycoder01 |http://www.freecodecamp.com/skycoder01
h1tag
@h1tag
Apr 05 2017 18:11
@isanbothra Im not sure about v4, still haven't learned it
Gulsvi
@gulsvi
Apr 05 2017 18:12

@isanbothra The bootstrap js file is needed for the Bootstrap 4 Navbar Button. https://v4-alpha.getbootstrap.com/components/navbar/#how-it-works

Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.

The Collapse JavaScript plugin is part of bootstrap.js
h1tag
@h1tag
Apr 05 2017 18:13
@JordyDew you can also use some padding in the CSS rule you just created
what about this?? it is working fine... @fortMaximus
@SkyCoder01
h1tag
@h1tag
Apr 05 2017 18:15
yes
Gulsvi
@gulsvi
Apr 05 2017 18:15
image.png
@isanbothra Yeah, it works fine because it's using the bootstrap.js file.
Just add it, your toggle button will work! :)
Moustapha
@moustaflo
Apr 05 2017 18:16
I am having the following error: No 'Access-Control-Allow-Origin' header is present on the requested resource.
var wikiApi =  "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=Albert%20Einstein&format=json&utf8=";
$.getJSON(wikiApi, function (data){
     document.getElementById("title").innerHTML = data.search;
  });
Moisés Man
@moigithub
Apr 05 2017 18:16
@isanbothra bootstrap internally will use that library.. but u still need to link em on ur code
even if u dont use directly
h1tag
@h1tag
Apr 05 2017 18:17
@isanbothra add jquery then this Bootstrap js file: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js in your JS editor
Gulsvi
@gulsvi
Apr 05 2017 18:18
@moustaflo Add &origin=* to your URL. http://stackoverflow.com/a/38921370
Isan Bothra
@isanbothra
Apr 05 2017 18:28
still not working... @fortMaximus @SkyCoder01
Gulsvi
@gulsvi
Apr 05 2017 18:29
@isanbothra Use the codepen settings to add external resources. Do not include <head> or <body> tags in your HTML in codepen.
Gulsvi
@gulsvi
Apr 05 2017 18:35
image.png
@isanbothra It will work fine ^^
Brian
@BrianCodes33
Apr 05 2017 18:37
trying to install bower via command line not working. any help appreciated
Isan Bothra
@isanbothra
Apr 05 2017 18:37
i dont think so... tried bt nt working @SkyCoder01
Gulsvi
@gulsvi
Apr 05 2017 18:39
@isanbothra Did you click "Run"? It seems to be working now
Isan Bothra
@isanbothra
Apr 05 2017 18:42
yeah ..it got working now ? .. the problem was due to scrollspy class i was using in the body ... by the way thanxx for the solution... @SkyCoder01
CamperBot
@camperbot
Apr 05 2017 18:42
isanbothra sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 876 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 05 2017 18:43
Glad you got it working!
Isan Bothra
@isanbothra
Apr 05 2017 18:43
but why i hav to include jscript file .. can you explain..??
maxblanch
@maxblanch
Apr 05 2017 18:45
Campers, when using CodePen to make projects, are you implementing bootstrap and jQuery within the settings of codePen or you link them in the html file with CDN ?
Is there a better way than the other ?
Isan Bothra
@isanbothra
Apr 05 2017 18:46
it is because of bootstrap classes are using jquery?? or anything else??
Gulsvi
@gulsvi
Apr 05 2017 18:46
@isanbothra It's a requirement from Bootstrap. They require that .js file for many of their components: https://v4-alpha.getbootstrap.com/getting-started/javascript/
Yes, their bootstrap JS file uses jQuery - so jQuery is also required
Isan Bothra
@isanbothra
Apr 05 2017 18:48
thanxx for the explanation...
how to align contents of navbar to the right??
Moustapha
@moustaflo
Apr 05 2017 18:54
@SkyCoder01 thanks!
CamperBot
@camperbot
Apr 05 2017 18:54
:cookie: 877 | @skycoder01 |http://www.freecodecamp.com/skycoder01
moustaflo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Isan Bothra
@isanbothra
Apr 05 2017 18:57
how to align contents of navbar to the right??
Gulsvi
@gulsvi
Apr 05 2017 18:58
@isanbothra Remove the mr-auto class from your <ul> element in your navbar.
gulptech
@gulptech
Apr 05 2017 18:58
change your mr-auto to ml-auto
Gulsvi
@gulsvi
Apr 05 2017 18:59
I don't think you need to specify an auto margin to make it align right
unless, you mean to use ml-auto on individual links for the mobile menu as well
  <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
   <ul class="navbar-nav">
     <li class="nav-item ml-auto">
       <a class="nav-link" href="#CONTACT">Contact</a>
     </li>
     <li class="nav-item ml-auto">
       <a class="nav-link" href="#PORTFOLIO">Portfolio</a>
     </li>
     <li class="nav-item ml-auto">
       <a class="nav-link" href="#ABOUT">About</a>
     </li>
   </ul>
  </div>
Isan Bothra
@isanbothra
Apr 05 2017 19:02
yeah its working fine..
why to use ml-auto??
Gulsvi
@gulsvi
Apr 05 2017 19:03
That's my question too :)
gulptech
@gulptech
Apr 05 2017 19:03
margin-left auto
Gulsvi
@gulsvi
Apr 05 2017 19:03
No need for it, in my opinion
gulptech
@gulptech
Apr 05 2017 19:03
but it does not work without it
Gulsvi
@gulsvi
Apr 05 2017 19:03
unless it's for menu items in the mobile menu
  <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
   <ul class="navbar-nav">
     <li class="nav-item">
         <a class="nav-link" href="#ABOUT">About</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#PORTFOLIO">Portfolio</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#CONTACT">Contact</a>
     </li>
   </ul>
  </div>
^^ This works fine for aligning navbar items to the right
Jorge
@OrangeKulture
Apr 05 2017 19:05
Some text
Gulsvi
@gulsvi
Apr 05 2017 19:05
And better to use text-right on the individual <li> elements if you want the mobile collapse menu to also align right
Jorge
@OrangeKulture
Apr 05 2017 19:05
ahh ok .. finally got that nice formatting u got going on Sky
Gulsvi
@gulsvi
Apr 05 2017 19:06
```js (shift + Enter for new line)
awesome code (shift + Enter for another new line)
```
Jorge
@OrangeKulture
Apr 05 2017 19:06
yeah exactly right .. great stuff, thanks .. was missing the
shift enter
Isan Bothra
@isanbothra
Apr 05 2017 19:08
why we cannot use mr-auto when using justify-content-right??
greggy
@glonsdale
Apr 05 2017 19:09
'''
'''
CamperBot
@camperbot
Apr 05 2017 19:09
:bulb: to format code use backticks! ``` more info
greggy
@glonsdale
Apr 05 2017 19:10
  $('form').each(function() {
    $(this).find('input').keypress(function(e) {
      // Enter pressed?
      if (e.which == 10 || e.which == 13) {
        this.form.submit();
        query(this.value);//pass input to api_url for ajax
      }
    });
  });
hi all
this is the code im using to submit text to my js
Gulsvi
@gulsvi
Apr 05 2017 19:10

@isanbothra mr-auto is this in bootstrap.css:

.mr-auto {
  margin-right: auto !important;
}

auto means to automatically adjust for the full width available.

gulptech
@gulptech
Apr 05 2017 19:10
@SkyCoder01 i missed the justify-content-end..so yes..there would be no need to the ml-auto
Gulsvi
@gulsvi
Apr 05 2017 19:11
It's hard, to be honest, getting used to seeing flexbox in Bootstrap :p
gulptech
@gulptech
Apr 05 2017 19:11
yep
Gulsvi
@gulsvi
Apr 05 2017 19:11
I resisted at first, but finally learning more about it as a result
greggy
@glonsdale
Apr 05 2017 19:11
earlier i asked why my api call was not working and @SkyCoder01 suggested that it might be because my page is refreshing on submit
@SkyCoder01 you said to use .preventDefault()
Gulsvi
@gulsvi
Apr 05 2017 19:12
@glonsdale Yes, here's an example: http://codepen.io/skycoder/pen/MpKpJj
I wrote comments in a way that act kind of as a tutorial for grabbing text from a text box to submit to an API
When you have your <input> in a <form> the browser will do the keypress monitoring for you. No need to check for keypresses, just register a listener for the submit event with .on('submit', function...)
greggy
@glonsdale
Apr 05 2017 19:18
thanks @SkyCoder01 this is very helpful and gives me some more things to try
CamperBot
@camperbot
Apr 05 2017 19:18
glonsdale sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 879 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Mojammel
@MojammelW
Apr 05 2017 19:30
Hey guys why isnt my navbar working in collapsed mode ?
Am i missing a </ul> and </div> cos i deleted those when trying to remove the clutter from the navbar
https://codepen.io/MojammelW/pen/QpYdqg
drowningpool5
@drowningpool5
Apr 05 2017 19:33
Hi guys! I am having some problems with Promodoro Clock.
http://codepen.io/ImproveMyselfDaily/pen/dvaLep?editors=1010
Moustapha
@moustaflo
Apr 05 2017 19:33
With wikipedia API how do I capture the element's link?
drowningpool5
@drowningpool5
Apr 05 2017 19:33
i figured out the countdown, but I don't know how to convert these 25 units, which are minutes to 0:25:00
Mojammel
@MojammelW
Apr 05 2017 19:34
is there a software which runs through the code to test it and lets you know where you made errors?
Moustapha
@moustaflo
Apr 05 2017 19:36
@MojammelW have you tried the console?
Ken Haduch
@khaduch
Apr 05 2017 19:36
@MojammelW - there are a few things that help with this, depending on which phase of development you are doing. If it is HTML, you can try the "Analyze HTML" tools in the CodePen HTML tab, also the "Tidy HTML" is useful for showing the structure a little better, sometimes it just takes examination of the code in that way. There is a tool online https://validator.w3.org/ that you can feed your HTML source into and it does validation, it will catch some of those things.
@MojammelW - and it looks like you haven't loaded the bootstrap.js in your JS external libs. Since you are using V3, add this link: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js -- no tool would have found that, most likely. You just have to find that info in the docs.
drowningpool5
@drowningpool5
Apr 05 2017 19:39
Could someone give me some hints on Promodoro Clock? :) pls
so far... i've done this
Mojammel
@MojammelW
Apr 05 2017 19:39
i put bootstrap on css @khaduch
Ken Haduch
@khaduch
Apr 05 2017 19:40
@MojammelW - you also need the JavaScript file bootstrap.js for the minimized toolbar, put it in there after jquery.js, make sure to use the V3 link that I posted.
Mojammel
@MojammelW
Apr 05 2017 19:41
how do i use the validator v3 link
Ken Haduch
@khaduch
Apr 05 2017 19:43

@MojammelW - the way that I usually use it for CodePen projects is to run the project in the debug view, right click, and "View Page Source". Copy and paste that into the validator.w3.org "Validate by Direct Input" tab, then run the "Check" - it will dump a bunch of errors if you have them.

But you don't need it for this navbar problem - just add that JS, and re-run your page, it should work. It did for me.

Tiara
@tiaratang
Apr 05 2017 19:43
how do I get the api json function to work on mobile it works through my lab top but when I check it from my phone the quotes don't come up http://codepen.io/tiaratang/pen/peYqmq
Mojammel
@MojammelW
Apr 05 2017 19:45
@khaduch thanks man, so how far along are you in the free code camp?
Ken Haduch
@khaduch
Apr 05 2017 19:45
@tiaratang - it works for me on my phone? I just had to scroll down to see them.
@MojammelW - still working on the front end stuff... I spend most of my time on the chat rooms helping, when I'm not learning through other resources... too many irons in the fire!
Mojammel
@MojammelW
Apr 05 2017 19:49
do you find it dificult? i dont find it difficult when im being told exactly what i need to do but someof it goes over my head when im doing the projects
@khaduch how do i change the colour of a panel
Ken Haduch
@khaduch
Apr 05 2017 19:51
@MojammelW - yeah, I run into that sometime. You need to get the foundation of the lessons, and then bang your head against the wall on the projects to really put things into practice and have them fall into place. That's where I run into problems - remembering all of the gory details! The repetition / practice of helping in the chat rooms with the projects, along with outside learning is where I'm getting a lot of mileage. Just too many things to learn!
Mojammel
@MojammelW
Apr 05 2017 19:51
yeah its really fun though
Ken Haduch
@khaduch
Apr 05 2017 19:52
what panel do you want to change? You can put a class on it, and write the CSS code to set background-color: blue; for example, if that's what you want to do?
Isan Bothra
@isanbothra
Apr 05 2017 19:52
scrollspy not working??
Mojammel
@MojammelW
Apr 05 2017 19:53
@khaduch ill try that
khaduch @khaduch - going to the kitchen... I'll check back later.
Mojammel
@MojammelW
Apr 05 2017 19:57
@khaduch https://codepen.io/MojammelW/pen/QpYdqg theres a line through the top of my panel
https://codepen.io/freeCodeCamp/full/YqLyXB how do i get boxes to type in in the middle like this sample?
Ken Haduch
@khaduch
Apr 05 2017 20:05
@MojammelW - it looks like they are using flexbox settings - it helps with alignment of things on a page quite nicely. I don't know a lot about it - one of the things that I'm trying to get into my toolbox. You can look for resources to help you learn it, or try this: http://flexboxfroggy.com/ - a game, of sorts, that shows how flexbox works.
Abraham
@AbrahamLN
Apr 05 2017 20:13
I'm trying to create an index using bootstrap's well div, but I can't seem to make it work. Any help?
Gulsvi
@gulsvi
Apr 05 2017 20:17
@AbrahamLN Small typo, use = instead of -: <div class-"well">
BUT, another issue is that the well class doesn't exist in Bootstrap 4, which is the default in codepen. To use Bootstrap 3 (which has the Well class), replace your link to bootstrap in your codepen settings with: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Or, if you want to use bootstrap 4, try out the new cards. Those replaced the well class: https://v4-alpha.getbootstrap.com/components/card/
yoni chanowitz
@yonichanowitz
Apr 05 2017 20:18
@AbrahamLN where does your .container end?
Abraham
@AbrahamLN
Apr 05 2017 20:18
@SkyCoder01 Oh I see. That makes more sense. Perhaps FCC should edit that lesson to go with the new changes. Thanks!
CamperBot
@camperbot
Apr 05 2017 20:18
abrahamln sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 880 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 05 2017 20:19
I think they will - they're working on a new update to all the materials which should release soon
Abraham
@AbrahamLN
Apr 05 2017 20:20
@yonichanowitz I didn't end it my