:cookie: 306 | @jtan3 |http://www.freecodecamp.com/jtan3
skycoder01 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 200 | @skycoder01 |http://www.freecodecamp.com/skycoder01
runnerbill75 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 249 | @vilfredsikker |http://www.freecodecamp.com/vilfredsikker
lifelernner sends brownie points to @vilfredsikker :sparkles: :thumbsup: :sparkles:
renniesb sends brownie points to @jonylif :sparkles: :thumbsup: :sparkles:
:cookie: 72 | @jonylif |http://www.freecodecamp.com/jonylif
.titletext {
display: flex;
justify-content: center;
align-content: center;
margin: 190px 0;
}
h2 {
position: absolute;
margin-top: 150px;
}
runnerbill75 sends brownie points to @iamworld :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @iamworld |http://www.freecodecamp.com/iamworld
:warning: renniesb already gave jonylif points
renniesb sends brownie points to @jonylif :sparkles: :thumbsup: :sparkles:
ohtanya sends brownie points to @veronicam :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @veronicam |http://www.freecodecamp.com/veronicam
jackedwardlyons sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 519 | @taltmann42 |http://www.freecodecamp.com/taltmann42
darlene1 sends brownie points to @veronicam and @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @veronicam |http://www.freecodecamp.com/veronicam
:cookie: 307 | @jtan3 |http://www.freecodecamp.com/jtan3
$('#all').click(function(all){
$('#statusList').toggle();
$('#all').click(function(){
$('#list').html('')
$('#statusList').html('')
?
addClass
in the code
$(lte).html("opc");
should be $("#"+lte).html("opc");
macguffin1990 sends brownie points to @oppiniated and @jackedwardlyons :sparkles: :thumbsup: :sparkles:
:cookie: 575 | @oppiniated |http://www.freecodecamp.com/oppiniated
:cookie: 346 | @jackedwardlyons |http://www.freecodecamp.com/jackedwardlyons
sonjasch sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1786 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
rizamoyi sends brownie points to @mrpuer :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @mrpuer |http://www.freecodecamp.com/mrpuer
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
abhijithsomaraj sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1787 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@Blackioo you can do this in your CSS:
ul {
margin: auto;
text-align: left;
width: 60%;
}
then change the width to what you want
blackioo sends brownie points to @aprim05 :sparkles: :thumbsup: :sparkles:
:cookie: 545 | @aprim05 |http://www.freecodecamp.com/aprim05
<div class="container-fluid bg-2 text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a class="btn btn-default btn-lg" href="#"><span class="gliphicon glyphicon-globe"></span></a>
</div>
glyphicon
@iriquoi
iriquoi sends brownie points to @aprim05 :sparkles: :thumbsup: :sparkles:
:cookie: 546 | @aprim05 |http://www.freecodecamp.com/aprim05
var index = $(this).attr('id')
board[index] = currentTurn
:bulb: to format code use backticks! ``` more info
body {
background-color: #CCFFCC;
background: url(http://site.com/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
tiboski sends brownie points to @millen812 and @mrpuer :sparkles: :thumbsup: :sparkles:
:cookie: 220 | @millen812 |http://www.freecodecamp.com/millen812
:cookie: 266 | @mrpuer |http://www.freecodecamp.com/mrpuer
/json
part
/
:cookie: 399 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
krimsonmedic sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
tiboski sends brownie points to @millen812 :sparkles: :thumbsup: :sparkles:
:cookie: 221 | @millen812 |http://www.freecodecamp.com/millen812
.json
too
.container {
text-align: center;
}
flosolver sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 577 | @oppiniated |http://www.freecodecamp.com/oppiniated
saylos sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2482 | @khaduch |http://www.freecodecamp.com/khaduch
abhijithsomaraj sends brownie points to @atharvajava :sparkles: :thumbsup: :sparkles:
:cookie: 300 | @atharvajava |http://www.freecodecamp.com/atharvajava
keyup
events, and recognize that a character that is entered is a newline or "enter" key. Then you have to refactor your code a little so that the function that actually performs the search (the callback from your button click) can be called from the keyup handler or the button click - just make it a named function and call it from within either of the two possible entry points?
rodrigode sends brownie points to @atharvajava :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @atharvajava |http://www.freecodecamp.com/atharvajava
saylos sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2483 | @khaduch |http://www.freecodecamp.com/khaduch
sergandrleal sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2484 | @khaduch |http://www.freecodecamp.com/khaduch
zhann1982 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 402 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
num
is five.. it does num*=4, so 5*=4 (20), then num*3, 20*3 (60), then 60*2 (120)
function factorialize(num) {
var factoredAnswer;
if ( num === 1 || num <= 0) {
return 1;
} else {
for ( var i = 1; i <= num; i++ ) {
factoredAnswer *= i;
}
return factoredAnswer;
}
}
factorialize(5);
factoredAnswer
is not defined, you declare it but it has no value, and what would you say is undefined * 1
?
goingallthewayup sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 520 | @taltmann42 |http://www.freecodecamp.com/taltmann42
text-align
to center
slideToggle()
on the element, jQuery calculates the height of the element and animates it correctlyThe page at 'https://codepen.io/jesserwright/pen/egXMwd' was loaded over HTTPS, but requested an insecure script 'http://labs.bible.org/api/?passage=random&type=json&callback=myfunction&callback=myfunction&_=1487178445924'. This request has been blocked; the content must be served over HTTPS.
mot01 sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 521 | @taltmann42 |http://www.freecodecamp.com/taltmann42
hey all, I'm working on a wireframe for a new portfolio site, and am not sure what's going on. I'm using the same CSS to style section one and two, just changed the targets. Section one has it right (in blue) and section two has this odd blank space that I can't seem to get rid of.... help? image reference and here is the code:
Html:
<div class="container-fluid" id="secOne">
<div class="outer">
<div class="inner">
<h1 class="text-center" id="seconeTitle">Developing Tools for Others</h1>
<div class="row">
<div class="col-md-4 text-center">
<h1>GitHub <span class="fa fa-github"></span></h1>
<div id="gitHub"></div>
</div>
<div class="col-md-4 text-center">
<h1>CodePen <span class="fa fa-codepen"></span></h1>
<div id="cpio"></div>
</div>
<div class="col-md-4 text-center">
<h1>Professional Projects <span class="fa fa-code"></span></h1>
<div id="profProj"></div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h1>Languages and Frameworks of Note <span class="fa fa-cogs"></span></h1>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="secTwo">
<div class="outer">
<div class="inner">
<h1 class="text-center" id="sectwoTitle">Studying for the Future</h1>
<div class="row">
<div class="col-md-4 text-center">
<h1>Western Governors University</h1>
</div>
<div class="col-md-4 text-center">
<h1>Udemy</h1>
</div>
<div class="col-md-4 text-center">
<h1>Free Code Camp<span class="fa fa-free-code-camp"></span></h1>
</div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
</div>
</div>
and the CSS:
#secOne {
padding: 0;
margin: 0;
border-top: 10px solid black; }
#secOne h1#seconeTitle {
padding-top: 0;
margin-top: 0; }
#secOne .outer {
padding: 0;
margin: 0;
background: url("http://wallpaper.pickywallpapers.com/1440x900/blue-trianglish-pattern.jpg"); }
#secOne .inner {
padding: 0;
margin: 0;
background: rgba(109, 141, 169, 0.8); }
#secTwo {
padding: 0;
margin: 0;
border-top: 10px solid black; }
#secTwo h1#seconeTitle {
padding-top: 0;
margin-top: 0; }
#secTwo .outer {
padding: 0;
margin: 0;
background: url("http://www.photos-public-domain.com/wp-content/uploads/2012/06/yellow-fabric-with-floral-pattern-texture.jpg"); }
#secTwo .inner {
padding: 0;
margin: 0;
background: rgba(208, 214, 181, 0.8); }
#seconeTitle
to remove the top margin, but it's actually #sectwoTitle
.. but reboot from bootstrap removes the top-margin anyway.. buuuut if you increase the margin manually you'll see the exact same effect as in the image you posted
cjrutherford sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 522 | @taltmann42 |http://www.freecodecamp.com/taltmann42
seconeTitle
but it's sectwoTitle
Hi guys,
I am working on Personal Portfolio Project and have a problem with CodePen and Bootstrap - can't seem to get it to work.
In CodePen's settings I add Bootstrap to Css and Bootstrap + jQuery to JavaScript tab, then from Bootsrtap website from components section I copy default navbar and past it into CodePen HTML section but can't get it to work.
http://codepen.io/funkymonkey79/pen/LxaJWr
What am I doing wrong?
Thanks!
funkymonkey79 sends brownie points to @taltmann42 and @cjrutherford and @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
:cookie: 523 | @taltmann42 |http://www.freecodecamp.com/taltmann42
:cookie: 681 | @u-ways |http://www.freecodecamp.com/u-ways
funkymonkey79 sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:warning: funkymonkey79 already gave u-ways points
https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?[YOUR_PARAMETERS]
diogorighi sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 524 | @taltmann42 |http://www.freecodecamp.com/taltmann42
display:flex
and align-items:center
on the contianer, that will vertically center its content
niprobin sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 525 | @taltmann42 |http://www.freecodecamp.com/taltmann42
taltmann42 sends brownie points to @diogorighi :sparkles: :thumbsup: :sparkles:
:cookie: 211 | @diogorighi |http://www.freecodecamp.com/diogorighi
so instead of () [] it becomes:
()
[]
:bulb: to format code use backticks! ``` more info
<div id="div1">
</div>
<div>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQSXbAPjvTfcr9ge8uzA6gMOzw0TkJz2ixXun6BUOXnrVmZaIk2Bi4-UccK8g" alt="">
</div>
margin-top: 180px;
margin-left: -100px;
<div class="masterdiv">
<div class="imagediv">
<img src="(source)"
</div>
<div class="textdiv">
<p>yourtexthere</p>
</div>
</div>
<h1><span class="orange-text">Orange</span> and <span class="green-text">Green</span></h1>
@jtan3 You add it to your HTML prepend code:
$("#streamerInfo").prepend(
"<div class='row' id='streamers'>" +
"<a target='_blank' href=" + url + " >" +
"<div class='col-md-4' >" +
"<img src='" + logo + "'>" +
"</div>" +
"<div class='col-md-4' class='name'>" + name +
"<p class='viewers'>" + views + " views" + "</p>" +
"<p>" + followers + " followers" + "</p>" +
"</div>" +
"<div class='col-md-4'>" + mode + "</div>" +
"</a>" +
"</div>"
);
It helps to format it like that (for me) so I can view it like normal HTML
jtan3 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 201 | @skycoder01 |http://www.freecodecamp.com/skycoder01
drewishman6 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 202 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 305 | @asparism |http://www.freecodecamp.com/asparism
alejofcc sends brownie points to @asparism :sparkles: :thumbsup: :sparkles:
:cookie: 203 | @skycoder01 |http://www.freecodecamp.com/skycoder01
alejofcc sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
alejofcc sends brownie points to @asparism :sparkles: :thumbsup: :sparkles:
:warning: alejofcc already gave asparism points
What's the difference between:
.class{}
And:
class image {}
.container {
width: 100%;
height: 275px;
overflow: visible;
padding: 20px;
background-color: #84B6C0;
box-shadow: 0px 10px 5px #888888;
font-family: sans-serif;
}
#margin {
margin: 1cm 1.5cm 1cm 1cm;
}
.container img {
position: aboslute;
margin-right: 25px;
width: 300px;
border-radius: 85%;
z-index: -1;
float: left;
}
<div id="wrap">
<div class="container" id="margin">
<div id="div1">
</div>
<div>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQSXbAPjvTfcr9ge8uzA6gMOzw0TkJz2ixXun6BUOXnrVmZaIk2Bi4-UccK8g" alt="">
<h2> Lorem</h2>
<p> Ipusm. Phasellus non turpis a eros suscipit sagittis eu nec purus. Ut a bibendum lacus. Quisque tincidunt a libero non faucibus. Sed augue ipsum, pharetra at laoreet in, ornare mattis magna. Mauris eget urna magna. Nulla mollis, lorem nec pulvinar posuere. </p>
</div>
class
?
.container
class in that example. https://www.w3schools.com/cssref/css_selectors.asp
mbcoder87 sends brownie points to @alant90 :sparkles: :thumbsup: :sparkles:
:cookie: 315 | @alant90 |http://www.freecodecamp.com/alant90
My code:
$.getJSON("api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=303a654508a3690e8004b21117457135", function(json) {
$("#user-weather").html(JSON.stringify(json));
});
I know it's not using the user's location, I just wanted to get it working with a static location first, and output the JSON in string format so I could see it pulling through.
ivesnoidea sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 457 | @labiej |http://www.freecodecamp.com/labiej
after a "each" cycle i want to change the color for every item i append... but it just changes the first one:
$.each(trovato, function(i,j){
var goto = 'https://en.wikipedia.org/?curid='+trovato[i].pageid;
$("#risultati").append('<a target = '+"_blank"+' href = ' + goto + '<li><span id = "titoline">'+ trovato[i].title + '</span><br>' + trovato[i].extract + '</li></a>')
$("#titoline").css({ color: "#"+(Math.random()*16777215|0).toString(16)
#titoline
?
.titoline
because you can't have duplicate IDs
$.each($(".titoline"), function() {
$(this).css({
color: "#" + (Math.random() * 16777215 | 0).toString(16)
});
});
gentarozzo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 205 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@Gentarozzo I just did that for animating, you could do the same with a hide and fadeIn:
$.each($(".titoline"), function() {
$(this).css({
color: "#" + (Math.random() * 16777215 | 0).toString(16)
}).hide().fadeIn(2000);
For fun anyway :)
faddah sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 206 | @skycoder01 |http://www.freecodecamp.com/skycoder01
What do i have to do to make this link to a site.
<div class="btnlist text-center">
<a class="btn btn-default" href="https://twitter.com/ironwrangler"<i class="fa fa-twitter fa-lg"id="twittericon"aria-hidden="true"></i>Twitter</a>
$(".btn").click(function(){
$(".btn").replaceWith('<form id="thisForm"><input class="input-lg" type= "search" id="inputField" placeholder= "Search"></form>')
});
$("#thisForm").submit(function(){
var input = document.getElementById("inputField").value;
getData(input);
console.log(input);
});
:cookie: 207 | @skycoder01 |http://www.freecodecamp.com/skycoder01
bigyankarki sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
>
on your <a> tag. If this is in codepen, add target="_blank"
to your <a> tag as well.<a class="btn btn-default" href="https://twitter.com/ironwrangler"><i class="fa fa-twitter fa-lg" id="twittericon" aria-hidden="true"></i>Twitter</a>
$(".btn").click(function(){
$(".btn").replaceWith('<form id="thisForm"><input class="input-lg" type= "search" id="inputField" placeholder= "Search"></form>')
});
$("#thisForm").submit(function(){
var input = document.getElementById("inputField").value();
getData(input);
console.log(input);
});
leduong96 sends brownie points to @finagl3 :sparkles: :thumbsup: :sparkles:
:cookie: 143 | @finagl3 |http://www.freecodecamp.com/finagl3
$("#thisForm").submit(function(event){
event.preventDefault();
$(".btn").click(function() {
$(".btn").replaceWith('<form id="thisForm"><input class="input-lg" type= "search" id="inputField" placeholder= "Search"></form>')
$("#thisForm").submit(function(event) {
event.preventDefault();
var input = $('#inputField').val();
getData(input);
console.log(input);
});
});
var input = $('#inputField').val();
var input = $('inputField').value();
var input = $('#inputField').val();
bigyankarki sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: bigyankarki already gave skycoder01 points
/to get the required data from wikipedia API
function getData(input) {
$.ajax({
url: "https://en.wikipedia.org/w/api.php",
dataType: "json",
data: "method=get&format=json&list=search&srsearch=input",
type: "GET",
headers: {"api-user-agent" : "b.gyankarki@gmail.com"},
success: function(wiki) {
for (var i= 0; i< wiki.query.search.length; i++) {
$(".content").append("<p>wiki.query.search.title[i]</p>");
}
}
});
}
<div class="container-fluid">
<div class="homePage text-center">
<h1>Devver's Hub</h1>
</div>
</div> <!--container close-->
<div class= "container-fluid">
<ul class="nav nav-pills navbar-fixed-top">
<li id="name">Finagle</li>
<li class="pull-right">
<a href="#">Contact</a>
</li>
<li class = "pull-right">
<a href="#">Portfolio</a>
</li>
<li class = "pull-right">
<a href="#">Home</a>
</li>
</ul>
</div> <!--c-f close-->
<div class="container-fluid">
<div class="homePage text-center">
<h1>Devver's Hub</h1>
</div>
</div> <!--container close-->
<img src="http://ibithink.com/wp-content/uploads/2016/04/web-unsplash-med-1330x600.gif">
<!--Above this line ^ navbar-->
.nav-pills {
list-style-type: none;
background-color: black;
overflow: hidden;
font-size: 1.7em;
margin-bottom: 20px;
}
font-family: Lobster;
color: white;
margin-top: 10px;
margin-left: 5px;
}
li a {
font-family: Arial;
color: yellow;
}
.active {
background-color: green;
color: black;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
}
li a:hover {
background-color: green !important;
color: black;
text-decoration: none;
}
.homePage {
/home background image/
background: url("http://ibithink.com/wp-content/uploads/2016/04/web-unsplash-med-1330x600.gif");
background-repeat: no-repeat;
width: 100%;
padding-top: 100%;
}
h1 {
color: green;
font-family: Lobster;
}
/
background-repeat: no-repeat;
padding-top: 100%;
max-height: 800px;
/
data: "method=get&format=json&list=search&srsearch=input",
$(".btn").click(function(){
$(".btn").replaceWith('<form id="thisForm"><input class="input-lg" type= "search" id="inputField" placeholder= "Search"></form>')
$("#thisForm").submit(function(event){
event.preventDefault();
var input = $('#inputField').val();
getData(input);
console.log(input);
});
});
console.log(input)
in your getData function to test it out :)
finagl3 sends brownie points to @aj-willi :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @aj-willi |http://www.freecodecamp.com/aj-willi