usually do more than that, but it will slow down when they get harder, so just an average
ok I am about to begin Basic algorithm section
Some are real easy, others are real hard... had to take a break on a couple of them so far
four more basic ones to go
I want to do this in order, i take it you are not?
No, I'm skipping around
ok nice, in life im not lucky getting ahead of myself, i have to go step by step
I might look ahead, don't get me worng
im not a nun
:)
Trying to create a link to another web page, not working this is what i have <p class="link"><strong>To learn more about Louie Zamperini click</strong><a href="http://www.louiszamperini.net/ target="_blank> here</a></p>
check your ending quotes
aha thank you
And don't forget mobile users can't click ;)
is anyone doing the beta fcc?
beta fcc?
fcc always reminds me of something else lol
I didn't know about that though, thanks @jtan3 I'll check it out
:cookie: 306 | @jtan3 |http://www.freecodecamp.com/jtan3
skycoder01 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
hey
Beta fcc looks great!
is flexbox worth learning or is bootstrap better?
Oh man...I'ved pushed myself into a corner. Can anyone help me find out why my Tic-Tac-Toe game is making the computer (when it is X) make two moves at the beginning of a new game if you win the previous one? http://codepen.io/Freaklancer/pen/xgMbPm
Ok i am trying to decrease amount of space between <p> and a link element at the bottom of my web page. I have tried using margin-top, has not worked for some reason...
@runnerbill75 try margin-bottom?
hy
@runnerbill75 put your <p> and link element in a separate <div class="row"></div> and reduce the bottom margin on your .col-xs-4
ok thank you @SkyCoder01
:cookie: 200 | @skycoder01 |http://www.freecodecamp.com/skycoder01
runnerbill75 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Okay, I fixed my code, but it still looks messy. Oh well. :shrug:
Hey people I need help. I'm a rookie and trying to create my own webside. But I can't figure out why my pages are overlapping. If you look down at the page to the Concept page it gets overlapped by a new page. The page overlapping is the "Offering" page which should be a whole new site. What is going wrong? https://codepen.io/VilfredSikker/pen/pRYjgm
so I have started on the Tribute Page and I have a question about the rules dos it have to be only in html or can I mix other languages in it like css? (don`t know if this is the right place to ask and sorry for the way written it is not my 1st language )
You should use css too :)
But only html and css
@VilfredSikker thx:)
:cookie: 249 | @vilfredsikker |http://www.freecodecamp.com/vilfredsikker
lifelernner sends brownie points to @vilfredsikker :sparkles: :thumbsup: :sparkles:
I've centered my image inside my div now how do I center text within that image?
@Renniesb width and margin auto, or text-align center
Thank you @jonylif but it is a little more complicated than that I think. Here is an image that shows what I am talking about
renniesb sends brownie points to @jonylif :sparkles: :thumbsup: :sparkles:
:cookie: 72 | @jonylif |http://www.freecodecamp.com/jonylif
First there is a big image than a smaller image and than within it smaller images and text
The white image must be centered withen the larger image and the other content centered within the white image and it must all be responsive
white image must adjust its size with screen dimensions
try with flexbox
do you now how?
No
all the item that i see there, the logo, the text and the button, all that is inside a div?
I am not using flexbox it is using translate
Yes they are all inside a div
Hello, I am wondering if someone can take look at my pen and help me figure out how to align text and link at bottom of page with paragraph above it. https://codepen.io/runnerbill75/full/WRYzoQ/
@Renniesb you are using bootstrap, there might be something of that, i dont use bootstrap
@runnerbill75 have you tried text-center
It is better to learn pure html and css when you learn to program for the first time
i mean the class: " text-center"
I have not, i will try that out
i don't remembre if is class or style
I could do it the pure way
@IamWorld i tried, it doesnt work, niether margin auto
if that helps
and remember its with equial sign
=
equal
Either way I just want to get it done. I will do it either or
just looking for best solution
and I am using both
img-responsive class is useful
so are columns
and containers
and rows
ill search how i did it
@runnerbill75 @jonylif here is how i did it
<h1 class="text-primary text-center" id=Head>Rugby</h1>
no thats de old, sorry
here's the css file
.titletext {
display: flex;
justify-content: center;
align-content: center;
margin: 190px 0;
}
h2 {
position: absolute;
margin-top: 150px;
}
Ok, that works. I also just read an article about flexbox
and centering
ok thank you for your help @IamWorld
runnerbill75 sends brownie points to @iamworld :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @iamworld |http://www.freecodecamp.com/iamworld
I will use media queries to have the text adjust
size
great @Renniesb
@jonylif Thanks
:warning: renniesb already gave jonylif points
renniesb sends brownie points to @jonylif :sparkles: :thumbsup: :sparkles:
NO proble glad it worked
hi everyone. i want to build a simple ‘to do list’ web app. i don’t know much about databases though, can anyone recommend one to look into for something like this?
I can't get my to be responsive. What am I doing wrong? Help! http://codepen.io/D-Pens/pen/vgVgYP
@Darlene1 you need to use media queries to make it responsive or percentages instead of pixels for your elements sizes
@Darlene1 try using https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css for the bootstrap
@ohtanya check this out for your todo list app http://todomvc.com/, mongo db is an easy to get started with db
thanks @VeronicaM !
ohtanya sends brownie points to @veronicam :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @veronicam |http://www.freecodecamp.com/veronicam
you're welcome @ohtanya
thanks @taltmann42
jackedwardlyons sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 519 | @taltmann42 |http://www.freecodecamp.com/taltmann42
ill give it a try now :)
http://codepen.io/JackEdwardLyons/full/JEzjMJ/ getting there, its a bit buggy...
Thanks @VeronicaM and @jtan3, I'll try it!
darlene1 sends brownie points to @veronicam and @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @veronicam |http://www.freecodecamp.com/veronicam
:cookie: 307 | @jtan3 |http://www.freecodecamp.com/jtan3
guys. halp?
@JackEdwardLyons looks really good!
anyone can help with the twitchTV api challenge?
i can try
try clicking ALL multiple times.
ok?
online and offline is changing everytime
hey guys im trying to get the Gif in my codepen to be centered on the page but im struggling to do it, can someone help? http://codepen.io/DrSquidy/pen/ggEreR
use margin-left?
or try using text-center on the container div instead.
@sirus3020 sorry. I'm not sure why that's happening.
@sirus3020 http://codepen.io/jtan3/pen/GqPgOp I got my all button to work but not the others
That worked Albert! the text-center in the container div. thank you
@jtan3 $('#offline').click(function(){
if(mode == 'OFFLINE'){
$('#streamers')
if(mode == 'OFFLINE'){
$('#streamers')
nvm
@sirus3020 it only gets one of the offline accounts not all of them
@sirus3020 if you use
$('#all').click(function(all){
$('#statusList').toggle();
it stays in place
@sirus3020 i don't think you should use .appendTo
@sirus3020 https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_appendto it keeps adding each time i click the button
I have $('#all').click(function(){
$('#list').html('')
$('#statusList').html('')
$('#list').html('')
$('#statusList').html('')
so that it empties every time
oh
@sirus3020 maybe try it with out that?
$('#all').click(function(){
$('#list').html('')
$('#statusList').html('') ?
maybe when it empties it each time it changes the order too?
can someone tell me why my <UL> is not displaying in my nav bar? I have made nav bars before and for some reason cant get this one to get inline.http://codepen.io/eswhy/pen/KaEzZB
@eswhy try using https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css as the bootstrap
can you guys tell me how this looks so far for my first time, its the build a tribute page http://codepen.io/despiseddemon/pen/mRoPEE
how can i remove inline white space around my whole image
what do you mean by inline white space
inline might not be the right word for it , but around the image there is white space on both the left and right
try using a <div><img></div>
http://codepen.io/despiseddemon/pen/mRoPEE what you guys think so far
set an id for the div then change background color of div
@despiseddemon looking great. try formatting it to make it readable.
its not readable?
well, no one wants to read a giant wall of text. heheh
@sirus3020 ,that worked for the most part but now there is a full width white bar across the top of the image
try margin-top: 0px for the alpha
still there
i think ids' are case sensitive
maybe, still didnt remove it though
@codingcorey if you want the entire page to have a background wrap all your html in a <body></body> tag
@codingcorey and add a background color
yeah , there we go , thanks you both for the help
hello can anyone help me .i am doing simon's game .i make a "addClass" to some div but it dose not work , i can not find why it dose not work ...i need some guys helphttp://codepen.io/MacGuffin1990/pen/PWLPLL?editors=0110
hey guys having a problem fixing my image as a thumbnail..it cant fit correctly inside the jumbotron div. Help me out anyone
Any experts on typo3 available?
can you show where in your code @MacGuffin1990
@MacGuffin1990 There is no
addClass in the code
also line 51
$(lte).html("opc"); should be $("#"+lte).html("opc");
@JackEdwardLyons @oppiniated i have changed my code
@oppiniated @JackEdwardLyons thanks
macguffin1990 sends brownie points to @oppiniated and @jackedwardlyons :sparkles: :thumbsup: :sparkles:
:cookie: 575 | @oppiniated |http://www.freecodecamp.com/oppiniated
:cookie: 346 | @jackedwardlyons |http://www.freecodecamp.com/jackedwardlyons
guys how can i insert a thumbnail image on bootstrap
@Rizamoyi maybe this help you http://getbootstrap.com/css/#images
i totally re did my spotify search app using bootstrap material design, what do you guys think?
@JackEdwardLyons looks nice, the only problem is that block building because of the image sizes
I guess its because they have different sizes
looks like this on my screen
yeah, i need some sort of masonry layout, you think? @kirbyedy
heyo! I need some help giving my tribute page a background. currently it just jumps above the bootstrap and stays there
yes, masonry should fix that
@boredgamerz I dont think thats the right place where you should put it
ok?
hello to everyone :smile:
How can i use glyphicons on codepen?
@kirbyedy , kinda fixed it kinda not
@boredgamerz well the placing is better, but I am not sure why do you want it there, I mean its not going to be visible anyways
the text will cover it
and the box
@kirbyedy thx
sonjasch sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1786 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
hmm, mby I can try to make the box transparent, change the color of the text etc and make it fit the whole page :thought_balloon:
hi.. how can i make my unordered list in a box
https://codepen.io/abhijithsomaraj/pen/oBVYGX
https://codepen.io/abhijithsomaraj/pen/oBVYGX
@mrpuer thanks it really helped.
rizamoyi sends brownie points to @mrpuer :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @mrpuer |http://www.freecodecamp.com/mrpuer
@kirbyedy figured it out :D I think I should just have some kind of border to separate it from everything
:thumbsup:
@abhijithsomaraj
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
ohhh...i forgot about that..
thanks @kirbyedy
abhijithsomaraj sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1787 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
can i add a box around just that list
how do i center the list instead of only the text? http://codepen.io/blackioo/pen/KaGqxy?editors=1000#0
@Blackioo do you want it to appear like this?
No, I want the list to be inline but centered :D
@Blackioo you can do this in your CSS:
ul {
margin: auto;
text-align: left;
width: 60%;
}then change the width to what you want
is anyone having trouble adding gliphicon's to their pages????
thanks :D @APRim05
blackioo sends brownie points to @aprim05 :sparkles: :thumbsup: :sparkles:
:cookie: 545 | @aprim05 |http://www.freecodecamp.com/aprim05
this centers the list, moves the text to the left, then because the list takes full width you wont notice a difference unless you change the width to something else instead of 100% @Blackioo
np
@iriquoi what's the problem?
@iriquoi did you include bootstrap in your file?
yes I did but I added it to the html setting because for some reason bootstrap 4 some times doesnt work
hey, I'm working on the the quote generator project right now, and I'm running into an issue. I'm using the api from forismatic.com which seems to work fine when running it in Atom but I get an "'Access-Control-Allow-Origin' header is present on the requested resource." error when running it on chrome or firefox. What is this error?
the problem is that when I call the gliphicon-search for example I just get an empty box
@iriquoi show your code
one sec
<div class="container-fluid bg-2 text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a class="btn btn-default btn-lg" href="#"><span class="gliphicon glyphicon-globe"></span></a>
</div>
every thing works, just no ghiphicon?
gliphicon*
you spelled the first gliphicon class wrong
it should be
glyphicon @iriquoi
lol Thanks @APRim05
iriquoi sends brownie points to @aprim05 :sparkles: :thumbsup: :sparkles:
:cookie: 546 | @aprim05 |http://www.freecodecamp.com/aprim05
np :D
my bad its 2am :sleepy:
anyone good at wordpress, i want to ask something??/
Why isn't my isWin() function working? Why doesn't it display anything when you select all of the first row? http://codepen.io/jimpix/pen/vgVrRa
@playingwithinfinity you are not changing board[] values on the tick function
I am
@AdelMahjoub
@playingwithinfinity add this to the tick function and it will work
var index = $(this).attr('id')
board[index] = currentTurn
@playingwithinfinity you are changing the innerHTML values, but you are testing board values
Oh, I get it.
Hello fellow campers.How do i put a small line between quoted text and the person who spoke? <blockquote><p>"Margaret Thatcher was the iron lady.",/p>,footer><cite>A Soviet journalist</cite></footer></blockquote>
can anyone help me to set a picture as background to my portfolio in codepen?
i try'd everything i found online... nothing worked.
thanks for your time
i try'd everything i found online... nothing worked.
thanks for your time
@Tiboski add to CSS
'''
body {
background-color: #CCFFCC;
background: url(http://site.com/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
'''
'''
body {
background-color: #CCFFCC;
background: url(http://site.com/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
'''
:bulb: to format code use backticks! ``` more info
body {
background-color: #CCFFCC;
background: url(http://site.com/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
ok ill try it right away thank u
@mrpuer its not working
Invalid CSS after "#CCFFCC": expected expression (e.g. 1px, bold), was ";"
show your CSS code please
body {
background-color: #CCFFCC;
background: url(http://more-sky.com/data/out/8/IMG_246013.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
background-color: #CCFFCC;
background: url(http://more-sky.com/data/out/8/IMG_246013.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
i started fresh so
you get this error in codepen?
yes
in Pen Settings check CSS Preprocessor
select None
@mrpuer done it, but aint working
@Tiboski try setting heigth: 1000px;
if remove background-color: #CCFFCC; line?
both did not work
Invalid CSS after...?
nope that is gone now
your link is wrong
or not
strange
this is my link
this link redirect me to *html page
yeah that is what I meant
I used another random picture from google and it worked
ok ill try that
@Millen812 @mrpuer u guys are great! thank u it worked
tiboski sends brownie points to @millen812 and @mrpuer :sparkles: :thumbsup: :sparkles:
:cookie: 220 | @millen812 |http://www.freecodecamp.com/millen812
:cookie: 266 | @mrpuer |http://www.freecodecamp.com/mrpuer
np mate
Hi guys! So here is my problem, I finished (more or less) my random Quote generator, but I don’t want the button tweet to work if the person hasn’t pressed « New quote » first. So in the JS, I added an if statement that you can see, but it doesn’t seem to work. Any help/comments appreciated :smile: http://codepen.io/0livier1O1/full/WRmNPN/
ok, I'm so stuck..on the local weather project
I'm just having a brain meltdown. I've found the API and signed up. got my API key... No idea how to begin to call the API, let alone display it's output
@0livier1O1 I do not see any if statement
@Krimsonmedic use getJSON to get the response from the API
@fortMaximus so....
$.getJSON("/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});
$(".message").html(JSON.stringify(json));
});
would I just replace the /cats with the openweather api
yup
$.getJSON("/json/api.openweathermap.org/data/2.5/weather?lat=35&lon=139.json", function(json) {
$(".message").html(JSON.stringify(json));
});
$(".message").html(JSON.stringify(json));
});
like that?
without the
/json part
I think
$.getJSON("/api.openweathermap.org/data/2.5/weather?lat=35&lon=139.json", function(json) {
$(".message").html(JSON.stringify(json));
});
$(".message").html(JSON.stringify(json));
});
and the 1st
/
remove
ok
but I think there's a problem with openweather API on codepen
so...it wont work regardless?
you can try, but if it didn't, here's the one I used: https://www.apixu.com/
ty @fortMaximus
:cookie: 399 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
krimsonmedic sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
@mrpuer are u still there mate?
@Millen812 or u mate?
@Krimsonmedic Are you using codepen? Can you share it so we can troubleshoot faster
I am, but I didn't have anything written outside of my HTML layout
@Krimsonmedic that api call is definitely wrong
@Tiboski I am, whats up?
@Millen812 found it out myself, thanks for the reply tho
tiboski sends brownie points to @millen812 :sparkles: :thumbsup: :sparkles:
:cookie: 221 | @millen812 |http://www.freecodecamp.com/millen812
@Tiboski no problem, if you need any help just whisper me in privat
will do
@Krimsonmedic oh, yea without the
.json too
hi there, would someone help me with a newbie question?
i'm finishing my first project and i can't find how to make the header to be responsive while being centered-aligned
https://codepen.io/rdrgde/pen/ggqPVg?editors=1100
i'm finishing my first project and i can't find how to make the header to be responsive while being centered-aligned
https://codepen.io/rdrgde/pen/ggqPVg?editors=1100
I haven't pinpointed the exact reason for your problem for sure, but anything past h6 just defaults to normal font
@EastML sorry, i'm not following
Headers only go from h1 to h6
@rodrigode you used <h7> <h8> and <h10> that does not exist
you have to use h1 to h6 as @EastML said
oh lord! of course, sry about that, guys
i edited it and tried to change it to look like reponsevely following the window resizing... it still doesn't...
https://codepen.io/rdrgde/pen/ggqPVg?editors=1100
i edited it and tried to change it to look like reponsevely following the window resizing... it still doesn't...
https://codepen.io/rdrgde/pen/ggqPVg?editors=1100
(sry if it sounds stupid, it's the only thing to finish this project and it seems that i'm not typing correctly for what i should be looking for on google...)
can any one help my get the image and the caption with it to the center. https://codepen.io/flosolver/pen/jyJBKB/
@Flosolver You can try this
.container {
text-align: center;
}
thanx @oppiniated
flosolver sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 577 | @oppiniated |http://www.freecodecamp.com/oppiniated
@oppiniated can you help getting bootstrap "well" in the caption . what i'm doing wrong <div class="caption well">Dennis M. Ritchie, developer of C programming language and Co-developer of UNIX OS.</div>
any suggestion or opinions?
@DavidRadivojevic yea, center the caption under the picture
not responsive ?
this is ugly
put a dash after the year, separate it from the text
aaaaah ovo sam uradio za pola sata
nisam ni primetio da nisam razdvojio godine
google translate: I did this for half an hour
I did not even notice that I have not separated the :smile:
I did not even notice that I have not separated the :smile:
haha
how'd you know which language we were speaking?
google auto detect language @DavidRadivojevic
google detected it automatically it is bosnian right
serbian
close
oh I see
Hi guys, what do you think about my Wikipedia Viewer?
http://codepen.io/saylos/full/ygEYZd/
http://codepen.io/saylos/full/ygEYZd/
@saylos - your wikipedia page looks really nice! One thing that I would like it to do is trigger the search when you hit the "Enter" key - a minor thing, but you get used to having that happen. Overall, though, nice design, the background is cool!
@khaduch really thanks! I tryied to do that, but it works only if I leave the "Go!" button, if I cancel it the Enter doesn't work.
saylos sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2482 | @khaduch |http://www.freecodecamp.com/khaduch
how should I do?
Hello Everyone! Next piece of code doesn't work in my google chrome browser, but it works in firefox browser.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latNum = Math.round(position.coords.latitude), lonNum = Math.round(position.coords.longitude);
$("#weather-box").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
navigator.geolocation.getCurrentPosition(function(position) {
var latNum = Math.round(position.coords.latitude), lonNum = Math.round(position.coords.longitude);
$("#weather-box").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
Can someone give me an advice how to fix this
@zhann1982 try checking location setting in chrome
how can i align the last 2 lists as that of the 1st one
https://codepen.io/abhijithsomaraj/pen/oBVYGX
https://codepen.io/abhijithsomaraj/pen/oBVYGX
https://codepen.io/atharvajava/pen/YNRBBa?editors=0010 can anyone help me on with my js throwing error ??
@abhijithsomaraj you forgot to close UL tag for the first one
<p>With Motherjane
<ul>
<li>Insane Biography - 2003</li>
<li>Maktub - 2008</li>
</ul>
<ul>
<li>Insane Biography - 2003</li>
<li>Maktub - 2008</li>
</ul>
@atharvajava can u help me getting bootstrap responsive with that header, pls?
https://codepen.io/rdrgde/pen/ggqPVg?editors=1100
https://codepen.io/rdrgde/pen/ggqPVg?editors=1100
@fortMaximus I've changed to "Allow to get geolocation always"
did it work?
@zhann1982
@rodrigode responsive header as in you mean you want the header to shrink as you go down on screen
@atharvajava yes(:
@rodrigode try to use grid for it read about grid on bootstrap documentation it will help you for future as well in manyways
@atharvajava ohh.. yess... thanks man :smile:
abhijithsomaraj sends brownie points to @atharvajava :sparkles: :thumbsup: :sparkles:
:cookie: 300 | @atharvajava |http://www.freecodecamp.com/atharvajava
can someone help me with fetching api in an angular app?
@rodrigode i can do it for you but you wont learn it if i will type the stuff XO
@fortMaximus No . I also tryed "by request". it doesn't work either
@abhijithsomaraj np
var global_box_shadow = '"box-shadow", ".25px .25px 10.75px .6px black"';
$(".box1").css(global_box_shadow);
in javascript that should work right?
when i print global_box_shadow it prints the string
but passing the string into the function doesn't work for some reason
$(".box1").css(global_box_shadow);
in javascript that should work right?
when i print global_box_shadow it prints the string
but passing the string into the function doesn't work for some reason
hi
im using the single quote then double quote syntax to include the quotation marks in the string
JUst wondering
Is this cheatinghttp://codepen.io/ZenZate/pen/ggEeWz
i'm having trouble using Angular to pull the API data from openweathermap and using it in the same way as the JSON data that i just copied into a local variable http://codepen.io/alant90/pen/egPpLj
how to fetch the data in the correct way?
https://codepen.io/sergandrleal/full/OWqjNK hey there guys, what do you think about my Tribute Page?
@zhann1982 can you show your codepen?
@saylos - I think that what you want to do is set up the input element to handle
keyup events, and recognize that a character that is entered is a newline or "enter" key. Then you have to refactor your code a little so that the function that actually performs the search (the callback from your button click) can be called from the keyup handler or the button click - just make it a named function and call it from within either of the two possible entry points?
@atharvajava no worries, thanks(:
rodrigode sends brownie points to @atharvajava :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @atharvajava |http://www.freecodecamp.com/atharvajava
@khaduch ok I'll try, thanks!
saylos sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2483 | @khaduch |http://www.freecodecamp.com/khaduch
@saylos - well, I don't know if I just missed something when I tried it before, but it seems to be working fine now. I think that it is because you have the search input implemented in a form element, and hitting the enter key triggers it? I'm trying this in FireFox - I don't know if that makes a difference or not?
@saylos - there is one thing that I did just notice as I was trying it again - if I type some nonsense string in the search box, it doesn't give any indication that no results were found, or if you already had a search result on the screen, then it doesn't clear that? Other than that - it seems to be working fine for me with the enter key and all...
@sergandrleal - it looks good - "Essential" is spelled incorrectly. I think that it might be a little better to put the "Biography" section above the "Filmography" section? But it looks pretty good, nice project!
Thank you @khaduch :) Will fix that right away!
sergandrleal sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2484 | @khaduch |http://www.freecodecamp.com/khaduch
@fortMaximus http://codepen.io/zhann1982/pen/XpGgXJ
@fortMaximus it has only one button :)
when you load the page the request for geolocation should appear, but it doesn't. @fortMaximus
in the problem "Factorialize a Number" https://www.freecodecamp.com/challenges/factorialize-a-number
Do the the want us to give the long hand or verbose way of factoring out a given number? Becuase I am entering the shorthand return num!; and I am getting only one task to pass
Do the the want us to give the long hand or verbose way of factoring out a given number? Becuase I am entering the shorthand return num!; and I am getting only one task to pass
@fortMaximus Hey !!! it works in this chat ))))))
lol. How?
@khaduch ok i'll fix it
@fortMaximus I think it's a bug in codepen. I tryed the code via sublime. Now it works in google chrome
@fortMaximus thank you for your respond
zhann1982 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 402 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
anyone want to help me with a height transition?
@zhann1982 that's because gitter is https, probably that's why it's working. When you open your pen with https it should pop up to
Does anyone know how to connect to mongodb using webpack-dev-server?
@GoingAllTheWayUp that's not valid javascript, freecodecamp even shows you that there is an error
@Samwise12 the same way you'd do it in express/nodejs
@taltmann42 I relize this now. I misunderstood the directions, I though they were showing me something new with this n!, instead they are just telling me that in mathmatics n! mean to do a factoral
My brain wants to do a for loop and increment upwards ++
from 1.
then it's 1+2+3+4+5 not 1*2*3*4*5 for example
but all examples want to deincrement -- from (num - 1)
that's just when you're going for a recursive solution
I just saying increment the multiplyer by one increasing it.
Arnt I supposed to make a recursive solution for this problems tasks?
try it with your way of thinking and see if it works or not, i don't know how you imagine your code
you can solve it however you like
what does this mean to you:
for (var i = num - 1; i >= 1; i--) {
num *= i;
}
for (var i = num - 1; i >= 1; i--) {
num *= i;
}
I am confused over the var i = num - 1; portion
im question is that gets set one time or does it always refer back to num and subtract 1 with every loop?
if
num is five.. it does num*=4, so 5*=4 (20), then num*3, 20*3 (60), then 60*2 (120)
is this setting "i" once or is this formula i = num -1 played out every loop?
i have never come accross setting the for loop variable to anything but a number value
well it is a numeric value
the first part get's executed once, before the loop starts
ok
the last one after each iteration if the second part evauluates to true
```
function factorialize(num) {
var factoredAnswer;
if ( num === 1 || num <= 0) {
return 1;
} else {
for ( var i = 1; i <= num; i++ ) {
factoredAnswer *= i;
}
return factoredAnswer;
}
}
factorialize(5);
returns null
because
factoredAnswer is not defined, you declare it but it has no value, and what would you say is undefined * 1?
OK, if i do that I get 0
I am just Multiplying everything by 0 lol
what did you change?
var factoredAnswer = 0;
well yep.. 0*1 is 0, 0*2 also, and so on
Thats why we have to count backwards from the given value! other wise you multiply by 0.
no
you can simply initialize it with 1?
both ways are possible
@taltmann42 thank you, I have got to learn everything the wrong way to beable to do things the correct way. its weird but thats my life
goingallthewayup sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 520 | @taltmann42 |http://www.freecodecamp.com/taltmann42
I would have never thought to set the value to 1.
hi there..
you'll get there
is there anybody know how to center my images inside my <div ="row">
how do you center images inside your <div="row">????
try setting
text-align to center
ohh thanks..
@taltmann42 wanna see if you can find a fix to my issue?
@moT01 what is your issue?
its a height transition
@taltmann42 how will I do it?
the height is based on the content, and it won't transition, it just jumps
<div class="row text-align: center">
Hello -- how do I group the image and the first div with the TEST image together so that when I scroll down, the image disappears?
@bebesel no, it's not a class, it's CSS for the row
why does this not work in codepen? it works locally....https://codepen.io/jesserwright/pen/egXMwd
ohh haha thanks..
@taltmann42 must be because there is no defined height or something
@moT01 yep that's an issue with CSS. when height is auto, it's not affected by transitions correctly. You can do this to bypass it:
- remove height:0 from transition
- don't use transition for height, but only opacity and padding
- use
slideToggle()on the element, jQuery calculates the height of the element and animates it correctly
@jesserwright
The page at 'https://codepen.io/jesserwright/pen/egXMwd' was loaded over HTTPS, but requested an insecure script 'http://labs.bible.org/api/?passage=random&type=json&callback=myfunction&callback=myfunction&_=1487178445924'. This request has been blocked; the content must be served over HTTPS.
@jesserwright using codepen with http works too http://codepen.io/jesserwright/pen/egXMwd
HEy
can somebody help me with twitch json api?
@taltmann42 i will try it, and let you know how it turns out
@taltmann42 thanks
mot01 sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 521 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Lol I got it <_<
hey all, I'm working on a wireframe for a new portfolio site, and am not sure what's going on. I'm using the same CSS to style section one and two, just changed the targets. Section one has it right (in blue) and section two has this odd blank space that I can't seem to get rid of.... help? image reference and here is the code:
Html:
<div class="container-fluid" id="secOne">
<div class="outer">
<div class="inner">
<h1 class="text-center" id="seconeTitle">Developing Tools for Others</h1>
<div class="row">
<div class="col-md-4 text-center">
<h1>GitHub <span class="fa fa-github"></span></h1>
<div id="gitHub"></div>
</div>
<div class="col-md-4 text-center">
<h1>CodePen <span class="fa fa-codepen"></span></h1>
<div id="cpio"></div>
</div>
<div class="col-md-4 text-center">
<h1>Professional Projects <span class="fa fa-code"></span></h1>
<div id="profProj"></div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h1>Languages and Frameworks of Note <span class="fa fa-cogs"></span></h1>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="secTwo">
<div class="outer">
<div class="inner">
<h1 class="text-center" id="sectwoTitle">Studying for the Future</h1>
<div class="row">
<div class="col-md-4 text-center">
<h1>Western Governors University</h1>
</div>
<div class="col-md-4 text-center">
<h1>Udemy</h1>
</div>
<div class="col-md-4 text-center">
<h1>Free Code Camp<span class="fa fa-free-code-camp"></span></h1>
</div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
</div>
</div>and the CSS:
#secOne {
padding: 0;
margin: 0;
border-top: 10px solid black; }
#secOne h1#seconeTitle {
padding-top: 0;
margin-top: 0; }
#secOne .outer {
padding: 0;
margin: 0;
background: url("http://wallpaper.pickywallpapers.com/1440x900/blue-trianglish-pattern.jpg"); }
#secOne .inner {
padding: 0;
margin: 0;
background: rgba(109, 141, 169, 0.8); }
#secTwo {
padding: 0;
margin: 0;
border-top: 10px solid black; }
#secTwo h1#seconeTitle {
padding-top: 0;
margin-top: 0; }
#secTwo .outer {
padding: 0;
margin: 0;
background: url("http://www.photos-public-domain.com/wp-content/uploads/2012/06/yellow-fabric-with-floral-pattern-texture.jpg"); }
#secTwo .inner {
padding: 0;
margin: 0;
background: rgba(208, 214, 181, 0.8); }
@cjrutherford do you have a codepen-link? would be easer to debug
Any tips on sizing images in css (using things like background-size, etc) to avoid squishing the image or ruining the resolution?'
that's the thing, I'm doing this with pug and sass, so I have just the compiled code, but I'll get the pug/sass into codepen
@taltmann42 I'll get it in there
@cjrutherford yep you can choose those preprocessors, so you can just paste your original source there
@taltmann42 and of course it's not doing it in the pen..... http://codepen.io/christopherrutherford/pen/egXjbZ so I'm not crazy
does it happen in your local code if you remove the first part? in the image, there's another section, and in the codepen there isn't
@taltmann42 This is true, but it's another whole section like the others laid out the same way. I'll inject the pug/sass for that and see what happens
@taltmann42 still the same here.... works in CP, not local
Pen is updated.
do you have some CSS-libraries referenced locally that you didn't include in codepen?
only using bootstrap, jquery, and font-awesome
okay then that's a tough one
i have a theory
in sec2 you set css for
#seconeTitleto remove the top margin, but it's actually #sectwoTitle.. but reboot from bootstrap removes the top-margin anyway.. buuuut if you increase the margin manually you'll see the exact same effect as in the image you posted
so maybe not everything from bootstrap get's loaded correctly or something like that?
@cjrutherford do you use the bootstrap 4.0 alpha locally too?
@taltmann42 worked like a charm
@moT01 :thumbsup:
@taltmann42 that's the thing, I'm not using the BS4 alpha at all, and it's importing from a CDN, and it's only version 3.3.7
@cjrutherford then you should use the same CDN link in codepen instead of using the one from the dropdown
ah, is that why it's working there? lol kk
probably
@taltmann42 Thanks, I think that's the issue, for some reason it like bootstraps 4.0 A6 release better
cjrutherford sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 522 | @taltmann42 |http://www.freecodecamp.com/taltmann42
I'm going to migrate this over.
uhm okay, but I have the solution for the bug too, and it's not called alpha without a reason :P
@taltmann42 yeah... alpha may kill you, beta may bite you, but when they become stable....
what's the fix?
@cjrutherford you remove the margin-top from
seconeTitle but it's sectwoTitle
so the h1 in the second section still has a margin-top which pushes its container downwards
ah, okay, I forgot you said that before....
@taltmann42 works!!!
gotta remember if I copy/paste code I have to be sure it matches up
:smirk:
Hi guys,
I am working on Personal Portfolio Project and have a problem with CodePen and Bootstrap - can't seem to get it to work.
In CodePen's settings I add Bootstrap to Css and Bootstrap + jQuery to JavaScript tab, then from Bootsrtap website from components section I copy default navbar and past it into CodePen HTML section but can't get it to work.
http://codepen.io/funkymonkey79/pen/LxaJWr
What am I doing wrong?
Thanks!
@funkymonkey79 and also be sure to include the JS for Bootstrap too
@taltmann42 Seems like cp is preferring alpha 6
@funkymonkey79 Wrong bootstrap link -- this is the correct BS version you need: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
@funkymonkey79 Replace your bootstrap link with this one.
guys, can anyone help with the Twitch API?
@taltmann42 @cjrutherford @U-ways Thank you so much!!! I've just spent 5 hours trying to figure it out lol
funkymonkey79 sends brownie points to @taltmann42 and @cjrutherford and @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
:cookie: 523 | @taltmann42 |http://www.freecodecamp.com/taltmann42
:cookie: 681 | @u-ways |http://www.freecodecamp.com/u-ways
@funkymonkey79 Ouch! Goodluck! :D
@funkymonkey79 lol, the first step to being a developer is a thousand mile journey, which starts with a few simple steps! lol
Anyone can help me with my problem? trying to figure it out since yesterday. lol
If you guys click 'ALL' multiple times, the 'ONLINE' jumps around.
@U-ways Thanks, I will need tones of it :)
funkymonkey79 sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:warning: funkymonkey79 already gave u-ways points
@cjrutherford lol, learning the hard way :), slow clap to myself and a bottle of cold beer!
@sirus3020 what exactly do you mean with "Online" jumping around?
hi! I need some help on the "show local weather" app. Actually i'm having problems using $.getJSON on codepen. I think it's something common, so.. does anybody know how to fix it?
@taltmann42 well, try clicking 'ALL' multiple times.
@diogorighi doing that too currently, what's the problem?
@taltmann42 I think codepen is blocking any request that are not via https
@diogorighi yep, the openweather-api only gives https to paying users, you can bypass this with another site, one sec
@diogorighi
https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?[YOUR_PARAMETERS]
this page basically makes the request for you and returns the results to your site
hummmm, nice! Thanks @taltmann42 I'll try that
diogorighi sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 524 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Hey could some of you check if my weather-app shows correct data for you? https://codepen.io/taltmann42/pen/EZMojv?editors=0100
Hallo Thomas, bei mir wird da nichts angezeigt ;)
woah
ah doch jetzt, nach langer wartezeit :D
ja der tab muss aktiv sein, und dann dauerts ne weile bis der server reagiert
hey guys, what kind of display should I use for a div to use vertical-align? "display:cell" or can I use something else?
@niprobin you can add
display:flex and align-items:center on the contianer, that will vertically center its content
@taltmann42 thanks a lot!
for more info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
@taltmann42 this guide looks good, thanks again for all the info
niprobin sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 525 | @taltmann42 |http://www.freecodecamp.com/taltmann42
@funkymonkey79 heh, yeah I know that feel. the only thing that's saved me in this program is the fact that I've done some programming classes in college, and HTML in middle school
@taltmann42 yes! its showing the correct location and weather for me
@diogorighi okay great, is there also a background-image?
@taltmann42 noo, there's no background image
@diogorighi damn.. what text is there in the middle?
cool, you're using react. I didn't know that it was possible
@diogorighi jup, include react and react-dom in codepen and use the babel-preprocessor if you want to use JSX too
I'm not a codepen user, but I've been working with front-end for a long time. Just rushing these tests
its showing "clear sky"
yeah started like that too.. and every once in a while I'm doing a project.. it's not that they're particularly hard but still time-consuming
yep
same here
i'm leaving the startup that I founded in 2012, so I'm looking for this certificates to help me find a new job
oh okay, sorry to hear that
can you give me your lat/long, so I can check out what's going wrong?
oh, It's my choice
so it's a good thing
sure
oh okay, but when you already had a startup and worked in front-end for a while, i don't think that can be topped by a "free code camp" certificate
hm.. yeah maybe
but I think it can help
especially the non profits projects
I think the main problem is being unknown
and I live in Brazil, looking for a remote job in another country
yeah that's true, another dev-friend just started blogging about several aspects of android-development and soom companies contacted him
my coords: lat: -5.83 lon: -35.21
okay let's see
hmm for me it shows a clear sky image in the background... weird
for me is just a blue background
maybe its a sky
ah probably the image gets cropped so much that you don't see the part of the image with something else in it
hahaha
yep that's it.. center-positioned background image ftw!
@diogorighi thanks for testing anyways :)
taltmann42 sends brownie points to @diogorighi :sparkles: :thumbsup: :sparkles:
:cookie: 211 | @diogorighi |http://www.freecodecamp.com/diogorighi
:D
yep, you're right
just saw a guy jumping
yep.. probably could've used a better image for that one
hahaha, i think it's fine
Hey people I need help. I'm a rookie and trying to create my own webside. But I can't figure out why my pages are overlapping. If you look down at the page to the Concept page it gets overlapped by a new page. The page overlapping is the "Offering" page which should be a whole new site. What is going wrong? https://codepen.io/VilfredSikker/pen/pRYjgm
@VilfredSikker It looks like you don't have bootstrap set up for your project: https://www.bootstrapcdn.com/
@VilfredSikker it looks like the .pageConcept div is insice the pagehome
inside*
Can anyone help me out? I'm trying to move the TEST image to overlap the bottom left corner of the div object with the lorem ipsum text
@singleincome I imagine adding some margins/padding would do the trick
@achudoz I've tried adding a left margin, but it forces the image above the text
so instead of () [] it becomes:
()
[]
@singleincome i just looked at the pen and it seems that your image and text are both in the same <div> move them to seperate divs and then use the margin/padding method
if you have them in the same div, it acts as one block and will never overlap
@achudoz Like this?
'''
<div id="div1">
</div>
<div>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQSXbAPjvTfcr9ge8uzA6gMOzw0TkJz2ixXun6BUOXnrVmZaIk2Bi4-UccK8g" alt="">
</div>
'''
'''
<div id="div1">
</div>
<div>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQSXbAPjvTfcr9ge8uzA6gMOzw0TkJz2ixXun6BUOXnrVmZaIk2Bi4-UccK8g" alt="">
</div>
'''
:bulb: to format code use backticks! ``` more info
<div id="div1">
</div>
<div>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQSXbAPjvTfcr9ge8uzA6gMOzw0TkJz2ixXun6BUOXnrVmZaIk2Bi4-UccK8g" alt="">
</div>
@singleincome You can use negative margins, but not sure I understand the look you want.
margin-top: 180px;
margin-left: -100px;
yeah, I would do
<div class="masterdiv">
<div class="imagediv">
<img src="(source)"
</div>
<div class="textdiv">
<p>yourtexthere</p>
</div>
</div>
then adjust the margins to get the desired effect. negative margins help as pointed out by @SkyCoder01
@singleincome oh and one pointer for the future: I know that it makes sense to label your elements by IDs rather than by classes, when you know/think you will only use the specific css only for this one element, but apparently it is considered a bad practice and in fact when you will be doing more complex pages, you WILL reuse pieces of css formatting and you will use IDs for different things than css targeting. Those things would be mostly javasrcipt sorcery
margin: auto isn't working for my input & button elements..however it is working for an h1 element. can somebody help me figure out why this is happening? https://codepen.io/JaosnCodes/pen/vgQdjR
Hey guys, if I want to have an H1 element "Yaya Toure" but want the Yaya in orange and the Toure in green. How would i do this. I get the rite colours but i can't keep them on the same line.
@achudoz Are you talking about my #margin ID? Hehe, yeah. It was pointed out to me yesterday. I haven't gotten around to changing things around completely.
Thanks for your suggestion -- i'll try to implement!
@ICodeWateverIFeelLikeCoding margin: auto will only center block elements. <button> and <input> are inline elements.
@SkyCoder01 using negative margins breaks my div for some reason :(
@Drewishman6 Use a <span> tag.
<h1><span class="orange-text">Orange</span> and <span class="green-text">Green</span></h1>
@singleincome If you can post an image of what you want, I might have a better idea. Having trouble visualizing what you're going for.
http://codepen.io/jtan3/pen/GqPgOp my offline button only targets one account. How can I make it target all of the offline accounts?
@jtan3 When I did that project, I gave each streamer a class name "offline", "online", "closed" and then used jQuery to .hide() and .show() the streamers.
@SkyCoder01 you did that manually?
manually?
@SkyCoder01 Where do i put my elements to have them changed by the classes?
@jtan3 You add it to your HTML prepend code:
$("#streamerInfo").prepend(
"<div class='row' id='streamers'>" +
"<a target='_blank' href=" + url + " >" +
"<div class='col-md-4' >" +
"<img src='" + logo + "'>" +
"</div>" +
"<div class='col-md-4' class='name'>" + name +
"<p class='viewers'>" + views + " views" + "</p>" +
"<p>" + followers + " followers" + "</p>" +
"</div>" +
"<div class='col-md-4'>" + mode + "</div>" +
"</a>" +
"</div>"
);It helps to format it like that (for me) so I can view it like normal HTML
Don't use id="streamers" for every streamer - IDs need to be unique. But you can do something like class="row offline" (use a variable for offline/online/closed)
@SkyCoder01 thanks, ill try it
jtan3 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 201 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@Drewishman6 You put them in the place where I did in that code example, or are you asking how to style them in your CSS?
@Drewishman6 http://codepen.io/skycoder/pen/bgZzpq
@SkyCoder01 Do I need CSS as well?
Ahhh yes i do
Hello! I am in the Local weather app and I can not go through it. Totally stuck. I have checked many different codes, try them, understanding them but I can not see the mistake. Can someone have a look at my codepen, please?? I am just trying to get data from API, no css, no html complicated but ... Thank you https://codepen.io/AlejoFCC/pen/ZLmBBE?editors=1011
@Drewishman6 It wouldn't hurt to do the HTML and CSS challenges again if you haven't yet
We learn all of this stuff in those challenges - how to style elements with CSS
@SkyCoder01 Thanks! Yes I'm trying to look those over. I completed them 2 weeks ago so I've lost a lot in my head. Thanks for the help and sorry for the amateurness lol
drewishman6 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 202 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Yeah, It looks like it's been almost 3 months since you did those. Easy to forget :)
Hey all, does anyone have an idea on how to check an array to see if there's a set of numbers in order, to then give that array a score?
@AlejoFCC HTTP and HTTPS don't work together. You should use a different weather API that supports HTTPS or get location over HTTP instead of using navigator.geolocation
@AlejoFCC also don't forget to add the jquery script
I.e. if the array has [1,4,7], that would get 10 points because there's a winning column of X's or O's on the board now
@mdbailin Can you sort the array?
Oh if it's for tic tac toe...I haven't done that yet :/
@SkyCoder01 Yeah we don't want to sort in this case because the order of when the move was played matters here
@asparism jQuery script?! I am lost about that, do i need to add an instance for that?@SkyCoder01 Thank you. I will try to find out by that way.
:cookie: 305 | @asparism |http://www.freecodecamp.com/asparism
alejofcc sends brownie points to @asparism :sparkles: :thumbsup: :sparkles:
@SkyCoder01 Thank you. I will try to find out by that way.
:cookie: 203 | @skycoder01 |http://www.freecodecamp.com/skycoder01
alejofcc sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
@AlejoFCC from codepen, upper - right: choose settings, thenselect JS; use quick-add drop down at the bottom and select jquery. that will automatically add jquery and allow you to use, for example, the $ selector.
can someone help me understand why i can still press buttons after i've completed the series in this simon codepen? i can't seem to exit the function or turn off the variable that lets buttons be pressed http://codepen.io/Asparism/pen/ZLyJRb?editors=0011
@SkyCoder01 I can't find a good image
But it has to do with overflow
@asparism thank you
alejofcc sends brownie points to @asparism :sparkles: :thumbsup: :sparkles:
:warning: alejofcc already gave asparism points
no prob
if i want to push the contents of an array[i] into my html with Angular upon clicking a button, should I be using a directive or a component?
What's the difference between:
.class{}And:
class image {}
Hey all, does anyone have an idea on how to check an array to see if there's a set of numbers in order, to then give that array a score?
I.e. if the array has [1,4,7], that would get 10 points because there's a winning column of X's or O's on the board now
@singleincome One is CSS the other is JavaScript :)
but I can write the latter in a stylesheet
Can you show an example?
Css:
.container {
width: 100%;
height: 275px;
overflow: visible;
padding: 20px;
background-color: #84B6C0;
box-shadow: 0px 10px 5px #888888;
font-family: sans-serif;
}
#margin {
margin: 1cm 1.5cm 1cm 1cm;
}
.container img {
position: aboslute;
margin-right: 25px;
width: 300px;
border-radius: 85%;
z-index: -1;
float: left;
}
html:
<div id="wrap">
<div class="container" id="margin">
<div id="div1">
</div>
<div>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQSXbAPjvTfcr9ge8uzA6gMOzw0TkJz2ixXun6BUOXnrVmZaIk2Bi4-UccK8g" alt="">
<h2> Lorem</h2>
<p> Ipusm. Phasellus non turpis a eros suscipit sagittis eu nec purus. Ut a bibendum lacus. Quisque tincidunt a libero non faucibus. Sed augue ipsum, pharetra at laoreet in, ornare mattis magna. Mauris eget urna magna. Nulla mollis, lorem nec pulvinar posuere. </p>
</div>
Oh..... not the keyword
class?
Hey guys, anyone have any idea why setTimeout wouldn't be working on line 17 of my code?
http://codepen.io/ericsolomon21/pen/Lxqyvx/?editors=0011
http://codepen.io/ericsolomon21/pen/Lxqyvx/?editors=0011
Oh yeah, sorry. Not the keyword class @SkyCoder01
@singleincome It means to select all img elements inside elements with the
.container class in that example. https://www.w3schools.com/cssref/css_selectors.asp
oooooou
i wonder if that's why my img won't overlap my div element...
@singleincome Wish I could help, just not sure what you're looking to do. In my twitch project I have the user logos overlapping divs - I did it with position: absolute. http://codepen.io/skycoder/pen/XpyrYN
Anyone know where in the bootstrap or HTML lessons it was taught to make a nav bar? Since that is the first thing you need to do to create your portfolio site, I would think they would teach this, but I cant find anywhere this was taught. Have mercy, I am new!
there you go @MBcoder87
How do I connect to mongodb when using react-router?
Thank you @alant90
mbcoder87 sends brownie points to @alant90 :sparkles: :thumbsup: :sparkles:
:cookie: 315 | @alant90 |http://www.freecodecamp.com/alant90
Hi everyone, I'm really struggling with the Weather App challenge. Can anyone point me to some good resources for learning more about how to use APIs? I've looked at the standard documentation (MDN etc.) but it might as well be written in Klingon for all the chance I've got of following it!
which libraries are you using @IvesNoIdea ?
@alant90 I'm trying to use the OpenWeatherMap API as suggested in the challenge. I've got my API key, but the call just won't work.
My code:
$.getJSON("api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=303a654508a3690e8004b21117457135", function(json) {
$("#user-weather").html(JSON.stringify(json));
});I know it's not using the user's location, I just wanted to get it working with a static location first, and output the JSON in string format so I could see it pulling through.
use https:// in front of the url
@labiej A-ha! It didn't work with https, but it did with http! Thanks :smile:
ivesnoidea sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 457 | @labiej |http://www.freecodecamp.com/labiej
@IvesNoIdea Indeed, forgot that the https endpoint is restricted to pro accounts
A shame really if google ever starts enforcing https in chrome
@labiej I just can't believe I've been banging my head against a brick wall for so long because I didn't put http! :LOL:
can anyone help me get through this problem?
@bigyankarki You're ahead of me, I'm afraid. It looks nice, though!
does my project look nice so far guys?http://codepen.io/EvanDCP18/full/bgZZqm/
@EvanDCP Looks simple to use. You've got a typo in 'Pomodoro', though.
(former newspaper proofreader, I can't help it!)
hello can someone help me here with a css problem?
@Gentarozzo I can try
after a "each" cycle i want to change the color for every item i append... but it just changes the first one:
$.each(trovato, function(i,j){
var goto = 'https://en.wikipedia.org/?curid='+trovato[i].pageid;
$("#risultati").append('<a target = '+"_blank"+' href = ' + goto + '<li><span id = "titoline">'+ trovato[i].title + '</span><br>' + trovato[i].extract + '</li></a>')
$("#titoline").css({ color: "#"+(Math.random()*16777215|0).toString(16)
I just changed the ID... now I've a class
but all the colours are the same... i want a random title
You want a random color for each
#titoline?
yes
You will have to use
.titoline because you can't have duplicate IDs
told you i changed it
but are all the same... i need random
and use a $.each, like:
$.each($(".titoline"), function() {
$(this).css({
color: "#" + (Math.random() * 16777215 | 0).toString(16)
});
});
trying
@SkyCoder01 totally working... thanks a lot ^^
gentarozzo sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 205 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Check for Palindromes
https://www.freecodecamp.com/challenges/check-for-palindromes
Is there a regular expression that allow us to select only valid letters of the alphabete? ommiting numbers ,symbols and/or spaces.
https://www.freecodecamp.com/challenges/check-for-palindromes
Is there a regular expression that allow us to select only valid letters of the alphabete? ommiting numbers ,symbols and/or spaces.
@SkyCoder01 i am sorry i couldnt find your comment up in the section
this is the site
@Gentarozzo I just did that for animating, you could do the same with a hide and fadeIn:
$.each($(".titoline"), function() {
$(this).css({
color: "#" + (Math.random() * 16777215 | 0).toString(16)
}).hide().fadeIn(2000);For fun anyway :)
@bigyankarki You are submitting the <input> instead of the <form> - that was one thing I noticed
@SkyCoder01 looks cool :D
I am having trouble getting the scrolling on the portfolio project to work. I have copied the code from the spy data for bootstrap even. I thought that I made an typing error coding . Still no success. Does codePen really work for everything?
@SkyCoder01 what if i want to take colors from an array? in a random way=
@Gentarozzo I forget the formula to use, but it's similar - use Math.random() to choose a random item from your array of colors
@SkyCoder01 okok I'll try
@SkyCoder01 so that means we can get a value from form and not from input field?
No, you get your value from the input field, but you submit() a form, not an input field.
I forget the tutorial I went through for this when i did my wikipedia viewer. I'll see if I can find it
hey folks, i'm trying to remember the link to that image upload service, "like imgur.com," but not imgur, as that has problems with codepen.io sometimes? imgaccess.org or something like that? i tried googling for it but all i keep coming up is someone's large-scale print shop in the midwest.
https://postimage.org?
Or you can replace runnerbill75 with your username and use github with these instructions :point_up: February 10, 2017 4:17 PM
Or you can replace runnerbill75 with your username and use github with these instructions :point_up: February 10, 2017 4:17 PM
@SkyCoder01 do you mean we should submit() a form or input field?
@SkyCoder01 - that's it. i'll bookmark it this time. thank you!
faddah sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 206 | @skycoder01 |http://www.freecodecamp.com/skycoder01
would someone help me get my text centered horizontally and vertically inside a background image? I've looked for solutions on google and nothing I try works. I'm using bootstrap 3.
https://codepen.io/Finagl3/pen/WRKMLo?editors=1100
https://codepen.io/Finagl3/pen/WRKMLo?editors=1100
@bigyankarki The submit() method submits a form
I have just done HTML and CSS. Do I need JavaScript to be able to make a page scroll?
oh
What do i have to do to make this link to a site.
<div class="btnlist text-center">
<a class="btn btn-default" href="https://twitter.com/ironwrangler"<i class="fa fa-twitter fa-lg"id="twittericon"aria-hidden="true"></i>Twitter</a>
hi guys
so..i have recently gotten to the tribute page challenge
and i need to say, im lost. It's like i've completely forgotten about everything i have learned
```
can you guys help me to start somewhere?
$(".btn").click(function(){
$(".btn").replaceWith('<form id="thisForm"><input class="input-lg" type= "search" id="inputField" placeholder= "Search"></form>')
});
$("#thisForm").submit(function(){
var input = document.getElementById("inputField").value;
getData(input);
console.log(input);
});
@sky this should solve the problem right?
@leduong96 it happened to me too.
working on my portfolio how do I get my navbar elements separate? http://codepen.io/itchick85/pen/RKENBR
@bigyankarki Does this help? http://codepen.io/skycoder/pen/NdJVPd
@Ironwrangler what do you do to get back on your feet?
i went back to the beginning and wrote notes and did some of the lessons over @leduong96
@SkyCoder01 wow thanks i kinda have concept of what i should do
:cookie: 207 | @skycoder01 |http://www.freecodecamp.com/skycoder01
bigyankarki sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
i will let you know if there is any prblem :)
@itchick85 check your messages
@Ironwrangler You were missing a closing
> on your <a> tag. If this is in codepen, add target="_blank" to your <a> tag as well.<a class="btn btn-default" href="https://twitter.com/ironwrangler"><i class="fa fa-twitter fa-lg" id="twittericon" aria-hidden="true"></i>Twitter</a>$(".btn").click(function(){
$(".btn").replaceWith('<form id="thisForm"><input class="input-lg" type= "search" id="inputField" placeholder= "Search"></form>')
});
$("#thisForm").submit(function(){
var input = document.getElementById("inputField").value();
getData(input);
console.log(input);
});
this should work right?
Does it?
idk i tried to look in console..but input doesnt show up
@leduong96 it helps to just put a header.
Hmmm, I just looked and the page refreshes. Maybe you can create the HTML manually and then use jQuery to .hide() and .show() it before and after you click on the icon
@leduong96 when the screen isn't blank it's a loss less intimidating and easier to think of where to start.
@Finagl3 Thank you Final3
leduong96 sends brownie points to @finagl3 :sparkles: :thumbsup: :sparkles:
:cookie: 143 | @finagl3 |http://www.freecodecamp.com/finagl3
@bigyankarki I don't know what the replaceWhith method does, maybe that has something to do with it :( maybe use .html()?
You may also have to do this to make it so the form doesn't refresh:
You may also have to do this to make it so the form doesn't refresh:
$("#thisForm").submit(function(event){
event.preventDefault();
So just do a header' change the font color or font family, change background color etc. Just simple things. I had to dot hat to actually get started.
@leduong96 your welcome
@SkyCoder01 do you mean i should use .hide() and .show() instead of replaceWith()
OKAY
anyone any good with react in here?
Does anyone know anything about data-spy? It does nothing for me when I implement it.
@bigyankarki Actually, never mind... you have to put your .submit() in the same function where you generate the HTML:
$(".btn").click(function() {
$(".btn").replaceWith('<form id="thisForm"><input class="input-lg" type= "search" id="inputField" placeholder= "Search"></form>')
$("#thisForm").submit(function(event) {
event.preventDefault();
var input = $('#inputField').val();
getData(input);
console.log(input);
});
});
That console.log()'s something
@itchick85 I had to use padding to separate them. Like 8px
var ricerca = $("#input");
var inp = ricerca.val();
var inp = ricerca.val();
should this gimme me the value back?
@SkyCoder01 does it? I dont see anything in the console
Anyone willing to help with the portfolio project?
@bigyankarki Yes, it works for me at least - put your .submit() in the .click(function()
@SkyCoder01 shows error
@Finagl3 what do you need help with mate?
i am sorry if i am being so annoying :D
@bigyankarki You didn't copy the code correctly:
var input = $('#inputField').val();
You had
var input = $('inputField').value();
@aj-willi I'm trying to get my header centered horizontally and vertically on my background image. I've been working on trying tonfind this the past few days, but nothing I try works
can you make a jsfiddle? or show the code
@aj-willi I'm using bootstrap 3
hmm
link your html markup and css
i have bootstrap also
@aj-willi hold on trying to paste link and it's not working for some reason
There it goes
Had to restart app
@SkyCoder01 does the console show the input in yours?
@bigyankarki Yes, it shows the value in the input field if you use
var input = $('#inputField').val();
the header seems centered, what exactly are you trying to do? @Finagl3
@SkyCoder01 thanks
bigyankarki sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: bigyankarki already gave skycoder01 points
i was stuck for days in that one
I mean header as in text header. If you scroll down the name of the portfolio is all the way at the bottom, and I don't know why. WhenI want it in the center of the image.
now i need to solve the ajax part
:sweat: That was tough, no problem
@aj-willi
ahh you want the text at top?
ok
Yes
I guess there are too many newbies on today. I can not seem to get any help with data-spy. I will try again another day.
/to get the required data from wikipedia API
function getData(input) {
$.ajax({
url: "https://en.wikipedia.org/w/api.php",
dataType: "json",
data: "method=get&format=json&list=search&srsearch=input",
type: "GET",
headers: {"api-user-agent" : "b.gyankarki@gmail.com"},
success: function(wiki) {
for (var i= 0; i< wiki.query.search.length; i++) {
$(".content").append("<p>wiki.query.search.title[i]</p>");
}
}
});
}
can you just give me an overview of whats wrong in this code?
i have adjusted the code, see if thats better
<div class="container-fluid">
<div class="homePage text-center">
<h1>Devver's Hub</h1>
</div>
</div> <!--container close-->
<div class= "container-fluid">
<ul class="nav nav-pills navbar-fixed-top">
<li id="name">Finagle</li>
<li class="pull-right">
<a href="#">Contact</a>
</li>
<li class = "pull-right">
<a href="#">Portfolio</a>
</li>
<li class = "pull-right">
<a href="#">Home</a>
</li>
</ul>
</div> <!--c-f close-->
<div class="container-fluid">
<div class="homePage text-center">
<h1>Devver's Hub</h1>
</div>
</div> <!--container close-->
<img src="http://ibithink.com/wp-content/uploads/2016/04/web-unsplash-med-1330x600.gif">
<!--Above this line ^ navbar-->
.nav-pills {
list-style-type: none;
background-color: black;
overflow: hidden;
font-size: 1.7em;
margin-bottom: 20px;
}
name {
font-family: Lobster;
color: white;
margin-top: 10px;
margin-left: 5px;
}
li a {
font-family: Arial;
color: yellow;
}
.active {
background-color: green;
color: black;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
}
li a:hover {
background-color: green !important;
color: black;
text-decoration: none;
}
.homePage {
/home background image/
background: url("http://ibithink.com/wp-content/uploads/2016/04/web-unsplash-med-1330x600.gif");
background-repeat: no-repeat;
width: 100%;
padding-top: 100%;
}
h1 {
color: green;
font-family: Lobster;
}
/
background-repeat: no-repeat;
padding-top: 100%;
max-height: 800px;
/
@bigyankarki I didn't use ajax for my wikipedia, just getJSON, but this looks wrong:
data: "method=get&format=json&list=search&srsearch=input",
@aj-willi I looked and I don't see any difference. Can't even see any changes in the code...
@SkyCoder01 i will check that :)
link is not saving code, what you need to do is remove the img css you have and replace it with an img src on your markup. put the h1 container at the top
$(".btn").click(function(){
$(".btn").replaceWith('<form id="thisForm"><input class="input-lg" type= "search" id="inputField" placeholder= "Search"></form>')
$("#thisForm").submit(function(event){
event.preventDefault();
var input = $('#inputField').val();
getData(input);
console.log(input);
});
});
@SkyCoder01 we can call getData(input) here right?
@aj-willi would the nav bar still show up at the top if i move the h1 above it?
@Finagl3 https://jsfiddle.net/sL04uqpt/
@aj-willi so instead of making a class in css that contains the image, I just need to put the image directly into the html portion?
@bigyankarki Put
console.log(input) in your getData function to test it out :)
XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?method=get&format=json&list=search&srsearch=input. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
@Finagl3 there is different options, but i think its most practical
this is the error i got
so that means it is working right @SkyCoder01 ?
Yes, it means your api call is going through
@aj-willi thank you. I will give it a shot.
finagl3 sends brownie points to @aj-willi :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @aj-willi |http://www.freecodecamp.com/aj-willi
@SkyCoder01 can you give me some links where I can know more about how API works?
@bigyankarki I don't really have any :( I just started learning JavaScript a little over a month ago but have been going to a javascript meetup every weekend and people have been helping me there. I'm also reading through this book: http://eloquentjavascript.net/ and these documents: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
@SkyCoder01 thats so cool
i wish there were any JS meetup here in NJ too
Helping people here has taught me a lot too, I may try playing around with ajax so I can help more
thats cool @SkyCoder01 :)