It's like trying to put two clickable items in one.
@SkyCoder01 what about this
<div class = "">
<form style="display: inline" action="http:/facebook.com" method="get">
<button>Visit Website</button>
</form>
</div>
<h1>Webpage Design:</h1>
<h4>Showcasing What I Have Learned in FreeCodeCamp</h4>
@ZackRich12 It should be
https://facebook.com, but I don't think that will work in an iFrame
my bad, lear, something new everyday
Depends on where you have the code, I guess
In the end, just use a <a> for navigating somewhere - that's guaranteed to work.
im on the build a tribute page project part
havetn started yet
how did you guys like it?
@Defane-Albaster Honestly, it was good practice, but I had more fun with the weather project :)
@SkyCoder01 alrite thanks bro
defane-albaster sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 239 | @skycoder01 |http://www.freecodecamp.com/skycoder01
ive already forgotten the basics lol. since i was a bit busy. this is gonna be interesting
<div class = "">
<form style="display: inline" action="http:/facebook.com" method="get">
<button>Visit Website</button>
</form>
</div>
<h1>Webpage Design:</h1>
<h4>Showcasing What I Have Learned in FreeCodeCamp</h4>
@ZackRich12 <form> is a block element, where <button> behaves like an inline element, so it's an attempt to emulate a button by making it inline.
Try this:
<form style="display:inline"><button>inline form</button></form>
<form style="display:inline"><button>inline form</button></form>
<form style="display:inline"><button>inline form</button></form>
<form style="display:inline"><button>inline form</button></form>
<form><button>regular form</button></form>
<form><button>regular form</button></form>
<form><button>regular form</button></form>
<form><button>regular form</button></form>
and compare with a normal button:
<button>button</button>
<button>button</button>
<button>button</button>
@SkyCoder01 Gotcha, Thank you
zackrich12 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 240 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@SkyCoder01 you have been a big help tonight
@SkyCoder01 i ended up using a form element for the button
Happy to help :+1:
hello guys I am at a "Build a Tribute Page" section
It is not letting me to go forward, anyone knows why?
anyone here
nobody is here?
Hey all
hi
@pshiwakoti1 You must complete the challenge or refresh the browser
ok
I am just starting this challenge myself
Anyone have a recommendation on where to start
this is a tricky challenge
Yeah!
i don't know how to start and where
I'm overwhelmed haha
same
I'm going to just look at the damn code lol
do I have to open a new account at codePen.io
yeah
and create a website?
no
watch the video
it will explain
ok watching
Hey guys, I basically made it to the tribute page exercise in like 3-4h - so it thought it was pretty easy. But now with the tribute page I am pretty overwhelmed. Any hints?
Hey everyone. Just started working on my tic-tac-toe game and I'm wondering if there is a good way to maintain aspect ratio when dealing with resizing screens. I've been using vmin to make my
div elements responsive, but that gives me a rectangle when I would like my game board to remain square at all times.
Hey guys, I'm trying to put an image up online so I can use it in my portfolio but I don't really know where I should go to put up a picture of myself as a profile picture. Any suggestions?
@mattiheubner That feeling of being overwhelmed is very common. When starting a project it helps to break down everything you'll need to do in pseudo-code (meaning plain english comments), then take everything one step at a time.
@Sevohan You can use dropbox or a similar cloud hosting service, or you can use AWS to host your files.
@mattiheubner If you are really stumped it might not hurt to go over to Codecademy and try out some of their website building modules for a little more practice before you dive in.
@FatTone225 thanks so much :) Will check it out!
mattiheubner sends brownie points to @fattone225 :sparkles: :thumbsup: :sparkles:
:cookie: 408 | @fattone225 |http://www.freecodecamp.com/fattone225
does anybody here know redux/react
that and how to use promises
im just going to walk away before i burn my computer to the ground
@Sevohan Have you tried Dropbox?
@sorinr ok thx
isaaknazar sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1176 | @sorinr |http://www.freecodecamp.com/sorinr
woohoo just finished my weather app, it took all day which is dissapointing
hi everyone Does anybody here use atom or brackets?
vs code here
Im having an issue with the <p> and <img> in my #about <div> I cant get them to sit side by side and also when I scroll they go above the #menu
Please help
display:inline
<div class = "silver-background">
.silver-background {
background-color:silver
}
<p>Things cats love:</p>
.silver-background {
background-color:silver
}
<p>Things cats love:</p>
is that a question patrick
@ArashDai was that an answer to me?
Having trouble with the adding color to div element exercise...any thoughts Haha...supposed to be
yes book
I established the class, but I can't get it to successfully assign the silver color. Does that look okay?
looks fine to me but let me see it on codepe
codepen*
hii guys, I am at a "Build a Tribute Page" section
Which user stories I should use ??
Which user stories I should use ??
@PatrickonGitHub
.silver-background {
background-color:silver
} this should go under style
Thanks, Arash...how do I share it on codepen? I'm new to this, so I don't know
listen to badal
yea that should all be in your css sheet
well the css
im a bad teacher
here one sec
@erpriyanka Fulfill the user stories said and just make the tribute page to anyone you feel like.
@ArashDai Really? I cant imagine it just my computer. The text inside the <p> moves out of the <div> when i make my screen smaller, the <img> does as well
Gotcha....thanks everyone! i'll give it a whirl
@ArashDai lol it happens sometimes
thank u was bit confused how to start it @heyDante
erpriyanka sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 431 | @heydante |http://www.freecodecamp.com/heydante
im working on reading your code book but it aint easy lol
@ArashDai Its a mess I am sure, started out nice, but then started having problems and moving things so much!
so basicly
if you want them next to each other i would put them inside the same parent div and give them display:inline in your css
but
your columns are also making the p take up the full with because you have col-md-12
I think you need to take some time to learn the basics of css, judging by your class names
Thats good advice, off to MDN for me
i would help more but im tired, best of luck
Thanks
@ArashDai Thank you for the help. Get some rest.
:cookie: 156 | @arashdai |http://www.freecodecamp.com/arashdai
bookofbash sends brownie points to @arashdai :sparkles: :thumbsup: :sparkles:
how do I move elements to like the lower middle of the page?
does anyone know how to evenly distribute buttons with bootstrap? Im working on my portfolio and theyre all squished together
@itchick85 you mean positioning
@judge2dt <span> it
@heyDante where would i but <span>?
@judge2dt link your page
@judge2dt where you want the buttons
@judge2dt https://www.w3schools.com/css/css_navbar.asp read this for a navbar
@judge2dt shift your style codes to the CSS bar
@heyDante Why's that?
@judge2dt they have given a separate block for your CSS code. It makes the code looks more organised
@thanks!
@heyDante Thanks!
judge2dt sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 432 | @heydante |http://www.freecodecamp.com/heydante
I could use some help. What is is the statement for importing google's fonts, and what file do you place it in?
@judge2dt https://www.w3schools.com/howto/howto_js_topnav.asp i think you want to this with your buttons?
@VideoGC https://fonts.google.com/ see there
@jtan3 I'll try it
@judge2dt you know the grid system
@heyDante thanks, bro
videogc sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 433 | @heydante |http://www.freecodecamp.com/heydante
@heyDante are you talking about col--?
ex: col-xs-8
yep.
This might help
https://www.youtube.com/watch?v=e5VQampkqdg
https://www.youtube.com/watch?v=e5VQampkqdg
mine is messed up, idk what to do about it since it wont let me do col-md-8 only xs for some reason
follow the guys lesson up there. pretty much good documentation for boostrap and all.
<div class="thumbnail">
<img src="https://dfmonet.files.wordpress.com/2012/09/astral_14-sept-65daysofstatic.jpg" alt="65daysofstatic" class="img-responsive">
<div class="caption text-center">
They made really fantastic music.
</div>
</div>
@Nexmean Are you sure you have bootstrap loaded?
@nawrockp yes, i sure
well from what I see that image should be responsive.. When you resize the browser ,does it decrease in size?
@Nexmean If you want to make it like a bootstrap thumbnail, you should also add this class to the image: img-thumbnail
well from what I see that image should be responsive.. When you resize the browser ,does it decrease in size?
No, cause I am idiot that use img-responsive on image nested in <div class="container">
guys does anybody here work with brackets?
@nawrockp strange, there is no information about img-thumbnail on https://getbootstrap.com/components/#thumbnails-custom-content
@Nexmean I can't say I have ever really used that class though.
@Nexmean but it seems you want you image to be smaller? If so you would have to give the "thumbnail" class a max-width
Hi, guys. What's wrong with this thumbnails? It just don't work.<div class="thumbnail"> <img src="https://dfmonet.files.wordpress.com/2012/09/astral_14-sept-65daysofstatic.jpg" alt="65daysofstatic" class="img-responsive"> <div class="caption text-center"> They made really fantastic music. </div> </div>
@nawrockp I want to put sentence into thumbnail with picture, but it does not work
code seems fine. it works for me
@heyDante look at this: https://codepen.io/nexmean/pen/KaLQQv. It does not work here.
@Nexmean you could try this http://v4-alpha.getbootstrap.com/content/figures/
should i use bootstrap for the portfolio? I feel I have to know html and css well and the underlying concepts to get bootstrap.
@DavidEspinoza Bootstrap has a bigger learning curve than HTML and CSS. Unless you get comfortable with CSS, don't go for any frameworks :)
Hi, I'm working on Leaderboard project
I'm trying to make it so my table rows have alternating background colors
thnx @NitinNair89
@Evaderei You can do it via CSS. Something like this -
tr:nth-child(odd) { /* Replace this with 'even' to affect even rows (2,4,6,...) */
background-color:orange; /* Any color you wish */
}davidespinoza sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
You're welcome @DavidEspinoza If you face difficulties in Bootstrap, let me know. I will try to help you :)
@NitinNair89 oh snap, thank you
evaderei sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
You're welcome @Evaderei :)
thoughts?
it's good enough for me haha
alrighty, onward to the next exercise
@Evaderei Maybe center the serial numbers and add some padding for the contents. :)
https://codepen.io/atharvajava/pen/YNRBBa?editors=0010 i dont get it what i messed up but when i do multiple calculation this doesnt come riight ?
<div class="container-fluid">
<div class="row"><div class="col-xs-12">
<div class="well">
</div>
</div>
</div>
<div class="row"><div class="col-xs-12">
<div class="well">
</div>
</div>
</div>
am stuck,how do i create a wellin the above code
http://codepen.io/danraybernard/pen/GrLLBL
I was having trouble trying to make my anchor links smooth scroll. I found some code from searching google and it works, but I'm having a really hard time understanding why. Can someone help explain the jQuery code?
I was having trouble trying to make my anchor links smooth scroll. I found some code from searching google and it works, but I'm having a really hard time understanding why. Can someone help explain the jQuery code?
particularly the weird mountain looking symbols here
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname)
It's Regular Expressions @danraybernard
@zeddmacharia Did you import necessary Bootstrap files?
@atharvajava Your multiplication is working fine
@NitinNair89 thanks! I'll have to look into it and try to see if I can understand more but now I know what to search for
danraybernard sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
welcome
@NitinNair89 which bootstrap files
the CSS and JS files @zeddmacharia
Anyone still here?
@NitinNair89 no i did not,this is my first front end development project,how do i do that
if you are using codepen, then go to the pen settings window and you can add from there @zeddmacharia
@NitinNair89 it is i know the thing that is not working fine is suppose i do 10 * 5 / 5 it gives some weired answer similarly when i do 10+5-5 it gives weired answer it is working only when i am not changing between operators
maybe something to do with the way you store and display values.
@NitinNair89 well i guess i am just not getting it what the shit is going on here ;-; i am stuck here since a week
i think i ll just rewrite all the jquery
:P
On my portfolio project, the
background-size: cover; stopped working. For no discernable reason...
how do i make my image smaller
@NitinNair89 http://codepen.io/macharia95/pen/PWvPLa
@zeddmacharia write you CSS inside CSS window only. Don't write it inside HTML window. And the property name is
width not width-size
img{
width: 20px;
}
Please check
Hello everyone! I have problem with google chrome. My local weather pen works in IE and Firefox, but it doesn't work in Chrome. Someone told me that the reason is the difference between http and https. But i don't think so. What do you say? http://codepen.io/zhann1982/pen/XpGgXJ
check developer console of google chrome
@NitinNair89 yes! :(
@NitinNair89 The problem is https
@NitinNair89 Any suggestions how to fix it?
@NitinNair89 i finally got it..thanx for the help#
zeddmacharia sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 395 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Welcome @zeddmacharia :)
@zhann1982 check the crossorigin.me website
@zhann1982 check the crossorigin.me website
whats up guys, need some help with text editors!
@NitinNair89 hi!
Hi @IsaakNazar :)
@NitinNair89 where should i use crossorigin.me. In the address of codepen or in url for json?
how do i make it so pressing enter on a form doesnt go anywhere?
@zhann1982 From their website - "When you need to access a resource from a website that isn't CORS-enabled, append 'http://crossorigin.me' to the beginning of that URL"
@NitinNair89 Can I ask U, every html files must be named "index"?
@IsaakNazar No, it depends on the dev
@Evaderei Why you need form? Remove the
action attribute
just keep <form> tag
Essentially
$("#formId").submit(function(e){
return false;
});
Idk if that's what you were asking
@NitinNair89 I've watched on Youtube, and every html files must be named index, coz with index files starts the main page of browsers
@aboorde thanks, workedl ike a charm
evaderei sends brownie points to @aboorde :sparkles: :thumbsup: :sparkles:
:cookie: 438 | @aboorde |http://www.freecodecamp.com/aboorde
@IsaakNazar As i said before, it depends on the Developer and how the server handles it. I can serve HTML files with a name other than index.html in my web server. It's not a mandate, but rather a practice.
how do i center my p element
@NitinNair89 http://codepen.io/macharia95/pen/PWvPLa how do i center my p element
@NitinNair89 ok :+1:
@NitinNair89 ive seen the error
@NitinNair89 i used crossorigin.me and dev console is empty. But my navigator.geolocation didn't work out.
@zeddmacharia Your <p> is already centered with the "text-center" class.
@zhann1982 Oh, not sure.
@zhann1982 Oh, not sure.
@NitinNair89 My pen works in IE and Firefox. Is it ok if I send my pen as finished to FCC? Or should I first fix the problem?
it's ok if you send :)
Ok @NitinNair89 thank you!
zhann1982 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
:)
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: How to create JSON file to be available? How to make a link on him?
My code is next (not work):
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: How to create JSON file to be available? How to make a link on him?
My code is next (not work):
$(document).ready(function() {
$(".nextButton").on("click", function(){
$.getJSON("http://api.forismatic.com/api/1.0/", function(json) {
$(".quoteText").html(JSON.stringify(json));
}); }); });
@myteststudy Try this http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en
@shawon1165 I already seen this, but i didn't know what to do with this. In freecodecamp courses tell nothing about it.
@myteststudy You have to read their documentation on how to use API
@NitinNair89 please give me a link
@myteststudy http://forismatic.com/en/api/
@NitinNair89 thank you
myteststudy sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Greetings, can I get anyone to test drive my local weather app?
@WiseKodama in would but none of them work on my phine. Something funny with location settings or something. You can try asking on the FCC earth fb page
@Finagl3 Ok, I'll see if anyone else wants to
@NitinNair89 I don't get it, where I must use "getQuote" method? Instead a "getJSON" method?
And how to set parameters: "format", "key", "lang" and other.
And how to set parameters: "format", "key", "lang" and other.
@myteststudy your URL should be something like this - http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote similar to what @shawon1165 said
@NitinNair89 Like this?
$(document).ready(function() {
$(".nextButton").on("click", function(){
$.getQuote(" http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote", function(json) {
$(".quoteText").html(JSON.stringify(json));
}); }); });
yes
Hi there guys. is there a guide with basic commands? I'm running parity on MacOS, but it has stopped, so i would like to run it manually also know what's the problem
Does anyone think they could help me with the simon says project? I need to figure out how to stop the overlapped part of my buttons from being pressable/ interfering with the "face" part of my simon says. http://codepen.io/Lazypterodactyl/pen/xgMYBV
Nvm Got it
good midday everyone, I have a question, I'm starting with the twitch tv api and I checked the example, but if I click on a link in the example, all I get is a blank screen, is that only me? Or do other people have the same problem?
I'm can run it fine. You might want to change browsers. Which one are you using?
@lawfets no, I think everybody has this problem, it's because of Codepen sandboxing
@fortMaximus ah, ok, thx
lawfets sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 423 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
@lazypterodactyl were you talking to me? sorry, I was afk for a while
Hello, I'm working on the alarm clock and want to use an audio file. Is there a good audio file hosting website anyone can suggest?
@lawfets Yeah, it's all cool
Few questions regarding my code:
http://plnkr.co/edit/KDjzNtEIwjOrySZgotb5?
http://plnkr.co/edit/KDjzNtEIwjOrySZgotb5?
- Why if I write the ul.textContent = ''; outside the eventListener it won't reset the ul element?
- How I make the li to update just last li row and not all the li elements
- How I bind the eventListener to run before the function as right now it starts to listen from the second submit-button click .
- How I make it to work inside an object
Thanks!!
Anybody done with the Tic Tac Game? If so, are there any good resources for Minimax?
hey guys can you check if my tic tac toe is working? http://codepen.io/EvanDCP18/full/PWvddL/
Hi, can anyone advice me on why my second . getJSON doesn't run when loading the page? I can get it to run just fine by binding it to a button (which you can see is commented out for now), but I want the code to run when loading the page. I am sure it is a matter of some stupidly simple rule I ignored
http://codepen.io/achudoz/pen/bgJQLx?editors=1011
http://codepen.io/achudoz/pen/bgJQLx?editors=1011
@EvanDCP it seems to work. One minor thing i noticed is that the game does not announce a draw
@lazypterodactyl thx
lawfets sends brownie points to @lazypterodactyl :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @lazypterodactyl |http://www.freecodecamp.com/lazypterodactyl
@EvanDCP it works
@EvanDCP also when a turn is made, the buttons change size. It would look much better with fixed-size buttons
@achudoz how come the buttons change size? O.o oh the draw thing! thanks man
evandcp sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @achudoz |http://www.freecodecamp.com/achudoz
@EvanDCP the button changes to accomodate the character in it and since #, X and 0 all have different widths, the button too changes its size to mach the character. To put it plainly, when I make a move as X, the button shrinks by about 5px
@achudoz I see, that's weird tho because I've put all buttons size 40px. They are supposed to all have the same height/width/size :/
@EvanDCP when I run it in editor view, the buttons stay fixed. In full view however, they are resizing like crazy
which is strange...
what about now? can you check? I've done some changes http://codepen.io/EvanDCP18/full/PWvddL/
now it looks great. button resizing is gone
@achudoz awesome! thanks man
evandcp sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:warning: evandcp already gave achudoz points
:thumbsup:
can anyone help me get this SCSS working? https://jsfiddle.net/sp5xhmoo/4/
Hi guys
how many here felt that json and ajax is more of spoon feeding and very less of learning
the only thing i did was copy and paste and zero learning
@freecodecamp if you are seeing this ,change it
@nani554 well yeah that is exactly what it is. It was a big step from that to the first intermediate front-end project. But thanks to it being like that I really got used to googling stuff and not just having it served to me from here. Don't know if that is intentional, but certainly was beneficial in the end.
achudoz sends brownie points to @nani554 :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @nani554 |http://www.freecodecamp.com/nani554
Anyone here who has done the wiki viewer?
can someone help me debug this scss?
$weights: 100,200,300,400,500,600,700,800;
$formats: 'opentype','opentype','opentype','truetype',
'opentype','truetype','opentype','opentype';
$fonts: 'Montserrat-Hairline.otf','Montserrat-UltraLight.otf','Montserrat-Light.otf',
'Montserrat-Regular.ttf','Montserrat-SemiBold.otf','Montserrat-Bold.ttf',
'Montserrat-ExtraBold.otf','Montserrat-Black.otf';
@mixin fontFace($weight) {
$i: index($weight, $weights);
@font-face {
font-family: "Montserrat";
src: url("static/fonts/" + nth($fonts, $i)) format(nth($formats, $i));
font-weight: $weight;
}
}using it like this:
@import './montserrat.scss'
@include fontFace(600)
@include fontFace(400)I get this error:
error in ./src/App.vue
Module build failed:
undefined
^
Media query expression must begin with '('
Hello everyone!
I'm working on an exercise: "Build a Random Quote Machine" (https://www.freecodecamp.com/challenges/build-a-random-quote-machine)
I already know that I must work with http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en
but I still don't get what to do with this. How take quote and input it by click the button.
I'm working on an exercise: "Build a Random Quote Machine" (https://www.freecodecamp.com/challenges/build-a-random-quote-machine)
I already know that I must work with http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en
but I still don't get what to do with this. How take quote and input it by click the button.
$(document).ready(function() {
$(".nextButton").on("click", function(){
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) {
$(".quoteText").html(json);
}); }); });
for anyone that is interested, I got the SCSS working.
index(list, item) not index(item, list), and semicolons after include and import statements :)
@myteststudy can I see the full code (code pen)
@WiseKodama yes
@fortMaximus http://codepen.io/student44/pen/dNaXNJ?editors=1010
@myteststudy if you look into the console, you're getting this error:
XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
Idk what exactly is causing it, but maybe it's because the API is loaded over
HTTP and the tweet button uses HTTPS
so you need to find a Random Quote API that works over HTTPS
I used this one in my project quotesondesign, so my suggestion is to use it
@fortMaximus I don't understand how to use it. I still don't get how take quote and input it by click the button.
Quick question for you guys. If Im using an article tag in my portfolio, do I need to use the p tag as well, or do I leave it out?
@myteststudy what is it that you understand how to use it? You're already doing it the right way in your code
@DeanHollstrom what do you mean by an article tag?
@fortMaximus
{
"batchcomplete": "",
"continue": {
"grncontinue": "0.115760904205|0.115761386548|41479409|0",
"continue": "grncontinue||"
},
"query": {
"pages": {
"15401469": {
"pageid": 15401469,
"ns": 0,
"title": "Colibi River",
"extract": "The Colibi River is a tributary of the Runcu River in Romania...."
}
}
}
"batchcomplete": "",
"continue": {
"grncontinue": "0.115760904205|0.115761386548|41479409|0",
"continue": "grncontinue||"
},
"query": {
"pages": {
"15401469": {
"pageid": 15401469,
"ns": 0,
"title": "Colibi River",
"extract": "The Colibi River is a tributary of the Runcu River in Romania...."
}
}
}
this is my json response
how would I reach extract?
In html5, the <article> element @fortMaximus
@DeanHollstrom oh, haven't used it before. You can research how it's used
@fortMaximus I know I can research it, just thought it might be quicker to ask here...
@WiseKodama
response.15401469.extract, I think
yeah but I cant get to the number
@WiseKodama full code (codepen)
the return from my json is in several levels
I would have to know the number in order to reach extract
works like this
@fortMaximus I don't know what do next. I delete 'tweet button' but my code doesn't work.
@WiseKodama ur for..in to iterate on ur object..
or Object.keys to create a list of keys(array) and iterate that
or Object.keys to create a list of keys(array) and iterate that
There is no way to access the extracts
@WiseKodama you can use the
opensearch action instead of query, I believe it's better suited for this challenge
I can go apiResults.query.pages. but then I would need to know the pageid
This is for the random article @fortMaximus
oh
why do you need to access it?
to grab the content of it
if you think this is required, it's not, you need to only open the link in a new tab
I know. but if everyone did everything on the web just so it would work, then it would be very very very ugly
hello guys, I have a question. Do I have to completed a challenge with asterisk (or whatever this * called for) before I could move to the next lesson?
I want to have my personal touch on it
@myteststudy no, don't delete the twitter button, just use a different random quotes API
that uses https
soo did u check
read somewhere ... "google is ur best friend" @WiseKodama
for..in syntax ?? or Object.keys ??read somewhere ... "google is ur best friend" @WiseKodama
hmmm then why is everyone else helping other people? if everything is on google?
like I completed the Tribute Page challenge already, then should I take a Personal Portfolio Webpage or move to Basic Javascript lesson first?
@fortMaximus OK, how to get a quote on the screen.
@mfthrmdhn yes * marked challanges are a must
cuz search is a skill U must master if u wanna be a coder
no1 gonna be here forever to do ur job
no1 gonna be here forever to do ur job
ok then so you are telling me you never asked a question on this chat room?
@mfthrmdhn Do as you like. Eventually you have to do both if you want the certificate.
@myteststudy you're already doing it right
$(#"element-id").html();
FIRST thing u should do is investigate things on ur own... and only ask here if u get stuck
exactly
that is why I am asking
already gave u what "instruction" u should check
so.. go ahead.. find info about that
so.. go ahead.. find info about that
@myteststudy but you also need to use the right selectors to select the data you need to display on the page from the returned object
But +canali[i] does not works...
var canali = ["freecodecamp","streamerhouse","monstercat","nintendo"];
$.each(canali, function(){
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/streams/"+canali[i]+"?",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data){
var obj = data.stream;
$("#riga").append(obj.game)
}
})
})
@fortMaximus I understand but do not know how to implement. Tell me where to read about it?
whats
i ?? where is declared ? what values it have? @Gentarozzo
@myteststudy do you mean this: https://quotesondesign.com/api-v4-0/
@moigithub it's i = 0 ... like in a for cycle
@moigithub that worked flawlessly! thank you
wisekodama sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2705 | @moigithub |http://www.freecodecamp.com/moigithub
@Gentarozzo soo on ur code u have that line ??
where it increase?? or always gonna be = 0 ?
i =0where it increase?? or always gonna be = 0 ?
No need for the atittude btw
:+1: :clap: well done @WiseKodama
@moigithub you're right... I'm trying to increase it... but having problem with it, that's where I'm stuck...
@moigithub var canali = ["freecodecamp","streamerhouse","monstercat","nintendo"];
$.each(canali, function(){
var i = 0;
i++;
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/streams/"+canali[i]+"",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data){
var obj = data.stream;
$("#riga").append(obj.game)
}
})
})
@Gentarozzo
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
});http://api.jquery.com/jquery.each/ << example from here
@WiseKodama no need for all that ajax call to just get a random wiki page. i would just use for that an <a> tag with a href pointing to https://en.wikipedia.org/wiki/Special:Random
@Gentarozzo if u declare i=0 inside ur $.each
everytime it loops back.. gonna reset to 0
but if u check the syntax.. on the function callback.. it have its own index tracker.. so u no need to declare a extra i varaible
everytime it loops back.. gonna reset to 0
but if u check the syntax.. on the function callback.. it have its own index tracker.. so u no need to declare a extra i varaible
@moigithub ok declared outside and it seems to work with the i... now I'm checking where's the other index you're talking about
@sorinr Hi and everybody hi too
@fortMaximus hi
Hey guys, I'm getting close to diving into the last 4 front end projects - starting with the calculator. Question: Did anybody here take the time to learn an organizational framework prior to doing these? My projects up until this point have been pretty sloppy... I've stepped away and took Udacity's JS Design Patterns course, so I have a little bit of knowledge now about MVC organization and they also touched on knockout and backbone. I know Angular and the library React are kinda regarded as the big dogs... I haven't exposed myself to either one yet at this point. Thoughts?
@moigithub $.each(canali, function(i){
i++;
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/streams/"+canali[i],
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data){
var obj = data.stream;
$("#riga").append(obj.game)
}
})
})
i++;
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/streams/"+canali[i],
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data){
var obj = data.stream;
$("#riga").append(obj.game)
}
})
})
each jquery function will increase the index for u (that functionality already comes pre-packed) @Gentarozzo
so u can omit i++ (if u gonna use its callback index)
so u can omit i++ (if u gonna use its callback index)
@moigithub yeah thanks a lot... love it, when somebody just give me some hints to work on
gentarozzo sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2706 | @moigithub |http://www.freecodecamp.com/moigithub
@bacarlino to accomplish this 4 projects u are free to use any framework be it css or js u want. so, just go. if u stuck place a Q in one of the fcc chats
@fortMaximus thanks a lot
myteststudy sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 428 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
I have a question on this code, guys.
I apologize for breaking any house rules ahead of time
my question essentially is: why is condition 1 not satisfied?
I compared my answer to the correct one. If i omit the "else { return true; }" and put in "return true;" right before I close my function, then my code is on the money.
Would anyone be able to assist me when you have a minute?
Thank you.
@Styrene that's because returns inside if-else block will stop the loop and function execution at the first iteration of loop
@Styrene returning false for non existent letter is good because no need of further checking you have to eventually return false
@Styrene and if you get out of the loop successully after all of the iterations it means all the letters exist that's why js engine can execute the return true right before of the function
I have a dumb question about using pen.io
I'm trying to style a div using css. do I still need style brackets somewhere, or should I just be able to call the class in the css window?
<div class="background">
<h1 class="text-primary">Ada Lovelace</h1></div>
<h1 class="text-primary">Ada Lovelace</h1></div>
I have this. can I just use .background: red;
thanks, @ghulamshabir
based on what you said, could you elaborate on this one as well?
based on what you said, could you elaborate on this one as well?
styrene sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
:star2: 1861 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
I know Im probably missing something really simple but my escape sequences arent working :worried:
var myStr = 'FirstLine \r \ SecondLine\ \r ThirdLine'; // Change this line
@DeanHollstrom https://gitter.im/FreeCodeCamp/HelpJavaScript
@heyDante thanks
deanhollstrom sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @heydante |http://www.freecodecamp.com/heydante
Hello everyone, I would appriciate it if you take a look at my portfolio profile and give me some feedback, its on the current git rep:
https://github.com/ghaithAqidi/myPortfolio
Thanks a lot! :)
https://github.com/ghaithAqidi/myPortfolio
Thanks a lot! :)
@Styrene what don't you understand ? indexOf ? it searches given value in the array/string and returns it's index if it finds it otherwise -1 is returned meaning that not found
het can anyone help me with a quetion for handlebars.js
Hey there! Will someone might look over my code? http://codepen.io/mattiheubner/full/jyoZYm/
@mattiheubner looks pretty good, but to me it look as a copy from the challenge example ;)
@ghaithAqidi that´s somewhat true. I applied the same look but didn´t looked at the example code. I am sill having some flaws in it. For example I´d like to have some space between the picture and the text below
@mattiheubner you can do that by adding a class for example class=“exampleClass” and give it the current css .exampleClass{margin-bottom: 30px;}
Hi Guys, A newbie here. I'm trying to figure out how to use an image from my google drive in a pen.
Can you help me?
@mattiheubner and by the way Steve jobs was also responsible for a lot of innovation in Pixar company (toy story etc…) ;)
Hi @tensax31 you'll need to use something like imgur.com and then use the link to the image from there in your HTML
Thank you very much @moi238 . Theres a lot more for me to learn than I thought.
tensax31 sends brownie points to @moi238 :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @moi238 |http://www.freecodecamp.com/moi238
Hello everyone!
I'm working on an exercise: "Build a Random Quote Machine" (https://www.freecodecamp.com/challenges/build-a-random-quote-machine)
Please help. I don't understand why new quote does not replace the placeholder and does not change?
I'm working on an exercise: "Build a Random Quote Machine" (https://www.freecodecamp.com/challenges/build-a-random-quote-machine)
Please help. I don't understand why new quote does not replace the placeholder and does not change?
$(document).ready(function() {
$(".nextButton").on("click", function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
$(".quoteText").append(a[0].content + "<p>— " + a[0].title + "</p>")
}); }); });
@tensax31 no problem it took me a while to work that one out 😃
@myteststudy codepen please
@fortMaximus http://codepen.io/student44/pen/dNaXNJ?editors=1010
@myteststudy it's because you're using
append, you need to use .html() like you were doing before
append():
The append() method inserts specified content at the end of the selected elements.
html():
The html() method sets or returns the content (innerHTML) of the selected elements.
@myteststudy With that API, the request gets cached. Disable cache for getJSON so you get a different quote every time:
$.ajaxSetup({cache: false});
Hi, why is this not loging "error" when i put spaces or write nothing?
if (this.trim().length() > 0) {
console.log(this);
} else {
console.log("error");
}
@charlesdarkwind cause length is not a function
@charlesdarkwind you shouldnt use it like this length(), use it without the braces
@fortMaximus thanks , now I see. But it still not change.
myteststudy sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 429 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
yea, @myteststudy I saw that, I was checking it. Check Tyler Moeller advice
@LazyDesigner thanks, i was cheking at a java doc :s
charlesdarkwind sends brownie points to @lazydesigner :sparkles: :thumbsup: :sparkles:
:warning: @lazydesigner's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
@TylerMoeller @fortMaximus thanks , now it works. But I do not know "ajaxSetup" method. Can I somehow do without him?
myteststudy sends brownie points to @tylermoeller and @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: myteststudy already gave fortmaximus points
:star2: 1494 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@myteststudy if you add
&_jsonp=? at the end of the URL, instead of &callback=? it works too
Though I'm not sure why
@myteststudy You can use the second code example in the documentation instead: https://quotesondesign.com/api-v4-0/
getJSON is just a shorthand version of ajax - ajaxsetup lets you specify more options if you still prefer not to use ajax.
getJSON is just a shorthand version of ajax - ajaxsetup lets you specify more options if you still prefer not to use ajax.
Notice how they have
cache: false in that second code example
@fortMaximus just add "$.ajaxSetup({cache: false});" intomy code
@TylerMoeller @myteststudy hi guys ,i feel json and ajax section is just copy and paste thing no learning at all ,even @quincy felt the same ,could you guys please tell me what do you think
is it usefull for beginners
@myteststudy I suppose you could also change this parameter in the URL to a number larger than 1
filter[posts_per_page]=1 and then grab a random one.
@nani554 Most of the challenges, aside from the algorithms, are copy/paste. I found it necessary to read a lot and practice every time a new concept was introduced.
i have spoken to Fcc developer ,he said he made improvement and gave me a link for another fcc-beta version but even it is same
Good to know that they are people who think alike on this thing@tyler
@TylerMoeller
Hey everyone i want to ask if i made photo gallery page do i need to do all the photos with handlebars.js template
@fortMaximus @TylerMoeller thank you again
myteststudy sends brownie points to @fortmaximus and @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: myteststudy already gave fortmaximus points
:warning: myteststudy already gave tylermoeller points
@nani554 Are you in need of help with ajax/getJSON?
yeah i need some basics
@TylerMoeller
@nani554 getJSON is shorthand for ajax. They both do the same thing. At a basic level, they get an object and store it in a variable for you.
anyone ?
@qnidageto You don't need handlebars.js to create a photo gallery
@nani554 You can then use that object as desired in your code.
and that variable is called as object
@TylerMoeller
eg: ```
@nani554 That variable refers to that object, yes.
var sure = {
first:"what",
second:2
}
@TylerMoeller yea i know but ive been doing a course on coursera and now the subject is handebars and they say its better composed script and can help me in the future with web apps to seperate the structure from the contents and i read about it and i still dont understand it 100 % thats why i just ask if i want to use it i need to make it for every single photo
@nani554 Visit this URL in your browser: http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=
You will see an object. getJSON/ajax will store that object for you in a variable called
You will see an object. getJSON/ajax will store that object for you in a variable called
data if you do this:$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(data) {
console.log(data); // the data will be logged to the console
});
@qnidageto This forum is for Free Code Camp Front-End Development projects. Sorry, I can't help you with coursera
ok thanks anyway
simple question i guess: how is this an array if there is a key and a value? Shouldnt it be an object?
var currWeather = new Array();
currWeather['currTemp'] = Math.round(data.main.temp);
currWeather['description'] = data.weather[0].description;
currWeather['icon'] = "http://openweathermap.org/img/w/"+data.weather[0].icon+".png";
currWeather['cloudiness'] = data.clouds.all;
currWeather['city'] = data.name;
@charlesdarkwind Maybe not such a simple answer, but an array is an object :)
Arrays can contain JSON and JSON can contain arrays
To simplify things, I'm referring to JSON as data between curly braces {} and arrays as data between brackets []
@charlesdarkwind yes u r right its a object in javascript but in other languages its an array,bcoz js doesnt support "string index" as it only supports numbered index for arrays
string index is called as object so its better define it as a object
In that Quotes API, for example, they return this:
[{
"ID": 78,
"title": "Chris Bangle",
"content": "<p>Designers think everything done by someone else is awful, and that they could do it better themselves, which explains why I designed my own living room carpet, I suppose. <\/p>\n",
"link": "https:\/\/quotesondesign.com\/chris-bangle\/"
}]If you set the data variable equal to it, you would access the title as data[0].title
@TylerMoeller i have opened it and found a object
so im not sure i understand why it uses the Array keyword and not just declare a json object, im pretty mindfuck
@nani554 Yes, getJSON grabs that object for you and lets you access it. Not sure if that helps better understand what getJSON is doing.
@charlesdarkwind Not sure where you're getting that code, but it often can be confusing trying to understand someone else's thought process. This is why we add code comments.
just got to the Tribute Page challenge after starting FCC a few days ago and I feel like a noob
From the looks of it, they're creating an array to store the data. They could use a JSON object instead, but there's no way to know why they chose to do it that way unless you talk to them :) there are lots of ways to get from point A to point B with code.
i think i need to use ide and use it to understand @TylerMoeller yler
any advice on starting out with the Tribute Page? or do I just have to go back and review the previous html & css & bootstrap lessons
@oooooooowen , I'm in the same place feeling the same way
@nani554 Yes, that is a good way to practice it. Create a new codepen and start playing around with an API. Ask questions here if you get stuck.
i have made a cheatsheet (A pretty basic one) for flexbox CSS but i am not sure that i have learnt it.How can i prove to myself and satisfy myself.That is a really bad feeling because i saw several videos.Did that froggyflexbox game completed.What can i do?
@TylerMoeller
@TylerMoeller
@TylerMoeller thanks
nani554 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1495 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@tensax31 FCC seems pretty insistent on not looking at other people's examples for their code so I feel like I've quickly reached an impasse haha
@oooooooowen and @tensax31 At this point, you're expected to spend around 50 hours building on the basic bootstrap, CSS, and HTML you have learned so far to build the tribute page and a basic portfolio page. That will take some reading and practicing - I'd recommend starting with the Bootstrap documentation. Read all of it, copy/paste the code samples and manipulate the code to see what happens.
@charlesdarkwind are you there
yes
iam trying to find the resource where i have learned about that index array
@TylerMoeller gotcha
wait
@TylerMoeller that 50 hrs allocation makes more sense now
Yeah, it's time to roll up your sleeves and have some fun :)
😬
hey everyone
just wanted to confirm before I dive back into FCC is this the place where I can ask questions if I get stuck
@TylerMoeller can you please answer my query if possible.
@TylerMoeller aah ok, I see, so if I want to declare an array that will have objects(with 3 keys each) in it, then I would just create an array the same way?
@MohammadHasham May I ask why you are asking me about flexbox?
Ok I'm going to assume yes???
@Thrage1 surely this is one of the place ,note: this is not the only place!
@Thrage1 Yes, this is one of many chat rooms to ask for help
@nani554 thanks.
thrage1 sends brownie points to @nani554 :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @nani554 |http://www.freecodecamp.com/nani554
@TylerMoeller thanks
how to write jqueries in codepen
@charlesdarkwind Yes, you could definitely do that
@TylerMoeller thanks. Yup thats how I found this chat room.
thrage1 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1496 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@Pavanpavik u could do it using keyboard
it works
:) lol
jokes apart yes yu can write
@Pavanpavik Maybe this will help: https://blog.codepen.io/documentation/editor/using-javascript-libraries/
just by adding external link in settings
hey i'm doing the first front end project (tribute page) and want to include an image. Can i use any image i find on the web for this? I'm unsure bc of copyright etc since its not a real website.
no problem
@TylerMoeller how come you are soo fast and precise
@nani554 It's google not me :)
@nusli you are not prince george ,to file a case against and sue u ,no one cares just do it
@TylerMoeller iam learning angularjs now a days ,i found two types of codes one goes like this
@nusli This is a very helpful list that I use for photography/images/graphics and they sort it by license so you can be sure: https://github.com/neutraltone/awesome-stock-resources
Hi guys, this is a twitter bot that I made using twitter API and node.js.
https://twitter.com/kingsofeurope7
Any feedback would be very helpful.
If you follow it, it follows you back.
If you tweet to it, it retweets your tweet.
It looks for new tweets on selected accounts on twitter and tweets them.
https://twitter.com/kingsofeurope7
Any feedback would be very helpful.
If you follow it, it follows you back.
If you tweet to it, it retweets your tweet.
It looks for new tweets on selected accounts on twitter and tweets them.
@TylerMoeller i thought that you have vast exp. in web dev so maybe you could help me somehow
@MohammadHasham If you need help with a Free Code Camp front-end project, I'm happy to see what I can do
No that was kind of general thing not directly related to FCC projects @TylerMoeller
@MohammadHasham shoot ur question who know he might answer or
show u the right direction towards ur answer
show u the right direction towards ur answer
i have made a cheatsheet (A pretty basic one) for flexbox CSS but i am not sure that i have learnt it.How can i prove to myself and satisfy myself.That is a really bad feeling because i saw several videos.Did that froggyflexbox game completed.What can i do?
@nani554
@nani554
do i need to make or build something else
@MohammadHasham I don't know of any flexbox tests or certification exams that can help you prove your knowledge. Best advice I can give is to try and build things. If you see a nice design somewhere on the web, try to emulate it by using flexbox.
@TylerMoeller Thanks.Okay i'll try that.
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1497 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@MohammadHasham Uplabs has a series on "Can you code this UI Concept?" sometimes there are fun things to try, for example: https://stories.uplabs.com/can-you-code-this-design-concept-efe0132b9744
Dribbble is good to browse through as well
@TylerMoeller i'll surely give that a try.Thanks once again.
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave tylermoeller points
Hey guys,
so this is pretty basic but can't seem to figure it out. I use a query .click() method to show some text when you click the button, but for some reason the text is already there once I load the page.
http://codepen.io/svenhendrikx/pen/qRgdvR
@TylerMoeller i found that very interesting and excited to start doing one of that project which you have given to mohammed
Hi, I had some problems with geolocation before. It should be ok now, but can anyone please just check if it works and looks properly?
http://codepen.io/achudoz/full/bgJQLx/
http://codepen.io/achudoz/full/bgJQLx/
@johnnydemol use this:
$("#buttonID").on("click", function() {
*do something you want the button to do*
});
anyone have an idea of how i could, best way i could describe it, do what mouseover does but only whilst holding mousedown in react. I am building the game of life project and thought it would be a nice thing to have.
Hello Campers! I just started my tribute page and am having trouble centering an image with bootstrap. I have tried center-block with img-responsive andit is still not centering properly. Can anyone give me some tips?
@achudoz thanks but that leads to another problem. The text only appears for a second and then disappears. When I use a div as button it works.
johnnydemol sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @achudoz |http://www.freecodecamp.com/achudoz
@NRD89 use its grid system
@NRD89 text-center
@NRD89 did you add bootstrap 3 instead of 4?
Hello, Campers! I've got a problem: when i try to reduce a scale in my browser so to imitate a large screen display, my picture drags to the left side, but i want it to be in the center. Here's the link: http://codepen.io/RAYDENFilipp/pen/xgNErr
@jtan3 i think it is 4
@jtan3 its the default bootstrap in CodePen
row
col-5
col-2
img
col-5
/row
@NRD89 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css add this instead of the 4
@RAYDENFilipp need margin: auto on div holding the figure and img elements the col-12 one
hi can help me, i try to put css in this project in codepen.io but i does't have changes http://codepen.io/hermesalexis1/pen/VPORMj/?editors=1100
my css doesn't work
please help)
<style>
id
orange-text {color: orange;}
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
<h1 id="orange-text">
</style>
<h1 class="pink-text blue-text">Hello World!</h1>
Give your h1 element the id of orange-text.
what i missing ?
@Brayn7 can you explain more, pls?
@NRD89 @RAYDENFilipp or define a width ie: the image gonna be "col-md-8"
since bootstrap uses a 12 col system.. 4 left.. (from 8) push 2 on left.. and will be centered
since bootstrap uses a 12 col system.. 4 left.. (from 8) push 2 on left.. and will be centered
@iatomat pls send me the challenge link.
@jtan3 thanks man, that worked!
nrd89 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @jtan3 |http://www.freecodecamp.com/jtan3
@hermesalexis its working fine for me
<div class="row">
<img class="col-md-8 offset-md-2" src="....">
</div>
@iatomat h1 ending tag
@iatomat html: <h1 id="">..... css: #id-name {}
@jtan3 why didn't centering work with Bootstrap 4?
@RAYDENFilipp you have and html parent that has 3 children in it a figure element, img element, and a figcaption element in it yes?
@iatomat <style>
orange-text {color: orange;}
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
@Brayn7 yes. I tried not to use css directly. I even tried without bootstrap
@RAYDENFilipp that element, the one with the mentioned elements and also with the class col-xs-12, sits inside an element that is wider. so easy fix is to make this div have a css style margin: auto
@RAYDENFilipp i can private message if you need more info
@Brayn7 that would be great
@NRD89 i think its too new or its codepen's fault
Do you have to make a framework like bootstrap or need to understand it's in depth css coding to become a successful front end dev.? or it's only that you should know how to use frameworks not how to make them for your own?
msaif tnx a lottt!!!!
@iatomat Welcome!
@achudoz thanks. The reason why it didn't work was because the button was nested within form tags. Not sure why that would cause a problem though
johnnydemol sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:warning: johnnydemol already gave achudoz points
@johnnydemol yeah me neither. but when I removed them, it started to work. Laso it did work before but only after two clicks (it disappeared after the first click)... weird
I need some help with the "Escape Sequences in Strings" lesson I took a break for a month and now I'm not too sure what it's asking haha
@nani554 share one when complete - would like to check it out. I may build one this weekend too if I get the time.
Besides my spaghetti code, does someone have a clue why the pictures are so small instead of the 100%height I defined :<? http://codepen.io/blackioo/pen/JEVKRG
v
Hey Guys, anybody knows how to add Weather images to the weather app?
@Blackioo height 100% does not really work with CSS like width 100%
you could use height:100vh
and vh is like … viewheight or something?
although support for that might not be 100% in all browsers still
yeah
ah ok
Thx @nawrockp
blackioo sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @nawrockp |http://www.freecodecamp.com/nawrockp
@Blackioo seems support is better recently : http://caniuse.com/#feat=viewport-units
hello everyone! i'm wondering how i make a "contact" button scroll down to the end of my cite to my contact section? basically i want it to be like the example
thank you
there's the example page and when you press contact it goes all the way down for you to fill out a form
i have never done this before so i don't know the exact code i should look up
and my google searches have been useless
@chelseas9210 I just checked out the codepen for that and it seems to be using this: https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
ok i will check it out
@chelseas9210 although how they got that to work in codepen I dont know
awesome! that's exactly what i'm looking for thank you @nawrockp
chelseas9210 sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @nawrockp |http://www.freecodecamp.com/nawrockp
well if that's not that then nevermind thats not what i'm looking for but still thank you
@chelseas9210 actually the code that makes it scroll seems to be custom, although it requires the jQuery easing plugin. you can find the code snippet at the end of the javscript
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {$('body').on('click', 'a.scrollable', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top},1500,'easeInOutExpo');
event.preventDefault();
});
});
$(function() {$('body').on('click', 'a.scrollable', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top},1500,'easeInOutExpo');
event.preventDefault();
});
});
hey im just curious, how long does it take people to complete the simon challenge
@nawcrockp sorry that was me! Deleted the post once I saw it had just been asked. I'm still new to this so not really sure how to make that work. @chelseas9210 any luck?
I found this but the 'advanced' scares me https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
@ArashDai The simon challenge is pretty detailed, since you have many buttons and the game can be in many different "states". Also the styling was a bit of a challenge for me, since I tried to do it all with CSS
@zgarsh this might make it a bit more simple
seems you need jquery and bootstrap.js, both of which you can add via codepen
@zgarsh you wont be able to add the custom attributes to the body element in codepen though, so you would have to make another element the scrollable area
@nawrockp Thanks! This looks much friendlier. Would you recommend using a giant div instead of the body as the scrollable area?
zgarsh sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @nawrockp |http://www.freecodecamp.com/nawrockp
@zgarsh Yeah you are not going to have much of a choice in codepen since you cant change the body tag, at least AFAIK. But you could just add a div something like this and wrap the content : <div id="scrollarea" data-spy="scroll" data-target="#navbar">
@nawrockp Great. Thanks again
zgarsh sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:warning: zgarsh already gave nawrockp points
Hey Guys!
Check out my Weather App. Note: Don't use Chrome 50.0+
http://codepen.io/aps120797/full/BQXRZr
Check out my Weather App. Note: Don't use Chrome 50.0+
http://codepen.io/aps120797/full/BQXRZr
@nawrockp thanks man, I was just looking ahead in the curriculum and that challange stood out as the toughest lol
arashdai sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @nawrockp |http://www.freecodecamp.com/nawrockp
hey just wondering why is my background color cutting off? http://codepen.io/mike93og/pen/pRmmrP
anyone?
@mike93og93 you've only assigned your background-color styling to the
.container-fluid
you need to assign it to your div, but before that you need to get the link to bootstrap out of your HTML
@augmt that's the only way i've gotten it to work, do you mean put it in the head settings in codepen?
@mike93og93 yes, your links should go in pen settings and css preferably in the css section
@augmt also shouldnt the whole background (except for my quote block) show as blue? since its the main container?
@mike93og93 not exactly: in this case, only the content inside the
.container-fluid that's not already styled will be blue
if
.container-fluid were empty, then nothing would be blue
that is, unless you assigned a width and/or a height to
.container-fluid
@augmt hmmm kind of confusing... how would i make the whole background except for the column blue then?
@augmt also thanks for the help
mike93og93 sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:cookie: 437 | @augmt |http://www.freecodecamp.com/augmt
@mike93og93 you can add
body {
background-color: #4c90b1;
}to your css but that won't do anything at the moment
you'd also have to get rid of the link to bootstrap in your html content
bootstrap sets the body's background-color to white and linking to it in your html content overrides your css
@augmt so i shouldnt use bootstrap at all for this project?
@mike93og93 you can, but you should only link to bootstrap in your pen settings
Hi everybody, I have some css I am having trouble with.
<img src="https://media.giphy.com/media/wvS4BcmuoRqFi/giphy.gif" alt="">
<h1 id="mainHeader">Benedict Cumberbatch name generator</h1>
* {
font-family: verdana, sans-serif;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: auto;
}
#mainHeader {
font-size: 20px;
text-align: center;
position: relative;
top: 15%;
}
img:first-of-type {
width: 25%;
height: 300px;
position: relative;
left: 40%;
top: 20%;
}I am trying to position img:first-of-type 20% from the top, for responsive reasons, I can move it 20px form top but not 20%, anybody have suggestions?
@augmt got it thanks man, i deleted it at the top
@LeeConnelly12 i can't say if this helps, but percentages refer to the height of the containing block for
top
@augmt Thanks for replying, what I dont understand is that the header is being positioned correctly, 15% from the top, but the image is not moving when using top %, i can use left % just fine as well
leeconnelly12 sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:cookie: 438 | @augmt |http://www.freecodecamp.com/augmt
@LeeConnelly12 use position: absolute
Otherwise, with relative positioning, use margin-top: 20%
And * {height: 100%} is going to cause all sorts of headaches :) best to be a bit more specific if possible
@SkyCoder01 Yeah I meant to do html 100%, but I just fixed it, I changed the header's display to inline instead
@SkyCoder01 ty anyway appreciate it
leeconnelly12 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 241 | @skycoder01 |http://www.freecodecamp.com/skycoder01
can someone please help me debug my weather app
@aps120797 More than 50% of people on the web use chrome 50+, best to fix your weather app so it works for the majority of people out there on the web. Use https://freegeoip.net/json for location instead, or use a weather API like Dark Sky that supports HTTPS so you can use navigator.geolocation
it works properly when I run it locally but when I deployed on heroku my ajax requests dont work
I've never used heroku :(
you still might be able to help
lol
But I finished the weather app, if you can show the same problem on codepen
I have my code in that repository
I kinda went a little bigger than the spec
im using react redux
I haven't gotten to the data visualization stuff yet, don't know anything about react
Can you make it work in a gh-pages branch?
here it is on heroku
ive never used gh pages
lol
just create a branch named 'gh-pages' then go to: https://ArashDai.github.io/cityWeather
It should pick up index.html if you've set up the paths correctly
ok
has anyone here use react-redux and promises?
I really dont feel like redeploying this on gh pages for no reason
http://codepen.io/mike93og/pen/pRmmrP just wondering why is my twitter button not showing up below my author?
do i need to use a container?
or do i need to use a new column?
@ArashDai I'm just not comfortable navigating to some unknown heroku instance. Set it up on github and I can see the code before deciding to run it. All you have to do is enter 'gh-pages' in the branch text box to create a new branch. That's all there is to it.
var userName = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
for (i=0; i< userName.length;i++){
var url= 'https://wind-bow.gomix.me/twitch-api/streams/' + userName[i] + '/?callback=?';
console.log(url);
$.ajax({
url: url,
type: "GET",
dataType: "json",
success: function(twitch) {
if (twitch.stream === null) {
console.log(userName[i]);
}
else {
}
},
error: function(){
alert("Unable load page. Please try again later.");
}
});
};
@mike93og93 Because the 'pull-right' class has no effect when using v4.0 of bootstrap. Use v3.3.7 instead.
what is wrong with this code?
@bigyankarki Do you know how to view errors in your browser console?
yup
but i didnt get what it means
@SkyCoder01 i changed to 3.3.7 now the font awesome isnt working
Uncaught Error: Bootstrap tooltips require Tether
this is the error i got
It means you need to use
var before defining a variable i is not defined is the error I'm seeing
How can i make a set container div to height: 100% without the content inside overlapping
VM201 pen.js:4 Uncaught ReferenceError: i is not defined
@SkyCoder01 whoops i changed it back, but i am using bootstrap 3.37 and still not working properly
@mike93og93 Font awesome is a separate CSS file
@mike93og93 Click Settings and then click CSS - what version of bootstrap do you see?
I still see 4.0
is bootstrap updated?
Codepen changed to use some pre-release version4 with the quick add, but we learned 3.3 here at FCC
@SkyCoder01 the code is here if you want to browse it https://github.com/ArashDai/cityWeather I dont see how gh-pages is safer than heroku, but perhaps you know something I dont
hmm @SkyCoder01 bu i think i need to use 3.3 for that project
@bigyankarki No, I was referring to the issue that Watto is hitting with the twitter button and the
pull-right class.
oh :D
Your issue is different - if you're still needing help after fixing the
i is not defined
@bigyankarki Here's a hint: http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript
@SkyCoder01 ooo ok thanks i was chaning html
mike93og93 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 242 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@ArashDai I don't know what code you've deployed to heroku, I'd have to trust you. Phishing attacks are hosted there all the time and for all I know, since I can't view what you've deployed there, you could be showing up at the cafe I'm sitting at now after collecting my IP address and location on that server. With github pages, I know exactly what you're deploying. With codepen, you don't get to log data about who visits your web app.
damn my issues is because openweathermap doesnt accept https requests
its ok
dont worrk
forsure i understand
is there a way to get rid of the mixed resourse error
like loading http get requests on an https site?
That's a bit paranoid @SkyCoder01 :p but I like it lol
Mixed-content errors come from trying to use HTTP over a secure (HTTPS) connection @ArashDai
i know where the errors come from
Use all HTTPS whenever possible
I just want to knw how to get around it
well yes but this api charges $ for https requests
Then only use HTTP and pop up a warning if a user visits your web app over HTTPS
now the main div isnt centering proerly though http://codepen.io/mike93og/pen/pRmmrP
navigator.geolocation doesn't work over http, but you could use https://ipinfo.io/json or a similar service
thats the service im using
but openweathermap.org is http only https is paid
Okay, then you'll only be able to visit your web app with an HTTP address
OMG IM DUMB
https://yourwebsite/your-weather-app won't work unless you use a different Weather API like Dark Sky, Weather Underground, Apixu, etc.. that support HTTPS
http://floating-depths-82603.herokuapp.com/ gaze upon the glory of my weather app
or dont its cool im not stealing your info i promise
:)
you guys like it =)
it took me wayy too much time
any idea why my text aint centering?
@mike93og93 I'm sorry, but I think you need to spend some more time on the bootstrap docs. The tribute page + portfolio should have involved about 50 hours of work with bootstrap, so you should be very familiar with the grid system by now.
You simply aren't implementing it correctly.
@TylerMoeller http://codepen.io/mike93og/pen/egjBxM?editors=1100 yea probably.... there was a big chunk of javacript in between though
@TylerMoeller would i put a div on either side on my col?
@mike93og93 You'll want to use offsets to center a lg-6 column: http://getbootstrap.com/css/#grid-offsetting
And you can't nest a container inside another: http://getbootstrap.com/css/#overview-container
This pen shows some examples of offsetting and other things to help with learning the grid system: http://codepen.io/TylerMoeller/pen/qNrbok
@TylerMoeller aesome thanks for the help
mike93og93 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1498 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Good luck :+1: