Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Melissa Knapp
@MelEKn
@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
@MelEKn well i know it worked with the IDs
@MelEKn Does it just work now?
h1tag
@h1tag
@MelEKn maybe the body tags were creating conflict
Melissa Knapp
@MelEKn
@fortMaximus But I only added those after the CSS didn't work :-/
Henry
@GitHub-Henry
@fortMaximus yes, code pen is supposed to be the stuff inside the body tags, don't include body tags
Melissa Knapp
@MelEKn

@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
melekn sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: melekn already gave fortmaximus points
Jordy
@JordyDew
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

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
@MelEKn nope, remove body tags from html, and select body tags still works in codepen
Melissa Knapp
@MelEKn
The conversion works, it's just that the text isn't styled.
h1tag
@h1tag
@JordyDew the numbers mean the number of columns
Jordy
@JordyDew
yes, and what's one column?
Henry
@GitHub-Henry
@MelEKn did you try adding a class to the html
h1tag
@h1tag
@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

@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
@MelEKn the onclick part could add a class to the html which could style your text
Melissa Knapp
@MelEKn
@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
@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
if the JS generates the html, then that's where the class would be added @MelEKn
Melissa Knapp
@MelEKn
@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
@JordyDew viewports like: large screen, medium screen, small, xsmall and so on
Henry
@GitHub-Henry
@MelEKn does the link-link class get added to the html?
Melissa Knapp
@MelEKn

@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
@MelEKn the styling is working
Screenshot.png
Melissa Knapp
@MelEKn
@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
Ok, finally solved it! The problem was that it should be "<span class= ..." instead of "<a class = " ...
Jordy
@JordyDew

@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
@MelEKn congrats on your styling solution
def
@defregga
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
@GitHub-Henry Thanks. And thanks to you and @fortMaximus for taking the time to help me out :)
CamperBot
@camperbot
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
@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
where can i find my own link in Codepen