staceyland sends brownie points to @aprim05 and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 240 | @aprim05 |http://www.freecodecamp.com/aprim05
:cookie: 610 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
arapl3y sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1407 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
luis4flames sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1413 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
dirtier sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 732 | @sorinr |http://www.freecodecamp.com/sorinr
hey guys im trying to fade some buttons out in vanilla JS
[4:16]
it works but is a bit glitchy
[4:16]
when you click one button, a new div is meant to appear, which it does, but not alway :confused:
heres my codepen
[4:16]
http://codepen.io/JackEdwardLyons/pen/WGvrEd?editors=1010
// Fade out buttons
function fadeOut(element) {
var opacity = 1,
fps = 1000/60;
function decrease () {
opacity -= 0.05;
if (opacity <= 0) {
opponent_button_container.setAttribute("style", "display: block; opacity: 1;");
// complete fadOut for both buttons
element.style.display = "none";
//opponent_button_container.style.display = "none"
return true;
}
element.style.opacity = opacity;
setTimeout(decrease, fps);
}
decrease();
}
function sumPrimes(num) {
var sum=0;
for(var i=2;i<=num;i++){
var count=false;
for(var j=2;j<=i;j++){
if(i%j===0){
count=true;
break;
}
}
if (count===false)
sum+=i;
}
return sum;
}
sumPrimes(10);
:cookie: 126 | @michaelcjefferson |http://www.freecodecamp.com/michaelcjefferson
annunirmal sends brownie points to @michaelcjefferson :sparkles: :thumbsup: :sparkles:
i have an array of object
var temp = [
{"category":"Packet","count":2,"dayText":"day6"}
{"category":"Packet","count":4,"dayText":"day6"}
{"category":"Packet","count":1,"dayText":"day6"}
]
i want to print allvalues of count how to do it?
@pradxj07 @spot1000 i treid
for (var key in temp1) {
if (temp1.hasOwnProperty(key)) {
console.log(temp1[key].count);
}
}
var temp = [ {"category":"Packet","count":2,"dayText":"day6"}, {"category":"Packet","count":4,"dayText":"day6"}, {"category":"Packet","count":1,"dayText":"day6"} ]
for (var key in temp) {
if (temp.hasOwnProperty(key)) {
console.log(temp[key].count)
}
}
var test =5 ;
document.querySelectorAll(".bubble-plot-chart-circle[r= " + test + " ]");
how to pass the variable test to this syntax??
@lukearthwalker What's in a personal portfolio? At a basic level?
There you have three sections of your portfolio page already.
nabins13 sends brownie points to @spot1000 :sparkles: :thumbsup: :sparkles:
:cookie: 371 | @spot1000 |http://www.freecodecamp.com/spot1000
@lukearthwalker Let's look at the user stories and see what we can do.
User Story: I can access all of the portfolio webpage's content just by scrolling.
That's easy, this is just saying that this will be a single page application.
User Story: I can click different buttons that will take me to the portfolio creator's different social media pages.
Go back to the button section on basic HTML section and this will help you.
User Story: I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)
Again, how would you approach using a thumbnail, is it a normal image? Is it something you can use with bootstrap.
User Story: I navigate to different sections of the webpage by clicking buttons in the navigation.
Again, there's a section about this in the basic HTML section.
addClass
freely
src
of the img
tag
<h2 class="red-text">CatPhotoApp</h2>
<a href="http://www.freecatphotoapp.com"."> </a>
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p>View more <a href ="http://www.freecatphotoapp.com">cat photos</a></p>
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
nabins13 sends brownie points to @ayoisaiah :sparkles: :thumbsup: :sparkles:
:cookie: 202 | @ayoisaiah |http://www.freecodecamp.com/ayoisaiah
<form action="/uploads" action="/submit"........</form>
?
Hi! Question on jQuery:
I am trying to add a banner to my Tic Tac Toe project where it asks you if you want X or O. I do that with a jQuery .html call, but after, I would like the banner to go away when I click one of the buttons: X or O. Is there a way to do that? to turn off the .html call? Thank you.
$("#preGame").html("<div class=\"preGameSet\"><p class=\"questionPG\">Do you want to play X's or O's?</p><div class=\"btnArea\"><button class=\"preGameBtn\" onclick=\"switchOX();\">X</button><button class=\"preGameBtn\" onclick=\"switchOX();\">O</button></div></div>");
belodpav sends brownie points to @chinuxparibus :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @chinuxparibus |http://www.freecodecamp.com/chinuxparibus
belodpav sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 733 | @sorinr |http://www.freecodecamp.com/sorinr
<div class="col-md-6 text-center"><button...
@flopywood , I don't think you need the cols/rows, this seems to center everything: <div class="container center">
<div class="simon" align="center">
<div id="blue" class="gameButton"></div>
<div id="pink" class="gameButton"></div>
<div id="yellow" class="gameButton"></div>
<div id="green" class="gameButton"></div>
<button type="button" id="start">Start</button>
<button type="button" id="reset">Reset</button>
</div>
</div>
<div id="result"></div>
div
tags in the wrong order. I just had to reverse my order and it fixed itself. I'll go ahead and take a look at your code now. :)
getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
https://crossorigin.me/
to the front of your weather URL to get around that.
location + weather_data + icon_img_url
all in one URL. https://api.wunderground.com/api/<API KEY>/conditions/q/autoip.json
sigurdlex sends brownie points to @sjames1958gm and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 577 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:star2: 3513 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
a
tag in li
of navbar to get it formatted correctly right side<li><a href = "#">Contact</li>
<li><a href = "#">Contact</a></li>
danielstoica85 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 578 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:cookie: 579 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
lukearthwalker sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
ul
tags and you closed only one ul
tag at end
navbar-right
class to ul
tag then the links will be on right side
navbar-brand
color use this class in CSS .navbar-default .navbar-brand
.navbar-default .navbar-nav>li>a
@Wilson-Oberholzer - one thing that you have to watch out for, with CodePen, is that CodePen uses a template to generate your page. So you would have a possible problem with things being loaded in different order than you are anticipating, for example, your HTML panel, which should only be code that goes in the <body>
section, it being loaded after your CSS panel, so that any settings in your custom CSS might be overridden by the CSS stylesheets that you have at the top of the body. SO - in CodePen: the HTML panel should only have HTML elements in it - but not the <html>
, <head>
, <body>
, <style>
, <script>
and their closing tags. There are places in the HTML config for things that you might want to put into the head of the page, the CSS tab and config is for all CSS code and external sheets, and the JS tab for all JS-related info. Doing things other than that result in invalid HTML. That being said, it doesn't always cause a problem, but it could result in conflicts and things being loaded in an order that could cause problems, and definitely I've seen problems on mobile devices with some of these things.
Move your CSS stylesheets that you are loading into the CSS config external libs slots, remove them from your HTML editor panel. Take out the <body>
tags. Give that a try and see if it helps...
.navbar-default .navbar-nav.li
instead of this navbar-default .navbar-nav>li>a
or you can even try navbar-default .navbar-nav li a
which is also same
.
in .navbar-default
:smile:
pawan92 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 581 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
danielstoica85 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 582 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
<style>
.thick-red-border {
border-color= red
border-width= 15px
border-style= solid
border-radius= 40%
}
<h1 class="text-primary">Bill Gates</h1>
<img class="thick-red-border" src="https://en.wikipedia.org/wiki/Bill_Gates#/media/File:Bill_Gates_June_2015.jpg">
rkzoltan sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 583 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
padding
to container which holds those images so images wont be close to edge of browser
rsmith731 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 584 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
<style>
.thick-red-border {
border-color: red;
border-width: 15px;
border-style: solid;
border-radius: 40%;
}
</style>
<h1 class="text-primary ">Bill Gates</h1>
<img class="thick-red-border" src="http://blogs-images.forbes.com/mfonobongnsehe/files/2014/09/bill-gates.jpg" alt="BillGates">
width: 95%
or90%
and margin: 0 auto
<style>
.blue-text {
color: blue;
font-size: 40p
}
.red-text {
color: red;
font size: 20p;
}
.thick-blue-border {
border-color: blue;
border-width: 15px;
border-style: solid;
border-radius: 40%;
}
.black-text {
color: black;
font-size: 15p;
}
</style>
<h1 class="blue-text">Bill Gates
</h1>
<h2 class= "red-text">The Founder of Microsoft</h2>
<img class="thick-blue-border" src="http://blogs-images.forbes.com/mfonobongnsehe/files/2014/09/bill-gates.jpg" alt="BillGates">
<h3 class="black-text">Heres A Time Line of Bill Gates's Life</h3>
<h4>1955: William Henry Gates III is born to attorney William Henry Gates II and Mary Gates, a schoolteacher, University of Washington regent and chairwoman of United Way International. He is raised in Seattle.
1967: Gates is enrolled in the Lakeside School, an exclusive private school in Seattle, where he befriends Paul Allen. The two students share an interest in computers and programming. The school notices his knack for technology and asks him to create a computerized schedule of classes.Gates’ 2005 keynote speech at Lakeside School.
MY PROBLEM IS THAT THE PARAGRAPHS ARE SHOWN TOGETHER AND NOT SEPARATED AS PARAGRAPHS. How do I fix this?
<p>Your Paragraph</p>
tag@BehindTheMath This is only difference between both if you add below css to broken.html
it will look same as working.html
body {
padding-top: 50px;
}
oh took this much long time to debug :smile:
rkzoltan sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: rkzoltan already gave vinaypuppal points
rkzoltan sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: rkzoltan already gave vinaypuppal points
position: fixed
so it is taken out of document flow so .container-fluid
div will not think it has navbar
above it so it starts at top and since bootstarp gave high z-index for navbar so its over your div
padding
to avoid that issue and if you can see in dev tools bootstrap has done same for .sidebar
you added it gave top:51px
so sidebar is not behind navbar
position:fixed
?
position:fixed
added by bootstrap as u used .navbar-fixed-top
class
rkzoltan sends brownie points to @alhazen1 :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @alhazen1 |http://www.freecodecamp.com/alhazen1
woking.html
page
broken.html
page
behindthemath sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 585 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
text-align: center
to container div of image
<div class='image-container'>
<img src="url"/>
</div>
.image-container{
text-align: center
}