Maybe a local free code camp meetup too? I forget the link to those, will try to find it
The FreeCodeCamp meetup in my city is disbanding.....just before I even try to contact the organizer too. :(
@SkyCoder01 i have joined the group but its kinda inactive
random question for portfolio does the navigation have to be across the top?
@itchick85 no, it can be on the bottom or the side. there just has to be a navigation bar
hi, I am doing the quote generator challenge and am having trouble with the API part. I managed to get a quote when I click my button, but I always get the same quote (though I get a different one when I try it on my phone...weird). do you know what is wrong with it?
http://codepen.io/achudoz/pen/YNgdMo?editors=1010
http://codepen.io/achudoz/pen/YNgdMo?editors=1010
@Rallph yeah, but I don't know why. I thought that it is because it is copied from the examle on the API website, and the [0] targets one specific quote. But why would then my phone display a different one. I am rather confused lol
@itchick85 it doesnt but think about you coming on a site you expect a navigation bar to be at the top right
its quite logical
@achudoz I'm not sure why it displays something different on your phone, but when I change the number in your API call (/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=) it returns more quotes, but does not include the original one. Also they do not seem to be random
@achudoz May I suggest a different API instead? The one that was recommended to me was this one http://forismatic.com/en/api/
@Rallph thanks, that is useful. I guess each number is assigned a different quote and could be randomized by a simple random number generator.
@Rallph oh yes please do!
@Rallph thanks
achudoz sends brownie points to @rallph :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @rallph |http://www.freecodecamp.com/rallph
@achudoz If you look at the second code example in the documentation: https://quotesondesign.com/api-v4-0/
They use
They use
cache: false in their .ajax call. I don't know why they don't do the same for the $.getJSON code example, but if you add $.ajaxSetup({cache:false});, you should get a new quote every time.
@SkyCoder01 Oh god thank you! that one line fixed it perfectly. I however don't understand what it does lol
achudoz sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 208 | @skycoder01 |http://www.freecodecamp.com/skycoder01
trying to change the innerHTML of tag p when the button is clicked, however it isnt working
can someone plz check the code and find the error http://codepen.io/yuchiu/pen/Lxaovp
@SkyCoder01 ha, I will just accept it as magic for now and move on. I am still pretty confused about the whole ajax/json stuff. That unit here just consists of saying "copy+paste this". It is unusual after the almost unnecessary HTML/CSS/jQuery fiddling in earlier units. Well, whatevs, I will figure it out with fiddling and reading now.
Thanks again for helping out!
Thanks again for helping out!
achudoz sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: achudoz already gave skycoder01 points
@achudoz I just learned it all too. If you visit that link you use in your getJSON in your browser, you can see all the JSON. All that $.getJSON and $.ajax do is grab that data and let you use it. For example, in your code, it assigns all the JSON to the
a variable function(a), then you can parse a to get what you want from it. Lots of magic I don't understand going on behind the scenes though, that's for sure :)
Kind of like a web scraper I guess, it visits the page, scrapes the data, and lets you consume it
please can some one look up this code for me and tell me were its not working correctly my operator variable refuses to function well
var firstValue=-100,
secondValue=-100,
result,
operator=-100;
function onSelect(value){
if (firstValue===-100){
firstValue=value;
return;
}
if (operator===-100){
operator=value;
return;
}
secondValue=value;
result=firstValue+secondValue;
document.getElementById('answerInput').value= result;
document.getElementById('outPut').value=firstValue+'operator'+secondValue+'=';
switch (operator){
case "+":
result=firstValue + secondValue;
break;
case "-":
result=firstValue - secondValue;
break;
case "":
result=firstValue secondValue;
break;
case "/":
result=firstValue / secondValue;
break;
}
}
secondValue=-100,
result,
operator=-100;
function onSelect(value){
if (firstValue===-100){
firstValue=value;
return;
}
if (operator===-100){
operator=value;
return;
}
secondValue=value;
result=firstValue+secondValue;
document.getElementById('answerInput').value= result;
document.getElementById('outPut').value=firstValue+'operator'+secondValue+'=';
switch (operator){
case "+":
result=firstValue + secondValue;
break;
case "-":
result=firstValue - secondValue;
break;
case "":
result=firstValue secondValue;
break;
case "/":
result=firstValue / secondValue;
break;
}
}
@yuchiu Minor error in your code, use
document.getElementById for both and remove the #:const btn = document.getElementById('btn');
const quote= document.getElementById('quote');
Can somebody please help me with Comparisons with the Logical And Operator in JavaScript? Here is my code:
function testLogicalAnd(val) {
// Only change code below this line
if (val && 25) {
if (val && 50) {
return "Yes";
}
}
// Only change code above this line
return "No";
}
// Change this value to test
testLogicalAnd(10);Also, here is the link: https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator
@SkyCoder01 wow, it works now, awesome. thank you so much for your help
yuchiu sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 209 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@c0d0er2 you are suppose to combine the two seperate "if" statements into one
try to use "&&" operator to combine both of them , theres an example in the instruction of the exercise
frustrating
@mcube25 paste the link of your excercise, it's very hard to read ur code like this without knowing what you are trying to do.
can anyone suggest me a neat way to animate the input field into the top after a user submits the input?
my var operator is saying undefined,i want to know what im not doing correctly
Trying to do the Wikipedia Viewer challenge. I submit the Wikipedia search string via getJSON, which fails. Why does it fail?
My test string is http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=berlin. When I enter it in the browser, a nice JSON array is returned, as expected. I do notice that it becomes https; is that the problem?
My test string is http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=berlin. When I enter it in the browser, a nice JSON array is returned, as expected. I do notice that it becomes https; is that the problem?
I am successful with getJSON('http://api.openweathermap.org/data/2.5/weather.......") in the earlier Weather challenge.
@mcube25 An earlier question of mine got answered. Perhaps I can help you with your current problem? Although I am not really more advanced than you.
However I don't understand what the problem with your calculator is. When do you get an "undefined" error?
However I don't understand what the problem with your calculator is. When do you get an "undefined" error?
i get an undefined error when i console.log(operator),when i do a sum i am supposed to get the symbol in my form output but it shows operator instead
hello everyone i'am doing the simon's game ,i met a problem ,when i click the div then two targets happened ,can someone tell me where i make a mistake
@berndbausch Do you know how to view the browser console for errors?
@mcube25 Your code line
document.getElementById('outPut').value=firstValue+'operator'+secondValue+'=';outputs the string "operator"
@SkyCoder01 Hey good morning (or evening). I can open the console but don't see any errors. I do see all my console.log() messages.
@mcube25 Also, you have switch(operator). But "operator" is an array, not a string.
@berndbausch The browser console is different from the one in codepen (just to make sure)
@SkyCoder01 I mean the codepen console.
Well, I used $.ajax() instead of getJSON and did see that there was an error. The error message was empty, though. This is expected, it seems, in the case of cross-origin access.
Well, I used $.ajax() instead of getJSON and did see that there was an error. The error message was empty, though. This is expected, it seems, in the case of cross-origin access.
I would say how to open it but I think it depends on the browser. For me, I press F12 and then press the "console" button in the window that comes up. You are probably getting an error about cross-origin requests with your Wikipedia URL, but it might also be an issue HTTP/HTTPS mixed content
@SkyCoder01 yes I know how to open the debugger (I use Firefox most of the time) and the console.
@SkyCoder01 When I access the openweathermap, it's cross-origin as well, but there is no error.
Okay, if you aren't seeing any errors then, maybe you can share your codepen? I can try to take a closer look - I also used opensearch for my wikipedia project
If you can use HTTPS, always use it.
Anyway, let's see if the browser console says something.
@SkyCoder01 no error message about http, https or cross-origin in the browser console.
@berndbausch Hmm, I'm happier to take a closer look and see if I can help debug it. Do you have a codepen URL?
@SkyCoder01 Thanks in advance :) My Wikipedia codepen is https://codepen.io/berndbausch/pen/BpMPXB, but let me make a stripped-down version
@berndbausch I see what's happening, with a form, you have to use event.preventDefault() to submit the information.
$("#searchform").submit(function(event){
event.preventDefault();After adding that, I get a cross-origin error.Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=test. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
I had the same problem and found this stack overflow talking about it: http://stackoverflow.com/questions/23952045/wikipedia-api-cross-origin-requests
The simple fix is to add
The simple fix is to add
&origin=* to your URL
@SkyCoder01 I have to say that this is way over my head :) OK many many thanks again.
berndbausch sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 210 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@SkyCoder01 Well, you seem to be better at finding solutions by googling. I will stay close to you from now on :)
@mcube25 I am not yet at this challenge, so I don't quite understand how the button presses are converted to numbers and operators. Something is wrong with your logic to obtain the operator value.
@mcube25 I haven't done the calculator yet, but the color of your first two variables are different
Put a space between your
= signs and they go to the normal color for me
That may be part of the problem...
@mcube25 You do
if (operator===-100){
operator=value;I think you need to correct that, but I wouldn't know what's wrong and how to make it right.
@mcube25 Other than that snippet, you never set the operator.
@mcube25 So you initialize operator as an array, then you test it for -100 (it is never -100, since it's an array), and only if it's -100 you set it to a value. You need to rework this logic.
Heya -- Good Evening from Brooklyn -- I just submitted my "Tribute Page". What's the deal? Does it go off to die? Will there be any follow-up on whether my html skills were crap or decent or any corrections? Sorry if this was mentioned in the directions.
@fuscobite Your internet identities will be wiped out if it's not good.
@fuscobite But seriously, you just complete it for yourself and don't cheat when clicking "I completed the challenge".
@fuscobite You can also show it off here and ask for comments. I didn't, because mine is too ugly.
@fuscobite And good afternoon from Tokyo :)
@berndbausch Thanks you! I am more concerned about ugly, sloppy coding -- but OK! Will show. TY.
fuscobite sends brownie points to @berndbausch :sparkles: :thumbsup: :sparkles:
:cookie: 4 | @berndbausch |http://www.freecodecamp.com/berndbausch
Here is my "tribute" -- not so concerned about the content or terrible spelling as I banged this out -- but any thoughts on the commands would be very much appreciated.https://codepen.io/Fuscobite/pen/rjRPzQ
@fuscobite I know why I didn't publish mine. Your's just too pretty.
why is navbar-fixed-top not working?
@bigyankarki - just dropping in, since your post is the last one there, have you removed the
navbar-fixed-top?
@bigyankarki - hmmm - I see that if you add it, it seems to make the search box disappear? Or not be displayed properly, was that the problem?
exactly @khaduch
@bigyankarki - it makes the search bar hidden behind the navbar. I think that if you add
padding-top: 100px or something about that size to the body, it would work?
@bigyankarki - it's a problem that pops up with the fixed navbar being positioned at the top and things "scroll" under it? I added it to the
body CSS selector.
you might have to play with the value, but it brings the search bar down into the viewing area.
@bigyankarki - one thing that I think you have happening, besides that fixed navbar, is that you are displaying the search results in reverse order. The closest hit on the search is at the bottom.
I did this in the CSS panel:
body {
font-family: 'Julius Sans One', sans-serif;
padding-top: 100px;
}You can probably add it in different places and get the same effect.
@khaduch the easier waya was just to increase margin
i increased it to 100
and it worked :D
thank you for suggestion
@bigyankarki - sure, probably several ways to do it - margin works, too.. The search results scroll under the navbar
@bigyankarki - you're welcome...
@khaduch what do you mean by search result is displayed in reverse order?
@bigyankarki - great - it looks nice.
I search for "potato", and the first result for the vegetable is at the bottom of the list. I kind of expect that to be at the top?
I search for "potato", and the first result for the vegetable is at the bottom of the list. I kind of expect that to be at the top?
so should i use append?
at least the order I'm expecting... :)
bigyankarki sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
awesome! Like I said, it looks nice :star2: - good luck with the projects!
@khaduch i was trying to add a search button and clear button inside the input field
do you have any idea how can i make it happen? :)
thanks :)
@bigyankarki - I don't know if you can make it inside the search field, but you can probably set up a div and add a couple buttons at the end of the box? Although I know that I always see a small "X" what looks like it is inside of a search box to clear it? I never tried to see how that was done - it might be a trick to just construct the elements to make it look like it is inside the text input?
ya actually i looked it up at other sites too and i found it there is no neat waya to get working button inside the input field
its just a ton of codes and CSS to make it happen :D
@bigyankarki - you might be able to create the div and put the type of border around it like you have for your text input, and then squeeze the buttons inside?
@bigyankarki - I guess that you could actually do it without buttons - just use some spans or maybe inline list items and attach click handlers with javascript or jquery to do the functions that you want?
$("#thisForm").submit(function(event){
event.preventDefault();
$("#inputField").animate({
top: '100px'
});
var input = $('#inputField').val();
getData(input);
console.log(input);
});
is there anything in the animate code?
Hi, how do I calculate margin in percentage for a given margin in px? The problem is that my container is set in percentage, so I don't know how do I convert the margin px to margin percentage
@itchick85 put this in your css section
ul.nav-pills li{
margin: 0 15px;
}
@abhijithsomaraj can you explain e what does this mean ?
<h2 aling="text-right">About</h2>
h2 aling ?
itchick85 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 942 | @adityaparab |http://www.freecodecamp.com/adityaparab
itchick85 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @jtan3 |http://www.freecodecamp.com/jtan3
how not to move it down?
how to stop moving it down
the second and third images should be in the same row with the first one
but it keeps going down whenever i resize the window
combining three images makes a perfect square
omg my English sucks
Inside your row. Use col-xs-6 class to keep both in th e same row
Both the columns
<div class='col-xs-6'>
And make sure to use bootstrap library
yes I'm using bootstrap library
it just made it permanently down
@bebesel you are not using properly bootstraps 12 column grid system
i forgot to save lol
how to use it properly?
use the 3.3.6 not the 4.0 alpha
depending on what you want to achieve
thanks!
thank you for grid examples
that's what I'm looking for
Morning all. I've got a question: When I have to images with different dimensions and I put them into div containers with the same dimensions, they still aren't the same "size" on my website. How do I get them to be the same size?
https://codepen.io/Millen812/pen/egjQoo like you can see on this page for example
everywhere ?
height :)
you are right
but in another case, the image stretches and it doesn't look good... How can I "scale" the image?
without it looking derpy
nah I'm not talking about bootstrap or this specific case, it's another case at work right now
we work with wordpress and there are 2 images, but the aspect ratio is different. When we use height to make the one picture well higher, it stretches and looks derpy
but thanks for your input ;) @jtan3
millen812 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @jtan3 |http://www.freecodecamp.com/jtan3
One of them is 566x319 px and the other one is 566x455px. So when we want to have them in a div container of the same size, the first picture looks stretched. Any workaround?
Hello! I try to add <span class="glyphicon glyphicon-home"></span> to my NavBar but it doesn't work. I made something wrong? :|
Hello everyone!
I'm working on an exercise: "Build a Random Quote Machine" (https://www.freecodecamp.com/challenges/build-a-random-quote-machine)
And I have a question: Where can I get JSON file, or how to create it to be available? How to make a link on him?
I'm working on an exercise: "Build a Random Quote Machine" (https://www.freecodecamp.com/challenges/build-a-random-quote-machine)
And I have a question: Where can I get JSON file, or how to create it to be available? How to make a link on him?
i use forismatic.com
myteststudy sends brownie points to @mrpuer :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @mrpuer |http://www.freecodecamp.com/mrpuer
I have 10 ajax calls on one page...and i want to trigger an event when all 10 are over...any method available for this ?
Maybe when they Ajax calls run have them add to a counter and once more when the final call is done. Then set an if statement to run when the counter reaches a certain number?
@deepakSpatil you can use
$.when See examples(scroll to bottom) here https://api.jquery.com/jquery.when/
Any C++ guys here? I'm trying to build a Tic-Tac-Toe game where the computer selects a place randomly.
@playingwithinfinity But for that i guess i could help ^^
@playingwithinfinity I'm not yet through but
case 7:if(board[2][10] != 'X' sounds big wrong - i don't think there is a place on the board with index 10
@playingwithinfinity For that it shows the move of the enemy you may want to place a
display(); after computersTurn(); in the main function
@alpox haha the 10 thing is a bit silly mistake
Hey guys, any idea why my code isn't responsive at all? thought by using bootstrap classes that's default >.<
@playingwithinfinity
int index = rand() % (8 + 1); gives you a number between 0 and 8 - not 1-9 which you handle in computersOutput
Now it is showing the computer output, but on a new board like this :
1 2 3
4 5 6
7 8 9
Player X's turn: Select the number to place X
5
1 2 3
4 X 6
7 8 9
1 2 O
4 X 6
7 8 9
Player X's turn: Select the number to place X
You may want to add some space in between :D
cout << endl << endl; or something like that :-)
Mates I've to store the value from an input box and use that value into an ajax request... I'm not able to store the value...
var value = document.getElementById("utente").value;
using this
If I do an alert(value) is totally empty...
@alpox How do I make sure the random number doesn't repeat?
1 2 3
4 5 6
7 8 9
Player X's turn: Select the number to place X
4
1 2 3
X 5 6
7 8 9
Computer Played
1 2 O
X 5 6
7 8 9
Player X's turn: Select the number to place X
5
1 2 O
X X 6
7 8 9
Computer Played
1 2 O
X X O
7 8 9
Player X's turn: Select the number to place X
9
1 2 O
X X O
7 8 X
Computer Played
1 2 O
X X O
O 8 X
Player X's turn: Select the number to place X
8
1 2 O
X X O
O X X
Computer Played
1 2 O
X O O
O X X
Player X's turn: Select the number to place X
2
1 X O
X O O
O X X
Computer Played
1 X O
@playingwithinfinity Well, the easiest way would be to let the computer replay as long as it didn't hit a free spot and as long as there still are free spots
@playingwithinfinity you can store previous random number in a variable and compare it to the current one before using it
$("#submit").submit(function() I call ajax with this
Damn frustrating.
@alpox haha I haven't done that project yet so yeah it might not work in the game's context
@playingwithinfinity Well you can do a
void computersTurn(){
cTurn = true;
bool computerPlayed = false;
do
int index = rand() % (8 + 1);
computerPlayed = computersOutput(index);
} while(!computerPlayed);
cTurn = false;
}
@playingwithinfinity Then rewrite the
computersOutput function to return a boolean which indicated whether it could or could not set the value to the board
Which needs bit rewriting for board checks etc.
The function declaration would look as following then
The function declaration would look as following then
bool computersOutput(int index){
With this
As long as it could not set it, you the do/while loop just goes on trying.
computersOutput returns a boolean indicating whether or not it was able to set at the given random location.As long as it could not set it, you the do/while loop just goes on trying.
Sooner or later the random has to hit one free place on the board
Other possibility:
Maybe cleaner?
You make a function which returns an array of field indices with the indices of the board which are free.
You make a random for the size of that array and set a stone to the index at the position given by the index in the array
You make a function which returns an array of field indices with the indices of the board which are free.
You make a random for the size of that array and set a stone to the index at the position given by the index in the array
lol
@playingwithinfinity Also, your
since you have then a one dimensional array with a length of 9, you can get rid of the switch and just use the index directly on the board.
computersOutput function can be simplified since you have a one-dimensional array which you use as two-dimensional.since you have then a one dimensional array with a length of 9, you can get rid of the switch and just use the index directly on the board.
@playingwithinfinity Oh sry if that was too much :D
Guys i have a h2 title that is more or less something like this
<hr><h2>SPACE</h2><hr>What happens with my font settings is that SPACE creates an extra space after each letter (through letter-spacing).
So, the problems with this is that the rightmost <hr> is pushed to the right a bit and it sort of makes things ...off. (like this -- S P A C E -- , but no as exagerated)
So, i'd just like the rightmost HR to overlap the last letter's space. Is that possible?
that's it.
short width
@St3ps Maybe easier would be to use one
hr and and then a h2 and move the h2 on top of the hr through css (position: relative; top: -30px as example), then set the background of the h2 to white (or whatever your background is)
st3ps sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 770 | @alpox |http://www.freecodecamp.com/alpox
That would result in the hr going the whole width and the h2 element would overlap the
hr while going sure that the hr does not go right through.
Is it possible that some bootstrap classes don't work in codepen?
@St3ps I did that right yesterday - with a container and a border-top instead of a
hrthough:
@Blackioo They should all work. But bootstrap classes need to be composed in the right way. And also, go sure that you have the css imported :-)
I included bootstrap with the quick add fiture, but for some reason classes like class="img-rounded" don't work :<
*feature
sure, be prepared for spaghetti, currently trying to center everything beautiful without using regular css :D
I believe they messed up half of the FCC people now hahaha
Or rather how
I see that they changed their quick add feature for bootstrap to use the 4.0.0 alpha version of bootstrap - not version 3 anymore :-/
@Blackioo So the bootstrap doc you found doesn't apply for the bootstrap you added by quickadd
@Blackioo You have to go over to https://v4-alpha.getbootstrap.com/getting-started/introduction/ then :D
You can choose ^^
But be aware that people from FCC don't know about 4.0 alpha :D
yeah probably better to learn the new ones, since im learning it right now anyway :D
thx @alpox
blackioo sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 771 | @alpox |http://www.freecodecamp.com/alpox
So everyone will get confused when you ask questions about bootstrap here and their rules don't apply ;-)
Yea i guess that might be better
But help will be confused here :P
Just be aware of that :D you gotta tell them when you need help
Can't get my JS variable to show up in my HTML element. it's the last thing in my JS if anyone can figure out whats wrong.
fixed the class to id, still not working
@Blackioo So to make your image become responsive use
To make it round... well they took that out of bootstrap with alpha 4.0 so you gotta use css -->
img-fluid.To make it round... well they took that out of bootstrap with alpha 4.0 so you gotta use css -->
img {
border-radius: 100%;
}
@alpox is the rest of the FCC tutorial only bootstrap 3? because if i'd try to learn bootstrap 4 now but only use bootstrap 3 on fcc, well ... maybe i should learn 3 :<
also thx again @alpox :D
blackioo sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: blackioo already gave alpox points
@Krimsonmedic Chrome blocks your call to navigator.geolocation.getCurrentPosition since they newly allow that only in a secure environment https://
But you cannot use https:// when working with openweatherapp since that is not in their free plan.
You gotta use either some other weather api or another location api. Most people go with another location api like http://ip-api.com/
@Blackioo Yes, FCC teaches bootstrap 3 - because 4 is still in alpha. Anyways, you can still learn 4 i would say. It wouldn't hurt.
The main thing you have to learn is to read documentation and get your own info anyways so that would be a good start i guess.
The main thing you have to learn is to read documentation and get your own info anyways so that would be a good start i guess.
@alpox hey alpox, it's odd but my h2 doesn' actually overlap, they still act as if they're in the same ... "layer" -- if it means any difference, it's actually an h1 :p, is tehre anything i should be doing to the hr as well?
@Blackioo And in the end you can also go without any bootstrap :-) I usually don't use it in my projects
@St3ps What do you mean by same layer? ^^ what does it look like?
@alpox Oh ok, i tried using no css at all there, because the example page managed to make it look good with bootstap only
@alpox same layer in the sense that they still act as if they're colluding with each others spaces! unleeesss i move around with the position: relative 'thingies (left, top) if i do that, it will overlap
@St3ps hmm try to make
hr, h1 { display: block; } and try again.h1 doesn't do much as normal inline element.
ofc. maybe you need better suitable selectors for them to not affect every h1/hr on the page
@Blackioo Yea they do :D you can try that also
@alpox is there a reason why you don't use bootstrap at all? Isn't it more time efficient to use the framework as much as possible?
Always thought the more frameworks the better :D
@Blackioo The problem you get with bootstrap is when you want real custom styles. Bootstrap makes all websites look quite similar.
If you want to make it quite custom, bootstrap is mostly in your way and you have to override its styles quite much and get rid of their pre-settings
If you want to make it quite custom, bootstrap is mostly in your way and you have to override its styles quite much and get rid of their pre-settings
Hmm thats not so true :-) sometimes the more frameworks the complicated
They can stand in your way or not interact good with each other
It depends on how good the interfaces of the frameworks are made and what they allow you to do. Often it helps in a lot of cases but stand in your way like a rock for some other stuff where you need ugly hacks to get done what would be rather easy to do without it.
So choosing and using a framework always needs some research and caution
So i think i'm out for now :-) its lunchtime
http://codepen.io/DavidRadivojevic/pen/zNbJaW hi does anyone know why there is a gap between page 2 and 3
what do i do when making a portfolio and i havent made anything
what do i put
?
Just link your github or some side where you will put something in the future :D
your codepen for example
@alpox Ok i really can't figure it out man, look, i did it on codepen, tried it with block display now with inline block, still no go
feels like he only way i can come across this problem is with a position: absolute
but then it totally kills responsiveness, as screens change sizes
Hey :) does anyone know why the second background image is waay under the first? http://codepen.io/feuerbird29/pen/apxONQ?editors=1100
Like one image under the other
nvm, tested it on chrome
when you remove the max-width parameter out of .img-fluid the images stack on top of each other nicely, although their width might be .. undesirable
you could just make 2 divs with a predefined height (say 100vh) and have the images sourced in the background, then apply the contain(or cover, i forget) property, that'll make it scale according to size
<h5>Since ive made no projects yet, im just gonna be linking my CodePen where some projects will hopefully be made soon.You can check out my CodePen by clicking on <a href="http://codepen.io/DavidRadivojevic/"><a target="_blank">this</a></a>.</h5>
whats wrong inhere
its not opening another tab
feuerbird29 sends brownie points to @st3ps :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @st3ps |http://www.freecodecamp.com/st3ps
f
hey guys, im on "Show the Local Weather" exercise and im a bit stuck..
it askes me to use an api call and get the current weather for the users location..
iv'e got the exercise work on netBeans and a local brauzer,and used "navigator.geolocation.getCurrentPosition" to get the users current position..
the exercise ask me to upload it to "CodePen",
but codePen blocks it with this error:
"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.
getWeather @ pen.js:2358"
is there a wey to upload it to CodePen?
or is there another function you would recommend to get users current position?
@Blackioo Harambe feels very centered, perhaps you mean one of the captions, or am i missing somehing there? What isn't centered on the list?
@Bgene not sure, but why not use a free image repository like imgur?
@St3ps the hole list is a little bit off, on mobile it's centered but on PC it looks a little bit too much left, if i define class="text-center" the bullet points stay left and only the text moves :<
$('.container-fluid').css('background', 'linear-gradient('colors[cTemp] + ',' + colors[cTemp]+')');
Why is this throwing an error?
Any ideas?
@shaytamir lookinto geoip
It is a lot better since it doesn't prompt the user to share the location
@WiseKodama
css("propertyname","value"); you should have one property name and one value
@alpox that is better, still a problem though, as the h2 is supossed to be on top :p
Omg, I just started the second lession on CodePen editor, "Build a Personal Portfolio Webpage", and I got completely confused and have no idea about how to start it. I've checked the code pen editor of the example, and I saw such a lot of things that I haven't seen on the previously lessions. I wanna cry. Good morning!
I just put it more down so you can see it better
@edson-rodrigues Hi there :-) don't let yourself down by this. Its usual that its a bit overwhelming.
The lesson for the Portfolio Webpage is that you learn to find the stuff you need yourself on the internet through Stackoverflow, Bootstrap documentation and MDN etc :-)
It takes time and effort to find the stuff, but just go slow but steadily. Try to build one thing at a time and not everything at once.
The lesson for the Portfolio Webpage is that you learn to find the stuff you need yourself on the internet through Stackoverflow, Bootstrap documentation and MDN etc :-)
It takes time and effort to find the stuff, but just go slow but steadily. Try to build one thing at a time and not everything at once.
st3ps sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 772 | @alpox |http://www.freecodecamp.com/alpox
@alpox Thanks for these words. I'll take a break on the lession to study a little more about bootstrap and jQuery for a while, then I'll get back to the lession.
edson-rodrigues sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 773 | @alpox |http://www.freecodecamp.com/alpox
hi there I'm having a problem of how to put my first header below my fixed purple bar..
how to give brownies?
oppiniated sends brownie points to @usernmae :sparkles: :thumbsup: :sparkles:
:warning: @usernmae's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
i would like the image in my css tab to be the background for both of the elements, how would i do this?
@ZackRich12 in your CSS you reference a class "background-image" but it's never used in your Html, and I would put the background on a Div surrounding the elements you wish to have a background
<div class = "classhere?">
@cjrutherford
how do yall decide which librarys you include in your page? Just search randomly through the web and hope to find fancy things or is there any method yall apply? :D
thanks in advance
Can I get some help with my twitter button on the random quote machine please? It's looking like a link rather than a button and when I click it, it just opens another window of my code pen page rather than the twitter link:
http://codepen.io/ermarie/pen/KaPdKj
http://codepen.io/ermarie/pen/KaPdKj
Hey guys, working on my portfolio and Im using Foundation rather than Bootstrap. Ive run into a problem where my h1 isnt being centered vertically, Im guessing its to do with no height being defined for the div but Im not sure? http://codepen.io/DeanHollstrom/pen/pRGLWv
how would one create a navigation bar at the top of the web page
@Drbathound If you mean like the one I have on my codepen above, then take a look at the foundation framework, or bootstrap. Both have those elements built in
@DeanHollstrom is your title element part of the foundation framework?
@Drbathound Nope, its just a regular h1 element, centered using a flexbox command which is baked into foundation (it also allows vertical centering but I cant get that working just yet)
@Fredd93 no need to define
.container-fluid its a predefined bootstrap's class.
@DeanHollstrom
you can do
you can do
<center><title>dasdfsdf</title></center>
@heyDante thanks dude you won't blieve it was '-' that was missing -_-
fredd93 sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 428 | @heydante |http://www.freecodecamp.com/heydante
@Drbathound Thats for horizontal centering, I want both horizontal and vertical
@Drbathound plus you dont actually need the <center> tag as you can use align:center in your css rules
drbathound sends brownie points to @deanhollstrom :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @deanhollstrom |http://www.freecodecamp.com/deanhollstrom
@heyDante True, thats why I said to use the css align rule. Unless you mean the css is outdated?
I'm currently at the Portfolio exercise, how did you decide what librarys to include? the example portfolio has quite a few
So I just code along and when I'm confused I google "library for xyz" ?
Usually you try to do what you want to and if you find you cannot work it out without a lot of effort, you try to find a library which does the work for you @Blackioo
thx again @alpox - my alltime teacher :clap:
blackioo sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 774 | @alpox |http://www.freecodecamp.com/alpox
http://codepen.io/bebesel/pen/VPNPMb hi... I positioned my three buttons on the right side of my navigation bar.. is there a better way to do it? or did I just do good?
oh wow.. I did bad..
@bebesel You should maybe put all of the buttons in a wrapper div and then put
right: ... on that div instead of single buttons
@vasiljevs Did you put all of the examples together yourself? :D
bebesel sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 775 | @alpox |http://www.freecodecamp.com/alpox
Aha :D i usually read stuff and its gone :P
I'm working on the portfolio page: https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage
#5 says to put thumbnail images of different projects, or put placeholders. How do I do placeholders?
@jampcat9 Just put there any content which expresses that there should be or will be some content
@jampcat9 If you need a real image placeholder: http://placehold.it/
jampcat9 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 776 | @alpox |http://www.freecodecamp.com/alpox
if you want it to add to your body for example just write
<body background:"insert link here">
First time I include a library outside of the tutorial, how do I include this? https://startbootstrap.com/template-overviews/scrolling-nav/
How does the example page get everything to be in the center without any padding?
the rest seems to be col---offset
hey guys, im on "Show the Local Weather" exercise and im a bit stuck..
it askes me to use an api call and get the current weather for the users location..
iv'e got the exercise work on netBeans and a local brauzer,and used "navigator.geolocation.getCurrentPosition" to get the users current position..
the exercise ask me to upload it to "CodePen",
but codePen blocks it with this error:
"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.
getWeather @ pen.js:2358"
is there a wey to upload it to CodePen?
or is there another function you would recommend to get users current position?
guys can you please check if my clock is working? all functions alright? does it look nice too? would you guys say it's a finished project? http://codepen.io/EvanDCP18/full/bgZZqm/
@shaytamir => http://ip-api.com/docs/api:json
shaytamir sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 777 | @alpox |http://www.freecodecamp.com/alpox
after reading several "margin collapse" articles I still not quiet sure how it works and what to do to avoid it, anyone care to explain please :(
How do I add a custom font to my tribute page? I've figured out how to add the Google font library, but I found another cool font that isn't part of that library. How do I use it? I have the ttf file, but I don't know how to - well, how to do whatever I have to do to make it useful in CodePen. So new at this!
@rsxhoxhi you have to use de font-face in css, do you now how?
@Koderkid1936 Margin collapse happens when an element cannot determine its size through its boundaries or inner content.
This usually happens when you have an element without content which is an
I don't think i can just cover all cases in which this happens. Whenever it happens to you, you should just go sure that the element can adjust itself to SOME sizes.
This might be that it can adjust itself to its content, this might be that it can adjust itself to its parents (as a block element) where the parents need an explicit set size (percentage, width/height or whatever), or that the element itself has an explicit width/height set.
This usually happens when you have an element without content which is an
inline or inline-block element or a block element whose parents have no exact size.I don't think i can just cover all cases in which this happens. Whenever it happens to you, you should just go sure that the element can adjust itself to SOME sizes.
This might be that it can adjust itself to its content, this might be that it can adjust itself to its parents (as a block element) where the parents need an explicit set size (percentage, width/height or whatever), or that the element itself has an explicit width/height set.
@jonylif I did add the @font_face code in CSS, but (and forgive my un-technical terms) it seems like that bit of code still can't access the tff file with the proper font.
@rsxhoxhi You'll have to put all the font files somewhere so you can access them and then reference them as explained here: https://www.fontspring.com/support/installing_webfonts/how-do-i-use-the-webfonts
use that page
automatly transform your desire font in all de formats that the css need
rsxhoxhi sends brownie points to @jonylif :sparkles: :thumbsup: :sparkles:
:cookie: 73 | @jonylif |http://www.freecodecamp.com/jonylif
in the download also you have a stylesheet with the exact code that you need to put in the css
guys can you please check if my clock is working? all functions alright? does it look nice too? would you guys say it's a finished project? http://codepen.io/EvanDCP18/full/bgZZqm/
can't anyone please take a look? :(
@EvanDCP I haven't done that project yet, but as far as looks, why not compare it with other popular pomodoro clock designs? http://codepen.io/search/pens?q=pomodoro&limit=all&type=type-pens
@SkyCoder01 thanks but the problem is my codepen isn't working as in some features like bootstrap, fonts, colors, aren't working, so I can't actually check how my project looks or how similar it is to others. That's why I'm asking here if it's working as I can't check myself :/
evandcp sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 212 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@EvanDCP Seems you are using an alpha pre-release version of bootstrap 4. Is that intentional? Also, your CSS has a reference to the "Fantasy" font, but you don't have that font included in your project.
@SkyCoder01 what? no it's not intentional, isn't bootstrap included automatically when you set it up in codepen settings?
doesn't CSS include it by itself? isn't my font being shown in fantasy font?
@EvanDCP Bootstrap has a couple of versions out there - they use different class names, so you have to use the version you want. You probably want version 3.3
At least v3.3 is what we learn in Free Code Camp
this bootstrap thing was the issue then! it's working now for the first time since forever, thanks a lot man @SkyCoder01
evandcp sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: evandcp already gave skycoder01 points
@jonylif Hmmm. Something's still not working. I've copied the CSS directly from the font's stylesheet via transfonter and then used that font family in my HTML stylesheet, but nothing's changed. This is the CSS: @font-face {
font-family: 'Return To Sender';
src: url('ReturnToSender.eot');
src: url('ReturnToSender.eot?#iefix') format('embedded-opentype'),
url('ReturnToSender.woff') format('woff'),
url('ReturnToSender.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
font-family: 'Return To Sender';
src: url('ReturnToSender.eot');
src: url('ReturnToSender.eot?#iefix') format('embedded-opentype'),
url('ReturnToSender.woff') format('woff'),
url('ReturnToSender.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@jonylif And then in my stylesheet: h1 {font-family: 'Return To Sender':}
The "fantasy" font isn't web safe, so it might not show up in all browsers. In my browser, firefox, I see the serif font.
@SkyCoder01 yeah I mean in CSS I've put font fantasy but it's not showing on my computer, and neither is the background gray color. I see it white. It's like nothing in CSS is working. Is this an issue from my computer, or does it happen to you too?
@rsxhoxhi do you create a folder and put the fonts archive there or just throw where the index.html are?
@rsxhoxhi It's looking for a file:
ReturnToSender.eot, like I said earlier, you need to upload those files somewhere and access them via URL or local file path if you're running everything locally. https://www.fontspring.com/support/installing_webfonts/how-do-i-use-the-webfonts
@EvanDCP I'll send a screenshot
That's what I see
You added bootstrap 3.3.7 to the top of your codepen HTML and left bootstrap 4.0 alpha in your CSS settings. Plus you have a codepen linked in your CSS settings too. If you fix that, you get a gray background
By the way, I think "Impact" is a similar font to what you want - and it's web safe, so it will work in all browsers.
man how can this be so difficult T_T
@EvanDCP It isn't that difficult :) put bootstrap in your CSS settings, not in your HTML. That's all you need to do to fix everything
Codepen's HTML panel is only for code that goes inside the <body> tags. CSS files go in the codepen CSS settings
Hello @fortMaximus :wave: :)
@SkyCoder01 I get hung up on the bit about uploading the files. Please forgive me - I'm very, very new at this and not at all familiar with a lot of the terms. (Most all of the terms.) Upload them...where? (I don't know a server from a TGIFriday's waiter, so please have patience.) It's the part about directing the code to the right file that throws me.
@rsxhoxhi You'll probably have to upload your font files to your github account and host them there, but if you're still really new at this, it isn't going to be easy (yet!)
It's probably easiest (for now) to use the fonts at: https://fonts.google.com/
Ahhhh, I see. I'll try that, but if it doesn't work, I think I'll just submit my tribute page and call it a day. Getting a little bit ambitious. I was hoping to make my London pubs page look like a chalkboard pub menu, but that might be pushing it.
evandcp sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: evandcp already gave skycoder01 points
none of the buttons are working for me though. Can someone check if the clock itself is working as expected functionality-wise?
has anyone used jquery one page scroll plugin?
@rsxhoxhi I guess you can always go back and make it look nicer later :)
it says
r.bind is not a function
@srichakradhar I haven't used it before, but if you look at their github page, they have 188 open issues and the project hasn't been updated in over 3 years :)
Good morning, I am having issues with scollspy in bootstrap. Does anyone understand how to make it work?
which one should I choose: http://www.jqueryscript.net/animation/jQuery-Plugin-For-Scroll-And-Snap-Functionality-Scroll-Snap.html
Shouldn't my rows be centered, in desktop view? Because of my col-offset? http://codepen.io/ssgriffen/pen/QdPLPx
I seem to be in the incorrect place to get help with bootstrap issues. can anyone direct me to where I should be for help?
@fvdave2017 Can you share your code? I saw you post this question yesterday but I hadn't used bootstrap scroll spy before. I just read the docs and created a navbar with scroll spy. It seems to be working, so maybe I can help now?
If it's a bug or something more advanced than just making a navbar with scroll spy, maybe you want to post here: https://github.com/twbs/bootstrap/issues
@SkyCoder01 Here is my code. The links work but the scroll part does not highlight my navbar.
@SkyCoder01 <body data-spy="scroll" data-target=".navbar" data-offset="50">
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span> </button>
<a class="navbar-brand" href="www.northernlightsconsultant.ca" target="_blank">Northern Lights Consulting</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#section1">About</a></li>
<li><a href="#section2">Portfolio</a></li>
<li><a href="#section3">Contact Me</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<!-- End of nav header -->
<main>
<header>
<div class="row" id="section1">
<!-- my personal description -->
<div id="first">
<p class="h3"> Front-End Developer and computer maintenance service. I have done Web Design and Website development. I have also had experience in virus removal, computer upgrades and computer maintenance.
</p>
<h1><sup>__</sup></></h1>
<p class="h3">Front-End Designer -- Computer Service -- Virus Removal</p><br /><br />
</div>
<div id="second">
<img src="https://northernlightsconsulting.files.wordpress.com/2016/08/everett-picb.jpg" class="img-circle" alt="Everett Davidson" width="200" height="auto" />
</div>
</div>
</header>
<section>
<div class="row" id="section2">
<!-- my portfolio area -->
<div class="text-center third">
<h2>PORTFOLIO</h2>
<h1><sup>___</sup></><sup>_</sup></h1><br />
</div>
<div class="fourth">
<img src="https://northernlightsconsultant.ca/wp-content/uploads/2017/02/TitlePage.jpg" class "img-rounded" alt="Northern Lights Consulting" width="400" height="auto" />
</div>
<div class="fourth2">
</div>
</div>
</section>
<section>
<div class="row" id="section3">
<!-- contact area -->
<div class="text-center">
<h2>Contact Me</h2>
<h1><sup>___</sup></><sup>_</sup></h1>
</div>
<div class="row" id="contactForm">
<div class="fifth">
<!--This is my form to use -->
<form class="form-horizontal text-center" id="form">
<div class="form-group">
<label>Your Name: </label>
<input type="text" Name="name" placeholder="your name" /></div>
<div class="form-group">
<label>Your Email: </label>
<input type="email" Name="email" placeholder="your email" /></div>
<div class="form-group">
<label>Your Phone: </label>
<input type="tel" Name="phone" placeholder="your phone" /></div>
<div class="form-group">
<p class="text-center p2">Leave your Message below:<br/>
<textarea name="comment" form="form" rows="5" cols="25" placeholder="Enter text here..."></textarea></p>
</div>
</form>
</div>
<div class="sixth">
<!-- my message -->
<p>If you would like to get in touch with me you can do so by using the contact area to your left. You can ask a question, leave a comment and or request your choice of communication. I will response A.S.A.P. Thank you for your questions and
comments in advance.</p>
<p>I look forward to receiving your questions and comments.</p>
</div>
</div>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span> </button>
<a class="navbar-brand" href="www.northernlightsconsultant.ca" target="_blank">Northern Lights Consulting</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#section1">About</a></li>
<li><a href="#section2">Portfolio</a></li>
<li><a href="#section3">Contact Me</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<!-- End of nav header -->
<main>
<header>
<div class="row" id="section1">
<!-- my personal description -->
<div id="first">
<p class="h3"> Front-End Developer and computer maintenance service. I have done Web Design and Website development. I have also had experience in virus removal, computer upgrades and computer maintenance.
</p>
<h1><sup>__</sup></></h1>
<p class="h3">Front-End Designer -- Computer Service -- Virus Removal</p><br /><br />
</div>
<div id="second">
<img src="https://northernlightsconsulting.files.wordpress.com/2016/08/everett-picb.jpg" class="img-circle" alt="Everett Davidson" width="200" height="auto" />
</div>
</div>
</header>
<section>
<div class="row" id="section2">
<!-- my portfolio area -->
<div class="text-center third">
<h2>PORTFOLIO</h2>
<h1><sup>___</sup></><sup>_</sup></h1><br />
</div>
<div class="fourth">
<img src="https://northernlightsconsultant.ca/wp-content/uploads/2017/02/TitlePage.jpg" class "img-rounded" alt="Northern Lights Consulting" width="400" height="auto" />
</div>
<div class="fourth2">
</div>
</div>
</section>
<section>
<div class="row" id="section3">
<!-- contact area -->
<div class="text-center">
<h2>Contact Me</h2>
<h1><sup>___</sup></><sup>_</sup></h1>
</div>
<div class="row" id="contactForm">
<div class="fifth">
<!--This is my form to use -->
<form class="form-horizontal text-center" id="form">
<div class="form-group">
<label>Your Name: </label>
<input type="text" Name="name" placeholder="your name" /></div>
<div class="form-group">
<label>Your Email: </label>
<input type="email" Name="email" placeholder="your email" /></div>
<div class="form-group">
<label>Your Phone: </label>
<input type="tel" Name="phone" placeholder="your phone" /></div>
<div class="form-group">
<p class="text-center p2">Leave your Message below:<br/>
<textarea name="comment" form="form" rows="5" cols="25" placeholder="Enter text here..."></textarea></p>
</div>
</form>
</div>
<div class="sixth">
<!-- my message -->
<p>If you would like to get in touch with me you can do so by using the contact area to your left. You can ask a question, leave a comment and or request your choice of communication. I will response A.S.A.P. Thank you for your questions and
comments in advance.</p>
<p>I look forward to receiving your questions and comments.</p>
</div>
</div>
</section>
</div>fvdave2017 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 213 | @skycoder01 |http://www.freecodecamp.com/skycoder01
can anyone please check that my clock is working correctly? http://codepen.io/EvanDCP18/full/bgZZqm/
@fvdave2017 Scroll spy also needs bootstrap css, jquery, and bootstrap js files included.
Add those to your project if you haven't - I don't see anything wrong with your HTML, you have "data-spy="scroll" in your <body> and that's the only HTML required as far as I know
If that still doesn't work, you may also need to initialize it with JavaScript @fvdave2017
$('body').scrollspy({target: '.navbar'});Hard to tell without seeing your entire project.
I am sorry @SkyCoder01 . Does this mean I have to add bootstrap to my javascript section or do I have to create a link for script in the <head> of the project?
@fvdave2017 Bootstrap has a javascript file and a css file. You need both of those. CSS files go in your <head> and JS files go at the end of your <body> right before </body>
Bootstrap's JavaScript file also needs jQuery it seems, I was getting errors in my browser console until I added it.
If this is in codepen @fvdave2017 just use the codepen settings. CSS files go in the CSS section, JS files go in the Javascript section
@angelcowgirl The example tribute page link is listed in the tribute page challenge https://www.freecodecamp.com/challenges/build-a-tribute-page
Thank you @SkyCoder01 I will follow your directions you have laid out and see what happens. Coding is very new to me in this understanding.
fvdave2017 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: fvdave2017 already gave skycoder01 points
@fvdave2017 All of this is explained here: http://getbootstrap.com/getting-started/
And all the bootstrap plugins, like scroll spy are included in bootstrap.min.js: http://getbootstrap.com/javascript/#js-individual-compiled
And all the bootstrap plugins, like scroll spy are included in bootstrap.min.js: http://getbootstrap.com/javascript/#js-individual-compiled
It just takes some reading to get familiar with it and then some failures and searching :) - good luck :+1:
Here is the one I created for comparison: http://codepen.io/skycoder/pen/KaYQoQ
how should I center a div in a <section>?
style="vertical-align: middle" is not working
Hello--I just started the Tribute Page waypoint and I'm a little apprehensive that I missed something. The map says that the two projects will take 50 hours total but they seem like simple one page documents. Maybe I'm over estimating myself but marking up two pages should take less than a day it seems like. I guess I could spend 40 hours picking the perfect color scheme etc...
srichakradhar sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1795 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
The first example is just a list (well aren't all projects): Photo, blurb, bullet point timeline, pullquote, link.
then style that.
so how is that more than a few hours?
@LinearG They throw some soft pitches to make you feel competent to start. Is my guess.
Has anyone done the Twitch Streaming project lately? I'm trying to update it, adding the client_id but its not working ofr me.
Thanks @Jacketh -that is what I'm hoping. I'm paranoid that I'm missing some critical step.
linearg sends brownie points to @jacketh :sparkles: :thumbsup: :sparkles:
:warning: @jacketh's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
@LinearG nah, you're fine. It can be done in an hour or less. The thing to remember on later projects tho, is to take your time. It isn't your certification that'll get you a job if you finish this, its your portfolio. if its ugly af, its useless.
@LinearG For the portfolio, Navbars, smooth scrolling, learning the bootstrap grid system, etc. I've easily spent 20hrs learning about that and haven't started the portfolio project yet. Just spent another hour figuring out scroll spy, so I guess it just depends on how much you want to do and how much you already know how to do.
Thank you for confirming. That is good & bad for me actually. I like problem solving, more backend stuff I guess. I don't feel that I have any design sense.
@Brigette-Eckert You don't need a client id for the Twitch API. In the instructions, they tell you to use the mirror at https://wind-bow.gomix.me/
@SkyCoder01 thanks I'll look into that. Its been a while since I first did it and it broe so I'm trying to fix it :P
brigette-eckert sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 216 | @skycoder01 |http://www.freecodecamp.com/skycoder01
can always pay a designer to make you some pdfs, and then you develop them. thats what I do 9 times out of 10
can someone help with twitch.tv
i'm trying to do it with es6
using fetch
which works for the channels
but i'm nor trying to match that to the streaming
and failing
I'm not sure what to do with
isStreaming
I want to return is the user is streaming by matching if the url is in what is returned in the
addChannel part
Hello, I want to create a grid that sits on top of a div object to preview some projects I've done.
Allow users to click on one of the quadrants which takes them to another webpage with just the project they've selected...
Any tips on where I can start?
.pageOne{
background:url(https://images.unsplash.com/photo-1473800447596-01729482b8eb?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=);
background-size:cover;
height:100%;
}
background:url(https://images.unsplash.com/photo-1473800447596-01729482b8eb?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=);
background-size:cover;
height:100%;
}
Why isnt my picture showing? :(
I'm trying to get data from the Open Weather API - how do i keep the variables from inside my success function so i can add them onto a string (which i'll use as a variable inside $.getJSON() to get the data)?
function success(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
}
function error() {
$('#output').text("Error: geolocation is not supported.");
}
navigator.geolocation.getCurrentPosition(success, error);
});
sorry
fixed it
@SkyCoder01 I'm a bit confused on how to do that - been a while since i've been on here.
@Aviendhaast
$.getJSON(url, function(data) {
var foo = data.bar;
var bar = data.foo;
someOtherFunction(foo, bar);
});
function someOtherFunction(foo, bar) {
console.log(foo);
console.log(bar);
}
or, to simplify:
$.getJSON(url, someOtherFunction);
function someOtherFunction(data) {
console.log(data.foo);
console.log(data.bar);
}aviendhaast sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 217 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@SkyCoder01 And data in someOtherFunction would be an object?
<header>
<link
href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</header>
<div class="container-fluid">
<ul class="nav nav-pills">
<li>
<a href="#">Richard Aird</a>
</li>
<li class ="pull-right">
<a href="#">About Me</a>
</li>
<li class ="pull-right">
<a href="#">Portfolio</a>
</li>
<li class ="pull-right">
<a href="#">Youtube</a>
</li>
<li class ="pull-right">
<a href="#">Contact Me</a>
</li>
</ul>
<div class="pageOne">
<h1>Richard Aird</h1></div>
</div>
How come these aren't pulling right? :(
@SkyCoder01 But i can't call variables declared in other functions like this?
function success(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
}
function error() {
$('#output').text("Error: geolocation is not supported.");
}
navigator.geolocation.getCurrentPosition(success, error);
($'#output').text(success.latitude);
});
@Aviendhaast The
($'#output').text(success.latitude) would have to be inside your success() function.
That's where you define those variables
Javascript scopes the variables to inside the function - and with a function where you have to go out and get some information from an API, you can't have global variables to my knowledge
aviendhaast sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: aviendhaast already gave skycoder01 points
@boxxylol That's a bootstrap class, where is your bootstrap.css file?
By the way <header> is not <head> they have different meanings
.nav-pills{
font-size:1.7em;
background-color:black;
}
body{
background-color:white;
font-family:Lobster;
color:white;
}
h1{
padding:0;
margin-top:0px;
}
.pageOne{
background:url(https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=);
background-size:cover;
height:800px;
}
Does that help?
:)
You might want to refresh on the bootstrap challenges: https://www.freecodecamp.com/challenges/use-responsive-design-with-bootstrap-fluid-containers
boxxylol sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 218 | @skycoder01 |http://www.freecodecamp.com/skycoder01
I will definitely check those out! :D I am following a youtube tutorial atm
@boxxylol Go back to part 1 and they show you how to add bootstrap: https://youtu.be/2klCZXwfvLs?t=1m35s
That video is a little old, so use the links from here instead of using the "Quick Add" menu: https://www.bootstrapcdn.com/
That video is a little old, so use the links from here instead of using the "Quick Add" menu: https://www.bootstrapcdn.com/
I want to have four quadrants with links to different projects I've made
Uau/
yay*
@SkyCoder01 Think I could great a grid on top of my PORTFOLIO div seen here?:
Man...how long should it even take to implement an AI that's unbeatable in Tic-Tac-Toe? I've been working on it a whole day for the past 3 days! I must be doing something wrong here, but what?
Easy mode is done - the logic for that was just making an AI that picked random, untaken spots. For hard mode, moves 1-2 and the last move (which is just to take the last spot) are done, but I am having trouble implementing the right behavior for moves 3-8 (for both sides). http://codepen.io/Freaklancer/pen/xgMbPm
The function I am working on is
makeOptimalMove() You can see the unfinished conditionals I have in that function.
I used magic squares to organize things and to identify where the best moves are, but I can't figure out an elegant routine for figuring out winning vs blocking
@pjconsidine @moT01 I think the easiest thing would be to treat the board as a matrix, so that you can shift the board around and make it easier on yourself and reduce the possibilities you need to take account of.
I have no idea how to do that though because I haven't taken any sort of discrete math course.
I'm now trying to figure out a way to have the same function work to both win for the computer and block for the human
@moT01 @pjconsidine Why 15 though? You're adding 5 for each spot correct?
@tony that's the magic square thing. the numbers 1-9 fit into a tic tac toe board in such a way that each row, column and diagonal add up to 15
for example
@itchick85 your not putting an image in there anywhere, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img theres some examples towards the bottom
I think I'm outsmarting myself. trying to be too clever
@pjconsidine Do you think the magic square method will help me at this point? Or will it just be more overhead?
@FreakishLancer I thought it was an easier way to code the part for identifying where to move next
I just wrote it to find two in a row and move in the square that adds up to 15
the same thing works for rows, columns, and diagonals.
I just can't get it to do a win and a block with the same code
hi! can someone please help me what's wrong with this code? <form action="/submit-cat-photo</form>"
<input type="text" placeholder="cat photo URL">
</form>
but I suppose the better thing would be to make it work and then make it pretty
@pjconsidine I'd been trying to do that same thing too. What I did was create a function that listed all the array combos possible for a win for each player based on each player's first move, and then find the intersection of the two arrays.
I am able to pass the test and can't figure out what am I doing wrong
you want them separate anyway, right? ...you want them to do a winning move before a blocking move
And I was quite happy that it led back to the symmetric difference challenge we had earlier, but now I am stuck.
@moT01 I was hoping to be able to do it recursively -- look for win, then look for block -- with the same block of code
probably trying to be way too fancy
I was having problems with it not knowing when to stop before, so I started looking at reworking it
it would win and then block
lol
I think what I'm going to do is just make both parts in one function and then call the function once. That way it will know when to stop
not as fancy as I like, but then I'm still working on it months after I started, so....
@pjconsidine MONTHS? Well, that's not looking good for me, hehe.
I look forward to spending a month or several on this Tic-Tac-Toe project.
@pjconsidine Hmm, well I am playing your TTT game atm @moT01 and I realized that, for the purposes of my project, I don't need to create a perfect AI, just an AI that will prevent you from winning. Actually, strike that. I do think I am pretty close though....I just need to get this logic down right...
I started a new job in the mean time, so I got sidetracked
there's one way to beat it
could probly close that up pretty quick, ...but i like it beatable
@moT01 You did it within 200 lines of code though. That's a plus...
I like the person who made an easy mode and a hard mode
I never went with the minmax algorithm either, but it's still fairly challenging to beat if you do something like:
- If there's a win, take it, else
- If there's a block, take it, else
- Take a random corner, else
- Take a random square
Yeah, a 5 year old could beat it every time! The logic is that simple! :)
Which is why I've been trying to make this hard mode!
@EvanDCP The clock doesn't seem to be working for me.
Mine is also around 200 lines of code, I should get around to making it better one of these days
@EvanDCP Nope, not working for me either
I'm at 198 lines and a good number of them are comments and other things like an email obfuscator function
evandcp sends brownie points to @freakishlancer and @tylermoeller :sparkles: :thumbsup: :sparkles:
Well, the FCC example that's up right now is about 500 lines of code, so at least I know I'm not going on too much of a tangent.
:star2: 1492 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
it's funny. I've been in agile project management for a very long time and I still can't get the hang of coding that way
Hi everyone, can you help me with my Local Weather App? I've finally got the API call working, and I'm trying to output certain values to fields in my HTML document. Two of the outputs are working, but the final one isn't.
Here's the link to my CodePen and here is the relevant bit of code:
function(json) {
$("#user-location").html(json.name);
$("#user-temperature").html(json.main.temp);
$("#user-weather").html(json.weather.description);
});The location and temperature are working, the weather description isn't.
I have a theory that it's because the
weather sub-array is formatted differently in the returned JSON. But I don't know how to get round it.
@IvesNoIdea yea i think you're on the right track, i think the weather part of the object is an array
Why can't I get my page give new results at the top? I know append puts it at the bottom, but .htm() doesn't work.
http://codepen.io/Athabasco/pen/wgRGJX
http://codepen.io/Athabasco/pen/wgRGJX
@IvesNoIdea @moT01 Hmm, I don't think it is in an array. The syntax seems to be correct, based on the sample API the documentation gives.
@moT01 Yeah, that's what I thought because it's in square brackets. But I've tried everything I can think of to access it and I'm getting nowhere fast :-(
@Athabasco That's further up in my code, I just chopped out the bit where I'm doing my outputs.
like @moT01 said
@IvesNoIdea Why don't you assign each temperature and what not to variables?
@moT01 has nailed it. Putting the
[0] in has made it work. Thanks.
ivesnoidea sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 521 | @mot01 |http://www.freecodecamp.com/mot01
@Athabasco That's the next step in my plan - I just wanted to check I could extract them from the JSON correctly first.
okay, I'm going to get back to it and see if I can't at least finish this thing
Hi community, im building my personal portofolio webpage as a challenge from the Front End. While building the page ive noticed that my page doesnt reshape once i modify the windows size and by adding the container-fluid class it actually mess the navigation bar that ive built. Is there another way to make the page auto fit the window?
hey all
the languages I have experience in text
on first part of my page
?
and also want it so that I have equal spacing around all the different languages images
@SkyCoder01 It worked, but now all the results are compiled at the bottom. Thanks
athabasco sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 219 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@Athabasco That looks great! I tried initialising all of my variables up front to give them global scope, but for some reason I couldn't get the function to over-write the values. I'm going to have another go at it. Thanks for your help.
ivesnoidea sends brownie points to @athabasco :sparkles: :thumbsup: :sparkles:
:cookie: 243 | @athabasco |http://www.freecodecamp.com/athabasco
@Athabasco You'll also have to reverse your loop it seems or good results are at the bottom:
for (var i = data[1].length - 1; i >= 0; i--) {
that gets rid of the white text
I don't want that
@apalm1341 oh... add bootstrap and use text-center only on your white box div
@EvanDCP
Math.floor(count / 60 + ":" + count % 60) You give a string to a maths method. That cannot go well :D This gives you NaN and nothing will be set in the html
@SkyCoder01 I got it to work after all! I had been overriding the @font-face with an inline style. As soon as I deleted that, all was well.
how would that look like in code?
@SkyCoder01 It still compiles everything to the bottom. I have no clue how to fix it
Like the list keeps getting longer with every search? I thought you wanted that :p
?
something like that?
@SkyCoder01 No, I wanted to only show ten results, and I don't know how to do that
@SkyCoder01 Aaand now I can't center a row of three images to save my life. It's always something, isn't it?
@Athabasco use your clear code at the start of the function:
$("#article").empty();
evandcp sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 778 | @alpox |http://www.freecodecamp.com/alpox
the weird thing is that even from the start, the Reset button is still showing, even though i've set it as hide();
haha @rsxhoxhi I think you have to put them all in a div and then use margin: auto on the div
@SkyCoder01 I'm going to quit bothering you, but that only shows one result.
Otherwise you empty the results on every loop
function erything (title, desc, link){
$("#article").empty();
for (var i = data[1].length - 1; i >= 0; i--){athabasco sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: athabasco already gave skycoder01 points
Hey guys, any idea how I can horizontally center my ul to the middle of the page?
http://codepen.io/AdamHJacks/pen/XpoMoG
http://codepen.io/AdamHJacks/pen/XpoMoG
Thanks @SkyCoder01
athabasco sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: athabasco already gave skycoder01 points
Line 23
@AdamHJ123 You may want to put the css for background and heights etc. on the
nav and not on the ul. Then you can adjust the position of the ul inside of the nav
@alpox thanks. But it's still not working, like nothing at all so it's gotta be some big bad mistake somewhere? maybe my codepen doesn't recognize jquery? :S
evandcp sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: evandcp already gave alpox points
im working on the quote generator machine
and im a bit stuck, my post request isnt working and everything lookd right to me
im building it with react
the function fires off on click
but there is an issue with my post request I think
@ArashDai 1.
Uncaught ReferenceError: POST is not defined --> POST --> "POST" (Has to be a string)
Means
this is not defined where you use it
@ArashDai Its in the dev console of the browser. The codepen console shows only your
console.log things but not the actual browser errors
im not used to using codepen
@ArashDai To come around the 2. issue use:
this.newQuote.bind(this) instead of this.newQuote in the render method
React sadly doesn't autobind the methods to the right context
this*
ahh god damn it
Any ideas for getting a row of three equally-sized images to center? I'd like all three of them lined up, nice and neat, with that row centered on the page. I have done harder things than this today, and I cannot figure out why this isn't working for me. I tried putting them all in a <div class="center"> with .center {margin:auto;}, but no dice.
At the moment, the images are all side-by-side, but left-aligned, for some reason, despite my best efforts.
@alpox Right now there is a teeny bit of space in between, which is nice. I want to keep it just as it is, just center it. Scootch it over a little. It's driving me insane.
@alpox Sure. Please forgive my messy code. New at this, and not very neat about it, I'm afraid.
@rsxhoxhi I think easiest would be to put on the surrounding row:
display: flex;
justify-content: center;
Should do it
@alpox Not sure I'm even sharing my CodePen right. Did I mention I'm new at this?
@rsxhoxhi You did :-) and its no problem - most people here are totally new to this :-)
guys can't anyone help me out here? what's wrong with my code? http://codepen.io/EvanDCP18/full/bgZZqm/
@rsxhoxhi
rsxhoxhi sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 779 | @alpox |http://www.freecodecamp.com/alpox
@EvanDCP Well first: what exactly is wrong about the behaviour? So i wouldn't have to read all usecases through
@rsxhoxhi Btw: nice pub! :-)
excuse me but that sounds to me like being so drunk that one has to crawl from pub to pub :D
nothing works so it's all wrong :(
@EvanDCP I mean what behaviour does not work but you want it to work :D
@EvanDCP I wouldn't say that. You put 5 min - there is a countdown with 5 min... whats wrong? :D
Ehh. yes :D
evandcp sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: evandcp already gave alpox points
@EvanDCP the thing that is not working is that I can't modify the break time
@EvanDCP Thats because you have another id than you accessed.
Use
Use
$("#breakNum") instead of $("#breakTime")
Since you put
id="breakNum" in the html for the element referring to the right number
evandcp sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: evandcp already gave alpox points
anyone know why the second click makes the div's disappear?
evandcp sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @achudoz |http://www.freecodecamp.com/achudoz
can anyone help me with a minor problem in the quote generator challenge. I made one that works, but there is an issue with the tweet button that some characters can't be used as part of a URL, so when the generated quote is to be tweeted, it is sliced at the position of that character. I could just cut those characters out, but that seems dishonest of me, since you know it is a quote. Is there some way around it?
can anyone please look over my portfolio page and give feedback. Thanks codepen.io/abdihakim/pen/dNqVod?editors=1000
the logo on the front isnt centered for me
here is the codepen btw. Sorry for the simple CSS, i was focusing on functionality first
http://codepen.io/achudoz/pen/egoKYy
http://codepen.io/achudoz/pen/egoKYy
bitcoinabdi sends brownie points to @pfreema1 :sparkles: :thumbsup: :sparkles:
:cookie: 2 | @pfreema1 |http://www.freecodecamp.com/pfreema1
I just can't seem to wrap my head around my Tic-Tac-Toe project. I guess I have to leave it for now.............................
@bitcoinabdi To center the profile change the
margin-left: 600px; to margin-left: auto; in the .block selector.
@bitcoinabdi then adjust margins-/padding to move the logo. Or use text-align, bootstrap, flexbox whatever. also use less of px units and use more %, vw/vh etc
@FreakishLancer Any concrete problem with it which gave you a hard time?
@alpox I am having trouble getting the logic the AI to work in hard mode without resorting to mapping out all of the 81+ scenarios manually.
The function I am working on is
makeOptimalMove().
I doubt anyone can help me though...my code is now over 350 lines long.
I want to start over, but I know that will take me 2 days. So...I'm just going to read some programming books hoping something sparks in my mind because it's ridiculous that I've been sitting in front of the computer staring and going nowhere.
Oh the joys of being a college dropout and having no peers to help you.
@FreakishLancer Ah sry, i didn't make an advanced AI yet :D but i heard there are special algorithms for that
@alpox @achudoz thank you very much guyz i really appreciate your help
bitcoinabdi sends brownie points to @alpox and @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @achudoz |http://www.freecodecamp.com/achudoz
:cookie: 780 | @alpox |http://www.freecodecamp.com/alpox
The community here are amazing
@alpox yeah it does most of the time, but it works by opening the twitter URL + the quote string. However URLs don't accept certain characters, such as semicolon ; or apostrophe ', so some of the quotes get sliced before they end.
Well, I'm going to go hop on the FCC forums. Seems like there is already a wealth of threads of people having similar problems, so hopefully I can find a way to understand my problem there!
@FreakishLancer If you did the advanced fcc algorithms, no repeat please, it should not be hard to grasp
Alright guys, I have what I believe should be a pretty simple problem
Trying to push/pull a combination of cols, but it's not behaving properly
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<img src="" class="skill-pic" alt="Graphical Representation of skillset">
</div>
<div class="col-sm-6 col-sm-pull-6">
<h3>Front-End Design</h3>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
<div class="col-sm-6 col-sm-push-6">
<img src="" class="skill-pic" alt="Graphical Representation of skillset">
</div>
<div class="col-sm-6 col-sm-pull-6">
<h3>Front-End Design</h3>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas