@coymeetsworld yeah I see that most of the time
im trying to use the bootsrap row system here but for some reason my second image is in its native size
<div class="row">
<div class="col-xs-6 col-md-3">
<img src="http://i.imgur.com/Eogzbxh.jpg" alt="placeholder" class="thumbnail">
</div>
<div class="col-xs-6 col-md-3">
<img src="https://i.ytimg.com/vi/CyUDiZG75hQ/maxresdefault.jpg" alt="placeholder2" class="thumbnail">
</div>
</div>
<div class="col-xs-6 col-md-3">
<img src="http://i.imgur.com/Eogzbxh.jpg" alt="placeholder" class="thumbnail">
</div>
<div class="col-xs-6 col-md-3">
<img src="https://i.ytimg.com/vi/CyUDiZG75hQ/maxresdefault.jpg" alt="placeholder2" class="thumbnail">
</div>
</div>
not sure why
@charlesdarkwind both of your images are in their original size
by the way, numbers in your md do not add up to 12
You may want to add "img-responsive" class into the img tag
@sorinr thanks
import React, { Component } from 'react';
import ChessConfigList from './components/ChessConfigList';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const styles = {
container: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
item: {
maxWidth: '50%',
}
};
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div style={styles.container}>
<ChessConfigList />
</div>
</MuiThemeProvider>
);
}
}
export default App;
any clues?
please ignore my question, I solved it
Hi guys, I'm stuck on the 'make a person' algorithm. Can't figure out why one of the tests isn't validating. Some help would be appreciated. http://bit.ly/2k7PFUs
I'm finishing up my random quote generator project and in having trouble getting my message to be populated into the attribute of my link that then generates the quote as the tweet text. Any ideas on what I'm missing here?
http://s.codepen.io/Shredderz/debug/zNErEO/vWARwWzQpOYk
http://s.codepen.io/Shredderz/debug/zNErEO/vWARwWzQpOYk
thanks at @TylerMoeller
Could anyone please help me with the simple instructions for this early jQuery exercise?: Target HTML Elements with Selectors Using jQuery
Cant seem to get the correct insertion for this: $("button").addClass("animated bounce");
into this: <script>
$(document).ready(function() {
});
</script>
@StarlingBlaze
<script>
$(document).ready(function() {
// your code goes here
});
</script>
wow. THANK YOU @SkyCoder01
I just did that one :)
Hello world
i'm getting this error when trying to copy-paste the geolocation challenge code into my weather project :(
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.
Hey can someone tell me how I can change the text of a button with JS?
I tried
document.getElementById('a').value = selectMe;but it didn't work for some reason
@Willow606 try .innerHTML = selectMe
@chriswingler that worked thank you! :)
@Willow606 no prob
hello
Is there anybody here to help me?
@chiuyong what do you need?
@Willow606 Why is my div container-fluid not inside the nav container?
<header>
<nav id="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="col-md-3">
<div class="logo"></div>
</div>
<div class="col-md-6">
<div class="links">
</div>
</div>
<div class="col-md-3">
<div class="user">
</div>
</div>
</div>
</div>
</nav>
</header>
@chiuyong drop the fluid and just use class="container"
yeah but when I see here, the div container is in outside of the nav
i think it is appearing that way because the container-fluid will span 100% the width of the page and is overriding the other styles you might have. dropping the fluid seems to fix it so it is inside the nav.
Tribute Page can be on any theme?
yes
How to move col-md in Bootstrap to the center?
@DanJP2016 thanks
@Veronika853 you can try adding class="center-block", that will work I think.
@chiuyong sorry for my previous answer it was wrong, it looks like your problem is you are missing the row class around your columns. just add a div with a class of row to it andthat should fix it. it looks like you already have a extra closing div at the bottom of the code, so just need to add <div class="row"> after the container-fluid div
@Veronika853 add offset to it col-md-offset
@sorinr thank)
@DanJP2016 got it
@DanJP2016 but the correct is div inside nav or nav inside div?
@DanJP2016 can you explain how to build this navbar? http://dante.swiftideas.com/
does anyone here have experience with adminLTE template?
@chiuyong to get something similar to that I think you would need to drop the fluid from your container div, have it inside the nav section, and drop the row/col-md and use an unordered list.
only?
why aren't my social media buttons sending me to my pages?
Thank you.
@chiuyong this should help you figure it out, it does not collapse when the page shrinks, I could not remember how to do that off the top of my head, but the bootstrap webpage should have the instructions on how to fix that. http://codepen.io/bones211/pen/zNEbQm?editors=1010
@mikecerang add target="_blank" to your social media anchor tags, that should fix it.
@DanJP2016 , thank you :D
your welcome
anyone from Viet Nam, i wanna say happy Tet holiday !
Normal for the first project? :D
can someone give me a good definition of math.random() the FCC camp one is hard to follow through. either that or im just tired aha. So it really just generates a number between 0 and 1?
@TacoJoe
So it really just generates a number between 0 and 1?
Yes. That's it
@adityaparab ok cool! thanks
tacojoe sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
bootstrap dropdown is not working
<li ng-show="isAdmin()" ng-cloak ng-class="routeParameter('/')" class="dropdown"><a href="#/"><i class="fa fa-lock" aria-hidden="true"></i><span>Admin</span><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li ng-class="routeParameter('/cities')" class="list-item"><a href="#/cities"><i class="fa fa-university"></i> <span>Cities</span></a></li>
<li ng-class="routeParameter('/facilities')" class="list-item"><a href="#/facilities"><i class="fa fa-briefcase "></i> <span>Facilities</span></a></li>
<li ng-class="routeParameter('/plans')" class="list-item"><a href="#/plans"><i class="fa fa-list"></i> <span>Plans</span></a></li>
</ul>
</li>
@relentless-coder what is this ang class ng-class="routeParameter('/cities')" serving for to li's ?
@sorinr that's used to add a class that would style the current selected list item
class didnt go over drop downs, do we need to self study bootstrap documentation to learn?
@TylerMoeller thx again ;)
@lotosiauke thank you :)
@TylerMoeller thank you xD
guys, i need help. :'(
@winroy explain!
I don't know anymore why my scrollspy is not working properly. the navigation should be bold and underline if it is active.
i'm not good in english. so please bare with me
i'm new to bootstrap.
@adityaparab what's wrong with my codes?
@winroy hold on.. looking into it
@adityaparab okay
@winroy have you added bootstrap to tour pen
@winroy Hmm one main problem is that you have to set
data-target: "#myNavbar" instead of data-target: "#main-nav"
But then it still doesn't resolve right. The highlighting starts working though
@winroy Bootstrap docs:
Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.
what is tour pen?
@MohammadHasham what is tour pen?
@alpox you're right! I tried it but it still doesn't work.
tour pen?
@winroy sorry,but i don't know
@MohammadHasham You said bootstrap to tour pen. so what is tour pen?
*to your pen..typos :sparkles:
just go to settings and make sure you added bootstrap there
oh, it's okay. I was confused back there.
Yes, I added bootstrap to my pen.
@TylerMoeller :smile: you are genious! I will make changes to them, thank you again
Can someone please help me with this?
http://codepen.io/elias_pap/pen/MJEmgg?editors=0010
http://codepen.io/elias_pap/pen/MJEmgg?editors=0010
anyone having flexbox cheatsheet?
funny thing, first hit on google for flexbox cheatsheet is actually a flexbox cheatsheet :D
I'm having trouble getting font awesome to work on my portfolio page for my social media icons. It's funny because I had font awesome working before for something I wound up changing. Could someone take a look please? note: I currently have my CSS code for the icons commented out because that was the only way I could even get dots to appear. http://codepen.io/SarrahElle/pen/PWwvez
@SarrahElle you r missing the class="fa ...." you wrote only fa fa....
@SarrahElle you will also have to style the ul li list in the contact to display inline :)
Monring
morning*
not sure what the issue is @SarrahElle . I couldn't render the fcc icon either
maybe the version you're using is too old
try upgrading
yeah I used the newest version of font-awesome @SarrahElle and it rendered
@SarrahElle here it is 4.7.0
@coymeetsworld yes I just put in 4.7.0 working now. Have to fix my styling and such but my icons are there. Satisfied for now. Thanks @walidashri
Thank you @sorinr
np @SarrahElle
@SarrahElle welcome
can you please tell me difference between object and classes in OOP
Can anyone help me with a question on the portfolio project? The JQuery sections on FCC don't cover anything for the smooth scrolling, so how did you approach this? I've looked up tutorials but most of them rely on plugins (cheating, right?) and I've looked up other pens (not to steal their code, I promise!) and I can see there are loads of ways to achieve this, I just feel like I don't really understand any of them. I don't know where to begin, can anyone offer advice? Thank you!
Hello, is there anyone who can help me to improve my skills like involvement in a project :(
hey guys
how can I make sure when I zoom in and out my jumbrotron doesnt change size?
<div class="container-fluid">
<div class="jumbotron">
<div class="col-md-9"><h1><b>Dr. Norman Borlaug</b></h1>
<p><strong>The man who saves a billion lives</strong></p>
</div>
<div class="col-md-9">
<img src=https://www.keralatourism.org/images/destination/large/devikulam_hills_in_munnar20131031103731_132_1.jpg class="img-responsive">
<p><strong>Here's a time line of Dr. Borlaug's life:</strong></p>
<ul>
<li><b>1914</b> - Born in Cresco, Iowa </li>
<li><b>1933</b> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"
</li>
<li><b>1935</b> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."
</li>
<li><b>19</b>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="col-md-9"><h1><b>Dr. Norman Borlaug</b></h1>
<p><strong>The man who saves a billion lives</strong></p>
</div>
<div class="col-md-9">
<img src=https://www.keralatourism.org/images/destination/large/devikulam_hills_in_munnar20131031103731_132_1.jpg class="img-responsive">
<p><strong>Here's a time line of Dr. Borlaug's life:</strong></p>
<ul>
<li><b>1914</b> - Born in Cresco, Iowa </li>
<li><b>1933</b> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"
</li>
<li><b>1935</b> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."
</li>
<li><b>19</b>
</ul>
</div>
</div>
Also,how can I show my more code more easily instead of copy and paste?
@heyDante Thank you so much! I will try this.
@dotdorothy yw
Quick bootstrap question gents :)
<!-- a very small snippet -->
<div class="col-md-6 col-xs-6 ">column 1</div>
<div class="col-md-6 col-xs-3 col-xs-offset-3 ">column 2</div>
<!-- shouldn't this create 2 columns where the first one occupies 50%, and the other one is also 50%
BUT if the screen size is less than 420px, the second col will be pushed to the right,
and the content inside the div will occupy the remaining 25%. Correct? -->
@jcharnley before and after your code type these ```
@St3ps Right except that the remaining 25% will be empty and not filled by anything
Hi guys, What are portfolio web pages? How can we use then to our sample web pages?
@pk422 A portfolio page is a website on which you present yourself and probably your skills. Its being used for making an impression to companies which may employ you
@katakampradeep - if you are not sure how to approach setting up a page like this, I would suggest having a look at the http://w3schools.com/bootstrap lessons, take a quick look at the "Themes" section there - they go into detail about how to design and lay out a page using Bootstrap. I found it to be helpful. And if you plan to use something other than bootstrap, the information is still useful as a design exercise - they walk you all the way through the process for a few different types of pages.
how do you learn flexbox i have got the idea but still there are many properties how can i remember them.I have downloaded several cheatsheets is all that enough.
@MohammadHasham - I just happened to be looking at a page http://wesbos.com/flexbox-resources/ - looks like lots of good stuff there. Also a nice approach is this "game" website that walks you through using flexbox to align things on a page: http://flexboxfroggy.com/ - I hope that helps?
@khaduch thanks.But are the cheatsheets enogh
enough/
@MohammadHasham - I don't know because I haven't really tried to use it in a project, up to this point. The http://flexboxfroggy.com/ site is good for an overview of what you can do - after you see things in action, you will probably make better use of the cheatsheets.
@khaduch thanks alot.
Hi.. I am trying to build a random quote machine... I have pasted the script below..
$.ajax({
url: 'https://andruxnet-random-famous-quotes.p.mashape.com/',
headers: {
'X-Mashape-Key': 'omICRkQlhtmshdwPT0YLZkaojcAmp1sRWrvjsnKkKVLl1QvX06',
dataType: 'application/x-www-form-urlencoded',
Accept: 'application/json'
},
success: function(data) {
console.log(data.quote);
}
});
i am unable to access the quote... it shows undefined in the log.. Someone help please
@Muzaffarhssn5 - if you post the link to your project (if it's in CodePen) it would be easier. Have you loaded jQuery.js? That's the first thing to know?
@khaduch http://codepen.io/mojo5/pen/vgxBNB
Could someone help me with a hover text box? I had it working yesterday but now the text box isn't appearing over the image on hover. The div is under page 3 and the CSS is where the #pageThree styles start. http://codepen.io/TheDoctorCam/pen/jyLRWK
@Muzaffarhssn5 - it looks like you are getting quotes, but you don't have any button click event set up to invoke the function again when you click the button. It seems that it works to actually get a quote the first time. Perhaps I'm just missing something?
No... You are right... I have not added the click event yet.. somehow. I was not even getting the initial values in the beginning now I am getting the quotes but still i am unable to access the author name @khaduch
this is my first project
my tribute page
@Muzaffarhssn5 - I think that it is a problem with your HTML structure. You have the HTML set up like this:
<div id="quote-display">
<span class="text"></span>
<footer class="author-name">- <span id="author"></span> </footer>
</div>so when you do this: $('#quote-display').text(q.quote); It is clobbering the structure of that div and removing your footer. You just need to change how you are updating that - maybe to use the span that you have in there? Or restructure your code to get the footer out of there.
@Muzaffarhssn5 - just changing the
$('#quote-display').text(q.quote); to $('.text').text(q.quote); looks like it should work.
Okay I ll try that @khaduch
@khaduch I am either getting the quote or the author name... I am unable to get both simultaneously...
@khaduch Maybe you are right... I think i have messed up the HTML structure.
@Muzaffarhssn5 - I am getting both, using your current HTML structure and this change to the code:
$('.text').text(q.quote);
$('.author-name').text(q.author);I also wrapped your $.ajax call within a function, and added a .click handler, and that seems to work, as well.
guys how do I center lists
on the build a tribute page (timeline dates)
hello friends can anyone with my new project, I am trying to make a sign in and sign up page, In the sign up page I'm not able to put categry field and all the category in it properly.
@jcharnley - are you using bootstrap? You can work with the rows and columns and put a column in the center. It's not that easy to just center a list, but using the grid it does pretty well.
here is my code
<div class="sign-up-htm">
<div class="group">
<label for="user" class="label">Username</label>
<input id="user" type="text" class="input" required>
</div>
<div class="group">
<label for="pass" class="label">Password</label>
<input id="pass" type="password" class="input" data-type="password" required>
</div>
<div class="group">
<label for="pass" class="label">Repeat Password</label>
<input id="pass" type="password" class="input" data-type="password" required>
</div>
<div class="group">
<label for="pass" class="label">Email Address</label>
<input id="pass" type="text" class="input" required>
</div>
<div class="group">
<label for="country">Category</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input id="pass" type="text" class="input" required>
</div>
<div class="group">
<input type="submit" class="button" id="we1" value="Sign Up">
</div>
<div class="hr"></div>
<div class="foot-lnk">
<label for="tab-1">Already Member?</a>
</div>
</div>
and this is my css file:
body{
margin:0;
color:#6a6f8c;
background:#c8c8c8;
font:600 16px/18px 'Open Sans',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}
.login-wrap{
width:100%;
margin:auto;
max-width:525px;
min-height:670px;
position:relative;
background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
width:100%;
height:100%;
position:absolute;
padding:90px 70px 50px 70px;
background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
transform:rotateY(180deg);
backface-visibility:hidden;
transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
text-transform:uppercase;
}
.login-html .tab{
font-size:22px;
margin-right:15px;
padding-bottom:5px;
margin:0 15px 10px 0;
display:inline-block;
border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
color:#fff;
border-color:#1161ee;
}
.login-form{
min-height:345px;
position:relative;
perspective:1000px;
transform-style:preserve-3d;
}
.login-form .group{
margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
width:100%;
color:#fff;
display:block;
}
.login-form .group .input,
.login-form .group .button{
border:none;
padding:15px 20px;
border-radius:25px;
background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
text-security:circle;
-webkit-text-security:circle;
}
.login-form .group .label{
color:#aaa;
font-size:12px;
}
.login-form .group .button{
background:#1161ee;
}
.login-form .group label .icon{
width:15px;
height:15px;
border-radius:2px;
position:relative;
display:inline-block;
background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
content:'';
width:10px;
height:2px;
background:#fff;
position:absolute;
transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
left:3px;
width:5px;
bottom:6px;
transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
top:6px;
right:0;
transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
color:#fff;
}
.login-form .group .check:checked + label .icon{
background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
transform:rotate(0);
}
.hr{
height:2px;
margin:30px 0 50px 0;
background:rgba(255,255,255,.2);
}
.foot-lnk{
text-align:center;
}
.tab-1{
margin-top: -10px;
}
#we1{
margin-top: 20px;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
@ronaldo001 - do you have a URL for this, or is it on your own local machine?
@khaduch on my local machine
@khaduch i have taken refernce from internet and tried to make some changes in it.
@ronaldo001 - okay trying to see what you have there... I have to set up a page to examine it
@ronaldo001 - one thing I found so far that is incorrect - this line in your HTML:
<label for="tab-1">Already Member?</a> should not have </a> as the closing tag? Other than that, it seems to be working after I changed that to </label>?
Guys quick question about the JSON Twitch Api, when I make the GET request for brunofin , it gives back the exact same data as an offline stream... is there still a way to check if the account has been deleted?
@ronaldo001 - and it doesn't look like you've properly closed all of your divs? (Unless I just had a problem with copy and paste....)
@khaduch Yes im using bootstrap
Just trying to figure it out
@mml3b - notice the examples on that page - any numeric value that is being assigned to a variable is on the RIGHT side of the
= myVar = 5 in the example code. And they say Assignment always goes from right to left. Everything to the right of the = operator is resolved before the value is assigned to the variable to the left of the operator.
so it should be
b = something on line 8.
var a = 7;
var b = 7;
var b = 7;
i did this @khaduch
but im not knowing how to do the 3rd one
Erm hi guys, I'm trying to perform an AJAX request for the local weather app, but it doesn't seem to want to work. Here's my ajax code
$(".test-btn").on("click", function() {
$.ajax({
url: 'api.openweathermap.org/data/2.5/weather',
datatype: 'jsonp',
data:{
lat: latitude,
lon: longitude,
APPID: '8a6805298d2c06c061f7d6518569fea8',
},
success: function(response) {
console.log(response);
}
});
});
@mml3b - Actually, there are two things that are wrong. Your first line
var a = 7; should not have the keyword var there, because the variable is already declared. Then in the second line, the same thing var b is already declared, so you just use b = and it should be similar to the example that they show where they have myNum = myVar; - you should have the variable a on the right hand side of the =.
@chungeric - do you need to put the
http:// on your URL? I cannot recall, but I would try that first.
@khaduch var a = 7;
b = 7;
7 = a;
b = 7;
7 = a;
idkkk
@mml3b - get rid of the
7 = a - that is just wrong. Your editor is probably flagging an error for that? the variable a should be on the left side, and the 7 on the right side, but you only need two lines there. The third is wrong. Two assignments - one to a, and one to b
var a = 7;
b = 7; ( a should be assigned to b )
b = 7; ( a should be assigned to b )
with =
@mml3b - so do that -
b = a; Just like the example does - assigns a value to myVar, then assigns the myVar to myNum with myNum = myVar...
@mml3b - learn how to interpret the test results and use them as a guide to fix your code. And read the description carefully because for these early lessons they are pretty explicit about the basic steps that you need to do.
I'm getting a mixed content error
var a = 7;
b = 7;
b = a;
myNum = myVar;
b = 7;
b = a;
myNum = myVar;
@khaduch since it needs https for geolocation and the ajax url is http
@khaduch my var is not defined error
@khaduch maybe i'll just use getJSON...
@chungeric - are you loading your page with
https://? You have to load your page using http:// in your URL, because the free version of the openweather api only uses http://. The problem with the geolocation is a real problem. Can you try firefox? That is not a good solution to require people to use firefox, but at least you can see if it works because geolocation on firefox doesn't need https:// (at least not yet)
@mml3b - you are not supposed to copy the example code into the exercise... And you don't need the
b = 7; line.
@chungeric - there is a discussion in the FreeCodeCamp forum about the
https:// problem. FreeCodeCamp/FreeCodeCamp#7853 And they discuss alternatives to using openweather.
function reverseString(str) {
str=[];
str.split("");
str.reverse();
str.join("");
return str;
}
reverseString("hello");Type error: str.split is not a function? The correct result should be "olleh''.
@Hello911 - you have changed
str to an array, and .split is a string function. Get rid of the str = []; because that is killing the value of your function argument, which is str...
Then you have some other problems -
str.split(""); returns a new string, so you have to assign your value from that back to str, the same thing all the way down the line. Watch for methods that modify the variable in place (there aren't too many) vs. those that return a modified value.
And you can do all of this in one line by chaining the methods together.
hey can someone please explain to me how to to put more than 1 background image in codepen. for some reason i cant figure it out and i keep hitting wall after wall
@khaduch ```
function reverseString(str) {
str=str.split("");
str.reverse();
str=str.join("");
return str;
}
reverseString("hello");
This works Thanks @khaduch
I'm doing the intermediate algorithm challenges. Does it matter if I don't use the methods in the helpful links list? Am I missing the point of the exercise?
i use in css .sectOne {
background-image: url(https://wallpaperscraft.com/image/laptop_table_apple_macbook_pro_retina_window_73454_1920x1080.jpg);
}
background-image: url(https://wallpaperscraft.com/image/laptop_table_apple_macbook_pro_retina_window_73454_1920x1080.jpg);
}
@khaduch ok, I guess wunderground weather api is the solution. thanks for the link!
thats funny cause it works here but not there. i cant find the image after hitting run
how can I center my social media icons ? http://codepen.io/bestintown23/full/XpzXmy/
Put the icons in an icon-container or something, then use text-align: center on that container
@bestintown23 ^
function factorialize(num) {
for(var i=1;i<num;i++){
num=num*i;
}
return num;
}
factorialize(5);num=num*i; is a potential infinite loop that will crash browser, and the function doesn't work. Any hint?
@Hello911 - yes, you are changing the value of
num (or at least potentially changing it) and trying to use it as your loop control. Bad idea... Make a separate variable to do your multiplication with.
@winroy For scroll spy to work, you'll need to add the required attributes to your <body> tag, since codepen adds the <body> already, you can add everything dynamically in your document.ready:
$(document).ready(function(){
$('body').attr({
'data-spy': 'scroll',
'data-target': '.navbar',
'data-offset': '50'
});
});
how do you make a caption under a picture
@villain101 - unless they ask for something specific that they are going to look for, like using the
.reduce() method, or somesuch, then you can do whatever works. I think that the helpful links list is good if you are a newbie, or if they are recommending functions or methods that you are not familiar with and they are trying to introduce to you, then that's fine. I've seen people using ES6, all sorts of higher-level functions, etc. just to do the basics. It depends on your level of expertise, to a large extent (and in my opinion.)
@Naterroy1 - you can read about it here - https://www.w3.org/Style/Examples/007/figures.en.html
I just googled "HTML CSS how to make a caption under a picture" and that was one of the top links.... "Read, Search, Ask" ;)
I hope it helps.
@SamiNami Not sure if you got an answer, there are three API endpoints available for twitch (users, channels, streams), analyze all three to see how you want to check if brunofin has been deleted:
thanks @TylerMoeller
No problem - just a hint, hope it helps ;)
thanks @khaduch
@Stevo99 Yes, you can use multiple background images. It depends on how you want it all set up. If you can send a link to a codepen and say what you're trying to achieve, we can try to help. Here's one way to do it:
<section class="section1"></section>
<section class="section2"></section>.section1 {
background: url(https://placehold.it/1200?text=section1) no-repeat center center;
background-size: cover;
border-bottom: 1px solid black;
min-height: 50vh;
}
.section2 {
background: url(https://placehold.it/1200?text=section2) no-repeat center center;
background-size: cover;
min-height: 50vh;
}
@TylerMoeller thank you soo much i can really use the help..
@bestintown23 add this :
<div class ="imga"> // added a div class
<img src="https://i.imgsafe.org/fd6f339860.png" class="icons">
<img src="https://i.imgsafe.org/fdfb20fa8d.png" class="icons">
<img src="https://i.imgsafe.org/fdfcd6a234.png" class="icons">
<img src="https://i.imgsafe.org/fdfebb2d2b.png" class="icons">
</div>.imga{
text-align: center;
}
Im suppose to return the sum of all odd fibonacci numbers. But my IF doesnt quite work...can you tell me why?
function sumFibs(num) {
var a=1;var b=0; var temp=0; var i=0;
var arr = [];
var sum=0;
while(a<num){
temp = a;
arr[i] = a;
a = temp + b;
b = temp;
if(arr[i]/2!==0){
sum += arr[i];
}
i++;
}
return sum;
}
sumFibs(4);
and I noticed also that on the html side when i started getting to line number 30 or so whenever i typed it would show up all the way at the right instead of right by the number.. why is that
even when i hit enter to bring up more line numbers theres a gap between the numbers even though theres no text at all
@Stevo99 We'd need to see the code to understand what's going on :)
how can i send it to you
just send you the link to the codepen doc right
function replacer(match, p1, p2, p3, offset, string) {
// p1 is nondigits, p2 digits, and p3 non-alphanumerics
return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
"hello".replace("l", "x") ----> "hexxo"
I think its https://codepen.io/Stevo914/pen/VPWXNK
at the bottom its a little sloppy because i was trying soo many things.
@Stevo99 This should be removed from your HTML:
<body background="https://wallpaperscraft.com/image/laptop_table_apple_macbook_pro_retina_window_73454_1920x1080.jpg"></body>Use CSS to set background images, like in that code example I gave above. :point_up: January 27, 2017 8:20 AM
yea i only put it there cause it wont load if i do it on css
and i used the style you gave me and it still didnt work
Another tip, when you see colors looking different like in that image, it means something is wrong with your code
Notice how "btn btn-default" is white on the last line, but yellow in the other lines?
All of these little errors can end up with your code editor making inaccurate guesses about what you want to do
@moigithub yeah but what does replacer do? the page you gave doesnt answer that
@TylerMoeller @TylerMoeller ur right i just removed it and did it your way and it worked.. omg thankyou soo much i was struggling with this for 2 days straight lol
Glad that helped - it's already looking better
IF u check the documentation...
replace have 2 parameters
.replace(param1, param2)
param1 can be a string or a regex expression
param2 can be a string or a callback function
mdn.io/string.replace <--- more info there @Hello911
replace have 2 parameters
.replace(param1, param2)
param1 can be a string or a regex expression
param2 can be a string or a callback function
mdn.io/string.replace <--- more info there @Hello911
Try to make one change at a time, sometimes it's helpful to create a new codepen to try out new things. Once you get it working, you can integrate it into your portfolio, one step at a time.
yea but why is that last line a diff color if its the same text in all three lines
Look at it very carefully, there's one small thing missing
yea that s kind of what ive been doing to troublshoot so i know what you mean
But it can make a big difference as far as the code editor guessing what you want to do
ohh
The same kind of thing is going on with your CSS here -
background-size should be purple
Anyone help me out with dropdown menu button in Bootstrap? I am pulling my hair out after spending all morning trying to get the menu to work. Any pointers as to what I have going wrong? I have followed the bootstrap documentation.
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Permanent+Marker|Raleway" rel="stylesheet">
</head>
<body>
<!--- builds basic static navbar --->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!--- Branding on left side --->
<div class="navbar-header navbar-left">
<a class="navbar-brand" href="#">TurdFurgeson</a>
</div>
<!--- Dropdown menu rightside --->
<div class="dropdown navbar-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"><i class="fa fa-bars 2x"> </i></button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">About</a>
<a class="dropdown-item" href="#">Projects</a>
<a class="dropdown-item" href="#">Let's Talk</a>
</div>
</div>
</nav>
</body>
Just one small thing missing again
Well that didn't format correct. Sorry
haha your right the quotation marks!!
Yep!
@khaduch cool thanks Ken
@TylerMoeller thanks again bro Im so excited to get back to work
@turdfurgeson You can edit your posts here in gitter for up to 5 minutes after making a comment. Use backticks for code formatting: https://github.com/freeCodeCamp/freeCodeCamp/wiki/Code-Formatting
@Stevo99 Good luck :+1:
Thanks, @TylerMoeller
Tyler, speech marks are your URL
@turdfurgeson Add jQuery and Bootstrap.js to your codepen project and your dropdown should work
@moigithub That is actually the page I am reading. Thanks
@TylerMoeller Many thanks. I was pulling my hair out trying to figure it out. lol
Hello friends, can somebody how to add my projects thus far (just the Tribute Page) into my portfolio. Here is my codepen link : http://codepen.io/aymohamed/pen/ZLJWwJ
//get the address from the IP Geolocation API
function getLocation() {
$.getJSON("http://ip-api.com/json", function(loc){
$("#cityName").text(loc.city + ', ' + loc.regionName + ', ' + loc.country)
getWeather(loc.lat, loc.lon);
})
.fail(function(err) {
getWeather()
});
}
getLocation();
//Retreive temperature details from openweathermap.org using longitude and latitude from previous API
function getWeather(lat, lon) {
var apiAddress = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&units=imperial&type=accurate&APPID=9d4a841a5b68f2cc43c97d5224e11086";
$.getJSON(apiAddress, function (weatherData){
tempF = weatherData.main.temp.toFixed(0);
tempC = ((tempF- 32)*(5/ 9)).toFixed(0);
weather = weatherData.weather[0].description;
weatherId = weatherData.weather[0].id ;
wind= weatherData.wind.speed;
$("#weather").text(weather + ', Wind speed: ' + wind + ' mph');
$("#temp").text(tempF + ' °F');
});
}
//to convert celcius into farenheit using data from earlier function.
$("#conversion").click(function() {
if($("#temp").text().indexOf('F') > -1) {
$("#temp").text(tempC + ' °C');
}
else {
$("#temp").text(tempF + ' °F');
}
})
//to change the background image according to weather.
var imageArray = [];
var png = ['01d', '01n', '02d', '02n', '03d', '03n', '04d', '04n', '09d', '09n', '10d', '10n', '11d', '11n', '13d', '13n', '50d', '50n'];
var bodyImages = [/*clear sky*/ 'https://media.giphy.com/media/l3vRoeR8KaNNs3g88/giphy.gif',
/* clear night*/
'https://media.giphy.com/media/SE5Qvze2QBpbq/source.gif',
/* few clouds*/
'https://media.giphy.com/media/o6qaN00DUo7x6/giphy.gif',
/*few clouds night*/
'https://media.giphy.com/media/R19AHAAwMnEpa/giphy.gif',
/*scattered clouds*/
'https://media.giphy.com/media/qZMonv0Jty1P2/giphy.gif',
/*night scattered clouds*/
'https://media.giphy.com/media/afuXKLnDHbb8I/giphy.gif',
/*broken clouds*/
'https://s-media-cache-ak0.pinimg.com/originals/58/25/32/58253287ef7d5f5bccc3490d64017ffd.jpg',
/*night brokenn clouds*/
'http://www.troyjohnstone.com/astrophotography/images/sky_clouds_night_moon_2006_09_09_04.jpg',
/*shower rain*/
'https://media.giphy.com/media/oaNFVNEcvWv5K/giphy.gif',
/*night shower rain*/
'https://s-media-cache-ak0.pinimg.com/originals/52/07/68/5207680e1eafd7233ab094b5f910e6af.gif',
/*rain*/
'https://media.giphy.com/media/BAD9hUGYZkqPe/giphy.gif',
/*night rain*/
'http://umad.com/img/2015/6/night-rain-gif-9410-9796-hd-wallpapers.jpg',
/*thunderstorm*/
'https://media.giphy.com/media/8xY1YYpEZ4dws/giphy.gif',
/*night thunderstorm*/
'https://media.giphy.com/media/8xY1YYpEZ4dws/giphy.gif',
/*snow*/
'https://media.giphy.com/media/OdOfTkw2uVADC/giphy.gif',
/*night snow*/
'https://media.giphy.com/media/Ok928ivi56clq/giphy.gif',
/*mist*/
'https://media.giphy.com/media/LmC5rpntvJPxe/giphy.gif',
/*night mist*/
'https://media.giphy.com/media/ofrQ8FYfTD8gE/giphy.gif'
];
var imageArray = [];
for (var i = 0; i < png.length; i++) {
for (var j = 0; j < bodyImages.length; j++){
if (png[i] == weatherId) {
imageArray.push(bodyImages[j]);
$("body").css('background-image', 'url('+ imageArray[i] +')');
}
}
}
what is wrong with the last part of this code?
Hello friends, can somebody how to add my projects thus far (just the Tribute Page) into my portfolio. Here is my codepen link : http://codepen.io/aymohamed/pen/ZLJWwJ
here is the codepen
@aymohamed maybe you jut add a screenshot of the portfolio and link the screenshot to your portfolio codepen address
@bigyankarki Use your dev console to help debug these kinds of issues. (Ctrl+Shift+J). That last part of your code is running before your getJSON calls finish, so weatherId is not defiined (yet).
how can i fix it @TylerMoeller
@bigyankarki , is that how it's mostly done
@aymohamed i dont know about that though. i am novice too. so I would have done that :D
lol ok bro
@bigyankarki As a hint, you may want to refresh on how JavaScript scope works. Variables defined inside a function are only visible to that function and any sub functions. After that, look at the Weather ID values you get back from the API and compare those to the icon png values. They can't be compared with
==
How do I make my pages slide over each other ??? http://codepen.io/aymohamed/pen/ZLJWwJ
For example, @bigyankarki:
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10n"
}
@TylerMoeller i defined weatherId as a global veriabale
so shouldn't it be available to every other functions as well?
Where are the people??
Nobody to help today
@bigyankarki When you call an API, you have to visit an URL to get that data. Meanwhile, the rest of your code has already finished running. See this as an example with setTimeout:
var myGlobalVariable = 'hello';
myGetJsonFunction();
function myGetJsonFunction() {
setTimeout(function() {
myGlobalVariable = 'hello world';
console.log(myGlobalVariable); // hello world
}, 200);
console.log(myGlobalVariable); // hello
}
console.log(myGlobalVariable) // hello
@aymohamed For your portfolio images, you can use a bootstrap grid. That's what lots of people use. http://getbootstrap.com/css/#grid
Here are some examples, with images near the bottom: http://s.codepen.io/TylerMoeller/pen/qNrbok
Here are some examples, with images near the bottom: http://s.codepen.io/TylerMoeller/pen/qNrbok
hey guys ! i'm currently working on the random quote machine challenge and i can't quite figure out why i can't display the quote i receive using the ajax request. http://codepen.io/Nsoual/pen/OWxRKw?editors=1010
@TylerMoeller , I mean, I know the row column etc bootstrap concept but I mean, is it advisable to use a screenshot of the tribute page? and if yes, a screenshot does not have a url.
@aymohamed Sorry, I misunderstood the question ;)
You can upload images from your computer to https://postimage.io/
That's what lots of people use.
You can upload images from your computer to https://postimage.io/
That's what lots of people use.
They'll give you a URL you can use in your portfolio project
@nsoual I think for that API, you have to use
dataType: 'html', instead of dataType: 'json',
thanks @TylerMoeller
@TylerMoeller Thanks !!
/\s{2,}/g I know /\s/targets space. And g is global (which I don't exactly understand) But what is {2,}?
hi guys. any idea whats the best db to choose for a project based on node?
Hey! I've nearly finished my portfolio page. The only thing I have struggled with is getting the navbar to act as a drop down when on a small screen. Click on the icon and nothing happens. Can someone help? https://codepen.io/Danderson1603/pen/KaXBZm/
@TylerMoeller You're a life saver! Didn't know about that postimage link. Been trying to figure out how to do it
@sorinr - it seems that MongoDB is the "standard" one that people seem to be using, but it is not a good relational database, from what I have read... If you google that question, do you get any pages that show all of the options? Are you familiar with some databases? Are they directing you to Cloud9 as a server? What do they offer if you start a node project?
@Danderson1603 add jquery(first) and bootstrap.js from
settings ->javascript -> quick add then it will work
@vinaypuppal That's great! Thanks for the help
@sorinr - I found this: https://blog.risingstack.com/node-js-database-tutorial/ - just scanning through it.
@Danderson1603 juat add jquery and bootstrap.js in pen settings
@sorinr There is no best db for use with node.js :) depends on what you need to do
MySQL, Mongo, Redis are all good options
@akhilPotla97
Hello, I have started the TwitchTV project however, my ajax does not work.
$.ajax({
url:
"https://api.twitch.tv/kraken/streams/" + streamer + "?callback=?",
dataType: "jsonp",
data: {
format: "json"
},
success: function(channel) {
console.log("111");
},
error: function(xhr, status, error) {
console.log("xhr: " + xhr);
console.log("status: " + status);
console.log("error: " + error);
}
Hello, I have started the TwitchTV project however, my ajax does not work.
$.ajax({
url:
"https://api.twitch.tv/kraken/streams/" + streamer + "?callback=?",
dataType: "jsonp",
data: {
format: "json"
},
success: function(channel) {
console.log("111");
},
error: function(xhr, status, error) {
console.log("xhr: " + xhr);
console.log("status: " + status);
console.log("error: " + error);
}
@khaduch @TylerMoeller the idea is the project i've made last year still in production is based on laravel and mysql. its working just fine but for my learning curve i would try to transpose it to node. not sure if to change the db or not. thats my dilema :)
I read that I need to have a client id for twitch api; however, this is not recommended since codepen is public. So how would i work around this to successfully call the api
@akhilPotla97 You can use Freecodecamp's mirror of the twitch API that does not require a key: https://wind-bow.gomix.me/
hello guys, im having problem with loading the image on my code pine editor, I have used the <img src="url of the picture"> tag, but the codePen simulator dont load my image which url is on wikipedia.Help please!
@khaduch @TylerMoeller if i would go for relational i was thinking to go this time for postgres but for nonsql i don't know
@theabstact237 thank you very much
correction @TylerMoeller
@ghulamshabir hi buddy,im having problem with loading the image on my code pine editor, I have used the <img src="url of the picture"> tag, but the codePen simulator dont load my image which url is on wikipedia.Help please!
@sorinr Maybe couchdb for noSQL? There's a nodeschool workshopper for it here: https://github.com/robertkowalski/learnyoucouchdb
@ghulamshabir is it due to a frame issue or should i load the image on my computer and then LOAD IT ON THE codePen simulator
@theabstact237 What is the URL you are trying to use?
Is there a regex that target all punctuations? Or do I have to write them all down?
@sorinr - https://www.slant.co/topics/179/~best-databases-to-use-for-node-js-applications - another one. I read an article that was really dissing the MongoDB for some applications - things that are heavy relational queries. I don't know if I could find the link to that, but perhaps googleing for it would work? Google this "problems with mongodb" and you'll find a plethora of articles. This is the one that I remember reading: http://www.sarahmei.com/blog/2013/11/11/why-you-should-never-use-mongodb/ - I cannot vouch for the information but I tend to believe that it is true. I guess that perusing a few of those articles would be interesting?
@TylerMoeller this is ithttps://en.wikipedia.org/wiki/File:CheHigh.jpg
@TylerMoeller @khaduch thank you guys for all the info. i have what to read tonight and make my decision
@theabstact237 That's a link to a wikipedia page about the file. To get the image address, right-click it and select "Copy Image Address"
function palindrome(str) {
str=str.replace(/\s+/g,"");
str=str.replace(/[^w\s]|_/g,"");
var string="";
string=str.reverse();
if(string===str){
return true;
}else return false;
}
palindrome("eye");
@Hello911 You have to turn it into an array to reverse it ;)
anybody know why my query string variables are returning undefined?
@jdtdesigns
function palindrome(str) {
str=str.replace(/\s+/g,"");
str=str.replace(/[^w\s]|_/g,"");
var string="";
string=str.split("").reverse().join("");
if(string===str){
return true;
}else return false;
}
palindrome("eye");This sorta work. But for ex, palindrome("1 eye for of 1 eye.") is returning false.
str=str.replace(
/[^w\s]|_/g,""); this is not accurate
ur regex saying NOT "w" (letter/character literally)
@chriswingler It takes some time to visit ipinfo.io and get your location. By the time you've gone to that URL, parsed the JSON, and set a value for
lon and lat, your code has already tried to set a value for your api variable.
I GOT IT. Thanks guys.
@jdtdesigns Thanks
hello911 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 892 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
thanks @TylerMoeller .. i suspected it was something like that.. is there a way to get the timing right?
chriswingler sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1416 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@chriswingler you can do it like example
@chriswingler To avoid giving the answer directly, here's a good explanation to give some approaches for you to consider: http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call
Why isnt my image working
for background
Or, just have @sorinr write the logic for you :p
alright thanks @sorinr @TylerMoeller
chriswingler sends brownie points to @sorinr and @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: chriswingler already gave tylermoeller points
:star2: 1145 | @sorinr |http://www.freecodecamp.com/sorinr
@TylerMoeller lol. its the last time i'm doing it :)
lol :)
Sorry to interrupt! I'm very new to HTML/CSS and barely JS/Jquery, I've been playing around with the parallax scrolling effect. Tried searching, and it seems all examples show the parallax class inside a <div> tag. I tried putting parallax class in a <span> tag and even <section> tag, and parallax doesn't seem to work in those cases. I realize there are semantic differences between <div>, <section> and <span>....but, technically, why would parallax only work with <div> and not <span>? Is this something to do with JQuery? Thanks.
@TylerMoeller i have seen so many weather apps so i can tell you the weather all around the globe without writing even one line of code :)
@ZenZate I'm guessing that server doesn't allow hotlinking or it is getting blocked by codepen. Try using postimage instead, you can paste the image URL in there and get one that will work with codepen: https://postimage.io/web.php
@tinatownes It really depends on how the parallax is implemented. Hard to say without seeing what library/framework you are using for parallax
@TylerMoeller Do i use this https://postimg.org/image/c4yeycog1/
@ZenZate Use the one that ends with
.jpg
It should say
Direct link: next to it
kk
@TylerMoeller - Thank you! Crazy as this sounds, that's the answer I'm looking for at this time! I suspected I need to learn more and progress into JQuery libraries to fully comprehend the mechanism.
tinatownes sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1417 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@TylerMoeller tyler, can you help me?
@chiuyong I can try :)
@TylerMoeller I cant find the direct link bit
@TylerMoeller - BTW I took a look at your https://tylermoeller.github.io/ and it's really well organized. Do you use a little bit of the parallax with your scroll-and-shrink menu bar, or is that another effect?
@tinatownes Uggh, I want to rewrite that lol. It isn't parallax, it's the bootstrap affix plugin if I remember correctly
@TylerMoeller I will not be able to achieve that standard on this challenge
@ZenZate It looks like this is the image URL you want
https://s24.postimg.org/5r9bv3jk5/27239392_coding_wallpapers.jpg
@TylerMoeller - Ha! Well I think it's great! Bootstrap affix; I'll check it out. Thanks again.
tinatownes sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Don't worry about trying to make a profile that looks like the example - I wrote my portfolio after I finished all the front-end projects. Even since then, I've learned a lot and want to rewrite it
:warning: tinatownes already gave tylermoeller points
Thanks for the compliment :)
SHould i skip the challenge and come back to it later
http://codepen.io/designercoder123/pen/GrOZxB?editors=0010 need a little help! my quotes are not being generated
No, try your best and update it as you go through more projects. I think it's good practice
kk thx a lot
Maybe check out some of these for inspiration: https://github.com/iRaul/awesome-portfolios
I kind of like the creativity for this one lol, but wouldn't do it for my own portfolio: http://jakealbaugh.com/
Well, I want to build a navbar like this. But I don't know how to start, can you give me a start point?
@TylerMoeller http://dante.swiftideas.com/
I cannot do that
They look amazing
ughhh kmn
do they tell u to constantly update it
fcc i mean
@ZenZate You kind of have to update it constantly - at least the portfolio section. Every time you finish a project, you'll want to add a new image.
@chiuyong Do you have a screenshot?
How do i upload the image I use postimage right but then how do i export as direct link
@TylerMoeller
@ZenZate Just go directly to here: https://postimage.io/
Click "Choose Images"
@TylerMoeller It's better you open the link to see the scrolling effect
@chiuyong Freecodecamp is a good start for building something like that :)
I don't know how to give you a better start - you could do it with Bootstrap or write it from scratch.
It doesn't look overly complicated - a white background with a Logo on the left, links on the right.
Hi - I just have one quick question - its related to Data Viz and React though there isn't anyone there in that room.
@TylerMoeller I'm doing freecodecamp, but I have to build this navbar urgent
The hard part might be using the search functionality - without a database, you won't have much to search
I'm almost done with my camper leaderboard - but I'm trying to get the user names that render to also be links to their profile page - and I'm not sure how to get that done....
Here's my pen: http://codepen.io/GenesisWebDesign/pen/MJvMrQ
I'm trying to do something like this.....
@chiuyong I'm not sure how I can help, you'll have to show me what issues you are having with your code
let userUrl = userA.link(https://freecodecamp.com/ + userA);
but that doesn't work - is there anything else I can try?
If someone would like to go over to the DataViz room to talk about this - I'd be happy to quit posting DataViz things here! :)
@JessiW Line 89 needs to append the username to the URL:
<td><a href={this.props.userUrl + this.props.user.username}>{this.props.user.username}</a></td>
Also, don't forget
target="_blank" ;)
oh - okay - thank you @TylerMoeller - I'll try that - just a sec :)
jessiw sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1418 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Wow - ok - that was simple and I understand why that works - thank you @TylerMoeller ! :)
jessiw sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: jessiw already gave tylermoeller points
I just was having a hard time putting the proper pieces together on that for some reason :)
Hi I'm following this tutorial https://vladimirponomarev.com/blog/authentication-in-react-apps-creating-components and after setting up a routes.js for react-router I'm getting this error "Uncaught Error: The root route must render a single element" google searches are telling me that webpack doesn't support es6 but that doesn't seem correct.
import Base from './components/Base.jsx';
import HomePage from './components/HomePage.jsx';
import LoginPage from './containers/LoginPage.jsx';
import SignUpPage from './containers/SignUpPage.jsx';
const routes = {
// base component (wrapper for the whole application).
component: Base,
childRoutes: [
{
path: '/',
component: HomePage
},
{
path: '/login',
component: LoginPage
},
{
path: '/signup',
component: SignUpPage
}
]
};
export default routes;ReactDom.render((
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Router history={browserHistory} routes={routes} />
</MuiThemeProvider>), document.getElementById('react-app'));
@TylerMoeller I tried using this http://codepen.io/chiuyc/pen/MJOJmp
div class="col...
but I don't know if it's right
Hey, I need some help with the wikipedia API. How can I solve the "Access-Control-Allow-Origin"- header problem without a proxy?
Do I have to create a JSON file with quotes for this https://www.freecodecamp.com/challenges/build-a-random-quote-machine project?
@sharang108 not really. you can use an api
@designercoder123 I don't know any such api
Found the problem. I wasn't exporting one of my components
@sharang108 https://quotesondesign.com/api-v4-0/ ---> this is one
and there are many more out there
@designercoder123 Okay but don't you think that the previous JSON tutorial should give us a head start for such APIs
@designercoder123 thanks for the help
sharang108 sends brownie points to @designercoder123 :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @designercoder123 |http://www.freecodecamp.com/designercoder123
@designercoder123 Okay.
@sharang108 yeah it should, but its more focussed on self learning. They want you to read the documentation and do it by yourself because this is what counts.
@designercoder123 What documentation you are talking about?
@sharang108 the one that says how to use the api
@designercoder123 It'd be helpful if you give me a link directly.
hi guys.. how do I style this 3 div horizontally:
<div id="menu">
<div id="registo">Registar-me</div>
<div id="registo1">Meu Vodacom</div>
<div id="registo2">Ajuda e Suporte</div>
</div>
how can I make my image and gif be centered in the page instead of off to the left? http://codepen.io/bestintown23/pen/XpzXmy
I am working on my Personal Portfolio Project and am stuck on how to start. I have not coded in um -- YEARS. I'm not having issues doing the right things from a code perspective - - but rather, if I think about my project and the related collateral being stored on a server and in folders... where is that on CodePen - how do I find support on this? If I have a set of images and buttons I have designed - where do they live? I cruised up to this point and am now feeling uh...
and @bestintown23 - what about using <center></center> ?
<center></center> is no longer obsolete according to the W3C so i cant use that. @chris10emery
@chris10emery im not sure if i get what your asking, on the codepen servers i suppose. you designed some buttons and images, where did you put them, how are they designed
@bestintown23 try
margin: 0 auto;
@chris10emery in codepen you can upload images other media..use the assets button
@chris10emery you may need to be a pro-member of Codepen to upload assets, otherwise you can link to them if you have url's. The membership starts at $9 a month.
@chiuyong That's a good start. No need to use columns in the nav though, to replicate the effect you want. To place something on the right, for example, you can use the
navbar-right class: http://getbootstrap.com/components/#navbar-component-alignment
I have designs from illustrator - etc on my desktop...
oh
maybe I can put them on google docs - I'll figure it out. ;-) thx
@philipp32 http://stackoverflow.com/a/38921370
Hello there, is there anybody capable to help me debugging this codepen? https://codepen.io/francodanussi/pen/YNraEo/?editors=1111
thx @Lorrie01 & moTo1
chris10emery sends brownie points to @lorrie01 :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @lorrie01 |http://www.freecodecamp.com/lorrie01
@francodanussi What is the problem?
@bestintown23 ...obsolete - sigh
@chris10emery To place an image up on the web, use https://postimage.org. If they're your own images and you want to add licensing information to them, you might try a site like Flickr: https://www.flickr.com/
@francodanussi The console means that it needs jquery: "Uncaught Error: Bootstrap's JavaScript requires jQuery"
could anyone help me get the thumbnails in my gallery wrapping correctly? There’s consistently a gap in the first row. http://codepen.io/bwyan/pen/OyJaoz?editors=1000
@lafisrap but if I add jQuery then what? Do you mean the code is right?
@fdra
@francodanussi I don't know yet. Before jquery is running ... ;-)
Just tell me where you got stuck
@lafisrap He isn't using jQuery, but you're right, to get rid of that error in the console, he needs to add it
@lafisrap I mean, in my codepen the console doesn't give me any clue or response. I just click the button and nothing happens, I don't know if I'm doing the fetch function in a proper way
@TylerMoeller @lafisrap By the way, thanks for getting involved, both of you
francodanussi sends brownie points to @tylermoeller and @lafisrap :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @lafisrap |http://www.freecodecamp.com/lafisrap
:star2: 1419 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
You are loading your codepen over HTTPS though, I noticed, and Open Weather Map only works over HTTP unless you pay money
And navigator.geolocation only works over HTTPS in Google Chrome
@francodanussi Put a console.log("Hello!") before line 2 and a console.log(position) before line 3
Then look in the console (right mouse button on the output window/investigate (the lowest option) )
@lafisrap I did that, as you said.
@TylerMoeller Ok, thanks for the info. I think I will code this weatherapp using jQuery. I used fetch for the previous exercise and it felt really easy, but know it's not collaborating at all.
francodanussi sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: francodanussi already gave tylermoeller points
@francodanussi Till the console.log(lon); it works ;-)
But @TylerMoeller is right. You have to choose either another way to get the location or to get the weather data. I chose to get the location different.
yeah, now that's working, because of the https. But the fetch library it's not doing the right job
Ok @lafisrap @TylerMoeller I will think about that
@francodanussi $.getJSON() is a nice command ;-)
So if the API does not allow HTTPS and the only way to have geodata is with HTTP, then? Do you know any free option?
@lafisrap Yeah. I know that get.JSON() is smooth but I wanted to try new stuff
@francodanussi Try: $.getJSON( "http://ip-api.com/json", function( location ) { });
@lafisrap There you go, nice! thank you Michael
francodanussi sends brownie points to @lafisrap :sparkles: :thumbsup: :sparkles:
:warning: francodanussi already gave lafisrap points
Or fetch( "http://ip-api.com/json" );
@lafisrap ;)
Hey, everyone! I can't seem to figure out the white line at the top of my navbar on my portfolio project. I have everything set to transparent, thought it was maybe a chrome bug, but it shows up in safari too. So it must be something on my end. Thanks in advance.
http://codepen.io/turdfurgeson/pen/apVvzV
http://codepen.io/turdfurgeson/pen/apVvzV
@turdfurgeson
.splash-hi { margin-top: 0;}
Learned a new trick@! THANKS, @Boardley! Had no idea. Still pretty new to this.
turdfurgeson sends brownie points to @boardley :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @boardley |http://www.freecodecamp.com/boardley
@turdfurgeson - You're welcome.
If anyone’s looking for things to answer later, you can disregard my earlier question. Figured it out.
Hello. HELP!!!. I had gotten my Random Quote machine working. Now for some reason it is not working. Can someone please take a look at it to see if there is perhaps some setting I have neglected? https://codepen.io/ibanton/pen/jyrNLj
@remdata remove 's' from https
@remdata seems to be getting stuck when you try to set the colors
i dont see anything with an id of quotetext
can anyone go through this and figure out why background picture is not changing
@moT01 . I will check it. Guess I did not save my changes. Thanks.
remdata sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 477 | @mot01 |http://www.freecodecamp.com/mot01
@remdata yea, that got it working, let me know if more problems
@moT01 can you go through my problem ?
@bigyankarki i took a quick look, wondering if maybe you could make an object instead of going through loops
what do you mean by make an object instead of loops @moT01
dont we need it to check condition?
the condition is already in your json
how? @moT01
for the background image, make the key the description and the value the url...
object = {
'broken clouds' : 'url here'
@bigyankarki . I used document.body.style.backgroundImage in my javascript and removed "body{} " from CSS.
then set it with jquery, ... $("body").css('background-image', 'object.weather.description'); ...you may need to set the weather.description to a variable for that to work, ...if that makes any sense
im gonna try n make that work, ...gimme a bit
according to openweathermap api, it's 279.913 degrees outside
Hey all, I was wondering if anyone had found a way to decouple a css class from an element midway as the class were being played
My question is in the context of the simon game
I'm trying to get the off button to work. I
I'd like something to happen like where the game is in mid "beep" and when the button is pressed, any button that's beeping would stop.
http://codepen.io/moT01/pen/Kayqqg?editors=1011 @bigyankarki
@moT01 . I made the change for quoteText. However, It seems that somehow none of my layout is being applied.
@remdata still having problems?