@mhdavis Looks like you got it real close. Seems like
mix-blend-mode: difference; or mix-blend-mode: color-dodge; might be closer to the effect you are after.
can someone please help me with a dualboot fuckup
If you have experience with linux and data recovery
@TylerMoeller color dodge seems to do the trick semi-decently
@kubensis Out of all the places to ask about Linux, I don't know how you ended up here :)
Maybe these people can help: gitter.im/FreeCodeCamp/Linux
And there's always https://superuser.com
I don't know lol, just searched random things relating to technology.
thank you.
Hey I am having trouble with the functionality of my All Clear and Clear Element buttons. Can anyone spot the problem(s)? https://codepen.io/jrandall/pen/xRLzVK?editors=1010
I completed the Tribute page challenge but when I click submit it just kicks me back to the same page. Am I missing something?
@mhdavis wow this interface looks like a nuclear launch system :+1:
@mhdavis how did you do the scanline effect
@therightlayne did you paste your codepen link to your tribute page?
Is it advisable for a beginner to go over training again when one feeling like he/she is forgetting what one have learned?
@dhrey112 you could go over your solutions , it is only human to forget somethings at times, if you have done it before you could do it again, so see your solution to revise and save time or do it again if you want to.
Help please guys, I don't know how to make function in simon game zipline which will wait for responce, How to make "wait to responce function"?
no wiki entry for:
please guys i dont know how to make function in simon game zipline which will wait for responce how to make wait to responce function
http://codepen.io/Asparism/pen/ENNxBP?editors=0010 hey, can anyone help me understand why the yellow bars on this codepen will shrink the first time the countdown happens but the second time they won't change? i'm calling the same function both times but my logic must be off somewhere
Mr-Kumar-Abhishek @Mr-Kumar-Abhishek pats @camperbot
@gwhiteMZW using jquery its like:
$('selector').on('click', function(){here the logic of the function});
@mosaic-greg sorry for the delay; thank you for the compliment! essentially what I did was take the css bits from this interface that I wanted http://codepen.io/michaelmicallef/pen/kkdpzm
mhdavis sends brownie points to @mosaic-greg :sparkles: :thumbsup: :sparkles:
:cookie: 412 | @mosaic-greg |http://www.freecodecamp.com/mosaic-greg
guy can any1 help me, I have some questions regarding blogging
Can anyone help on how to put caption for an image for the tribute page in basic project??
Apart from using figcaption
loaded which library?
yes set the class to "fa"
hello anyone up ?? Need help with designing the nav bar
I mainly can't figure how to separate the design of collapsed in menu . https://mr-kumar-abhishek.github.io/my-portfolio/
@sorinr I wanted the open menu in mobile design to have a different background but changing it also changes the desktop ones too , but I think I have figured it out.
@Mr-Kumar-Abhishek think you should customize by css the <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
Hi, can I know how to use API with JSON? What's the address that I need to put in
$.getJSON("http://api.forismatic.com/api/1.0/",function(json){...
^I am guessing the above is incorrect. What should I insert after $.getJSON("...?
I am trying to create the random quote generator
help
@sorinr the classes which I have to change is
navbar-collapse .in specifically , and there is another class which comes while the menu is being opened I suppose that is navbar-collapse .collapsing which I am not sure of yet
$.getJSON("http://api.forismatic.com/api/1.0/",function(json){
@vrsivananda I don't think codepen will api headers .. you could use jsonp
@Mr-Kumar-Abhishek just put a dummy background color for the .navbar-collapse to see whats happening
or how do I find the address to insert? Sorry I am completely new to API
And the FreeCodeCamp seems to just give the answer in their tutorial
@vrsivananda http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=? its the url
vrsivananda sends brownie points to @sorinr and @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 407 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
:cookie: 871 | @sorinr |http://www.freecodecamp.com/sorinr
@sorinr yes it did that before it changed the desktop background too
where should I put the jsonp?
$(document).ready(function(){
$(#newQuoteButton).on("click", function(){
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?",function(json){
$(".theQuote").html(JSON.stringify(json));
});
});
});
I also get the error: Unexpected token ILLEGAL
after the
$(#newQuoteButton).on("click", function(){ line
@Mr-Kumar-Abhishek try to add background-color: black to div#navbar.navbar-collapse.collapse.in
@vrsivananda it should be ('#newQuoteButton') not (#newQuoteButton)
@vrsivananda already did that there is delay in change of the color there is another class as I was talking about :)
@sorinr already did that there is delay in change of the color there is another class as I was talking about :)
@vrsivananda last message wasn't meant for you
oh sorry I was slightly confused. So is this now correct?:
$(document).ready(function(){
$("#newQuoteButton").on("click", function(){
$.getJSON("https://jsonp.afeld.me/",function(json){
$(".theQuote").html(JSON.stringify(json));
},"jsonp");
});
});
thanks @heroiczero @sorinr
vrsivananda sends brownie points to @heroiczero and @sorinr :sparkles: :thumbsup: :sparkles:
:warning: vrsivananda already gave sorinr points
:cookie: 447 | @heroiczero |http://www.freecodecamp.com/heroiczero
@heroiczero thanks. there must be something else somewhere that's causing it to not work. :/ I'll look into it.
Thanks again!
Thanks again!
vrsivananda sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
@Mr-Kumar-Abhishek what do you mean its a delay? just make a @media to overwrite the defaults if you want to trigger the bg color earlier or later as width.when you want it
@Mr-Kumar-Abhishek hope you get what i mean :)
@sorinr by delay I mean , that when the menu is opening the background color is implemented , once it is opened fully then the background color is implemented
@Mr-Kumar-Abhishek so you want the bg color to change at some interval after you press the hamburger menu?
@grantknaver yep
@sorinr I am avoiding overwriting defaults using
!important because I have other use of the same navbar menu classes
@heroiczero
Do you know why nothing happens here when I click my "New Quote" button?
In CodePen (HTML and JS):
$(document).ready(function(){
$("#newQuoteButton").on("click", function(){
$.getJSON("https://jsonp.afeld.me/",function(json){
$(".theQuote").html(JSON.stringify(json));
},"jsonp");
});
});
<body>
<div id="center">
<div class="theQuote">
</div>
<div id="buttonDiv">
<button id="newQuoteButton" class=".btn .btn-lg"> New Quote </button>
</div>
</div>
</body>
here it is...
@vrsivananda
https://jsonp.afeld.me/ this website it offline
function change(){
function magShrink() {
for (var j = 9; j <= 0; --j) {
if(j === 0) {
iconLogo.style.display = "none";
}
else {
runitA(j);
}
}
function runitA(j) {
setTimeout(function(){
//MyFunc(i);
iconLogo.style.opacity = ".0" + j;
}, j * 1.5);
}
}
magShrink();
@Mr-Kumar-Abhishek use js for some effects or css transition for that element
@vrsivananda
http://api.forismatic.com/ that site should theoretically work
I am trying to get the magnifying glass icon to quickly decease in opacity
but it just wont launch. Hopefully you can help @sorinr
mr-kumar-abhishek sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 872 | @sorinr |http://www.freecodecamp.com/sorinr
@grantknaver as long as you have magshrink inside change you cannot call it like that
@vrsivananda just make sure your site codepen.io is in
http://codepen.io not https://codepen.io or it will not access the api for your website
why? I am calling another function doing something similar in change?
@grantknaver that function has local scope only to change. its not available outside of the scope
@vrsivananda
JSON.stringify(json) that seems wrong try to find a way to access the quote and insert it into the html. probably something like function(data){console.log(data.quote);}
@heroiczero I deleted the "s" from "https" and now my website is http://codepen.io/vrsivananda/pen/EyGgkR
^Oh I guess that worked, deleting the s
I'll try your method, but still it should show the object of quotes just with what I have, no? @heroiczero
@vrsivananda
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?try your first website you had
@heroiczero
Still nothing :(
$(document).ready(function(){
$("#newQuoteButton").on("click", function(){
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?",function(json){
$(".theQuote").html(JSON.stringify(json));
},"jsonp");
});
});
<body>
<div id="center">
<div class="theQuote">
</div>
<div id="buttonDiv">
<button id="newQuoteButton" class=".btn .btn-lg"> New Quote </button>
</div>
</div>
</body>
@heroiczero Where should I place the
function(data){console.log(data.quote);}?
@grantknaver nope. but i think you are not closing ur functions the right way
any ideas the console is not registering any problems
@grantknaver u wrote all that js code just to "enlarge" the input? i would use css like element:hover{your style in here}
var url="http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?";
var getQuote=function(data){
console.log(data);
};
$(document).ready(function(){
$.getJSON(url,getQuote,'jsonp');
});
@vrsivananda that should work if you do it in "http://"
@vrsivananda there is a console in codepen.io on the bottom left
I know. I was going to do that, but the element you use as trigger for the hover has to be the element that is effected by the hover
I am trying to hover over the magnifying glass and have it disappear and have the width of the input go form 0 to 200px
@heroiczero
I commented out all my previous JS and copy-pasted your code into it, but still does not seem to do anything. Strange :worried:
@grantknaver The for loop in the magShrink function doesn't iterate
@sonir believe me I wanted to do the hover thing but it just didn't work for what I was going for
@spieg that is weird because I am telling it to.
for (var j = 9; j == 0; j--) {
if(j === 0) {
iconLogo.style.display = "none";
}
else {
runitA(j);
}
}
grantknaver sends brownie points to @spieg :sparkles: :thumbsup: :sparkles:
:cookie: 247 | @spieg |http://www.freecodecamp.com/spieg
there is no effect on magifying logo
that fix made it function but accomplish what I was trying to accomplish
@heroiczero Thanks! I managed to get some help, and it was because I did not add the JQuery library. Silly me!
vrsivananda sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:cookie: 449 | @heroiczero |http://www.freecodecamp.com/heroiczero
@sorinr check this commit , this is what I was talking about Mr-Kumar-Abhishek/my-portfolio@997de3e two classes see ? one for collapsing and one when collapsed in. If you only changed
.collapse .in there is a delay in the change of the color
@grantknaver I've got 2 more remarks that might be of use.
- for me iconLogo.style.opacity = ".5"; doesnot work, iconLogo.style.opacity = .5; does.
- setTimeout seems to be asynchronous in a way, in that it waits with the given command, but doesn't hold processing.
@Mr-Kumar-Abhishek i've been away. i'll look into that a little later
Hello, can someone show me how to create a div that sits at the very edge at the bottom of the page? I don't want it fixed at the bottom of the screen so that it'll be their wherever I scroll.
Hi everyone. I have a CSS question. I'm trying to make a shape that looks like this:
http://codepen.io/bd1887/pen/Rogzgq?editors=0110
Except I need to make it without using an overlap trick -- I need it to be a single div. I've tried using clip-path, but I can't figure out how to cut out a curved line like that.
Hi, What else do I have to do to use bootstrap in CodePen? I have added the bootstrap under settings, but it still does not seem to work. My button still looks very normal.
This is my button mark-up:
<button id="newQuoteButton" class="btn btn-block btn-primary"> New Quote </button>
@vrsivananda do you have something in your css for #newQuoteButton ?
#newQuoteButton{
position:relative;
float: right ;
clear: right;
margin-right:20px;
margin-bottom:20px;
margin-top: 20px;
}
sorry took some time to format
Here is my codepen: http://codepen.io/vrsivananda/pen/EyGgkR
vrsivananda sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 876 | @sorinr |http://www.freecodecamp.com/sorinr
I didnt know that CSS has its own settings
so confusing
@vrsivananda :+1:
@bd1887 you could make the box white and the border green. since the radius is 100% you can set both the top and the left border.
How do I float a button to the bottom of a div without messing with the bootstrap?
Here is my markup for the button:
<div id="buttonDiv">
<button id="newQuoteButton" class="btn btn-primary center-block "> New Quote </button>
</div>
</div>Here is my CSS:
#buttonDiv{
clear: both;}
#newQuoteButton{
width: 250px;
}
My codepen, where the button is not at the bottom as I would like it: http://codepen.io/vrsivananda/pen/EyGgkR
everytime I try to push it down with css, it messes with bootstrap
@GregatGit in the cyan div, but below. Currently it floats around and rests depending on the length of the quote
so it keeps shifting
I would like it to be still, but everytime I use position:fixed or absolute, it cancels out the bootstrap
that's right @GregatGit
@vrsivananda You have so much css - lots of ids and class - alot that you don't need - you only have one button - you need to clean up your css and make it straight forward so you know what going on
vrsivananda sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 790 | @gregatgit |http://www.freecodecamp.com/gregatgit
@GregatGit
oh wait let me clear up the id and class
I am not sure which ones I don't need. I deleted one CSS class (the quotebutton div)
@vrsivananda this is very confusing
#center{
width: 500px;
height:250px;
background-color:#6ae5ea;
margin-top: 30px;
position:relative;
padding: 10px;
border-radius: 5%;
//vertical-align: middle;
}
give things meaningful names - not generic names like centre
ok let met change that
I fixed that one
now called mainQuoteDiv
@GregatGit sorry I lost track of time. I gtg. If you do find a solution, please do let me know. Sorry for having to leave so suddenly!
thank you again! @GregatGit
vrsivananda sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: vrsivananda already gave gregatgit points
@vrsivananda try
#newQuoteButton{
margin-top: 25%;
clear: both;
}
Can someone do me a favour and give me a link to a project that they've done on codepen.io/ that's implemented the use of jQuery functions please?
thanks @khaduch if I'd looked at my mentions earlier I would've been done troubleshooting that a lot more quickly!
seandoe sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2012 | @khaduch |http://www.freecodecamp.com/khaduch
So this is kinda random, but I'm doing an anonymous 2 minute survey to better understand how people are learning frontend development on their own. I started with FreeCodeCamp almost two years ago, and it's one of the resources I've considered. You can also see all the results yourself at the end after submitting
If you have any suggestions for improvements, do let me know
hi guys i need some help
i am trying to add some background color in
https://codepen.io/m1s/pen/YpYXjy?editors=0110
i am trying to add some background color in
mainGroup class but it is not working cant fig out where i make the mistakehttps://codepen.io/m1s/pen/YpYXjy?editors=0110
as it is not responsive better open it in a new tab
@scrubsilencer are you referring to using
$.fn? If so, I have an example in my Tic Tac Toe app for rotating the board - line 180. It's called on lines 139 and 174.
Hello there. I've done the layout for the Random Quote Generator and I was confused about what api to use to get the actual random quotes. https://codepen.io/donealbercier/pen/LbOJbd
you can set the number of quotes as many as you need
so im on task 119 "Build a Personal Portfolio Webpage" ..seems a bit much for just starting ? or is it simpler then it seems
@chrisLoPresti If you are able to complete the tribute page, you can probably create a simple portfolio with not much more than the concepts from the tribute. I have seen a lot of people do an initial portfolio and then later on come back and completely re do it after learning some more skills and finishing some of the later projects.
@dna113p thanks for the reply. I mean I can get the basic css going and the body of the page but when it comes to getting a fully functional and aesthetically pleasing banner, I might need to know a bit more, especially since there hasn't been to much on java yet
chrislopresti sends brownie points to @dna113p :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @dna113p |http://www.freecodecamp.com/dna113p
@chrisLoPresti you can do a ton with just html and css. But if you dont think you can create your vision with the knowledge that you currently have you can always continue on and come back the portfolio later.
chrislopresti sends brownie points to @dna113p :sparkles: :thumbsup: :sparkles:
:warning: chrislopresti already gave dna113p points
@chrisLoPresti If i were to design the curriculum I don't think I would have put the portfolio as one of the first projects
would have left it til the end
@dna113p yeah i think that deff requires a bit more knowledge
im legit starting from ground zero....so im trying here
@chrisLoPresti nice well keep chugging along! What I have found with development so far is that anything you ever want to create is always going to need "a bit more knowledge" and I think that is sort of the name of the game, attacking problems you don't fully understand and solving them.
so sometimes when a project requires a bit more knowledge, it might mean it's the perfect project to tackle
thanls
thanks..*
@tommygebru Lots of people hit an issue with the JSON returned from the API not having the properties they expect. You might want to do a review of the record collection challenge and study the JSON returned from the API before diving into creating the UI for your Twitch App.
@iehab91 What's up?
Hover over my icon and click the chat privately button
so @TylerMoeller is there something specific I should do for the project??
Nothing specific really, aside from fulfilling the user stories
When a user's account doesn't exist, the JSON will be different than when a user's account does exist, for example, so it's good to know how to handle JSON Objects that don't have all the properties you are expecting
yeah Im just trying to get 1 thing working just to get some info about FCC channel on Twitch
or FCC stream but even that is eluding me....
That's a good start - then analyze what the JSON looks like for online users vs. offline users vs. closed/non-existent accounts. It all comes back a little differently
i havent gotten a single response yet i believe I am doing it wrong...
care to take a look?
@TylerMoeller
no design yet just trying to figure this api out
@iehab91 should be a green button on the tooltip when you hover over someones face on Gitter
@tommygebru Start with a working API call:
$.getJSON('https://wind-bow.hyperdev.space/twitch-api/streams/freecodecamp?callback=?')
.done(function(data) {
$('body').append(JSON.stringify(data))
});
That gives you two URLs you can use for more info - try each of them out and study the JSON to see what data you need to collect
To make it easier to read, you can copy/paste the data here: http://codebeautify.org/jsonviewer
Hey, guys! I was wondering if anybody could help me out with the Record Collection exercise.
@TylerMoeller what i dont really understand is how to retrieve all the other information about the stream... we only get two lines back here
@tommygebru Yeah, take one of those URLs returned, plug it into your getJSON and see what it returns. Try the other one out too.
so should i create a new ajax method inside getJSON or something to get information about
console.log(data._links.channel);
console.log(data._links.channel);
The problem with that approach, though, as you'll see, is that it takes you to http://api.twitch.tv instead of the hyperbow server. Probably best to just understand what each URL does (/channels/, /streams/, etc...) and call them directly.
post your code and questions...
whats the difference between
twitchAPI + stream + regStreamers[0] + callback
all variables to make up url
all variables to make up url
and the url
here
var twitchAPI = "https://wind-bow.hyperdev.space/twitch-api";
var stream = "/streams/";
var callback = "?callback=?'";
// var clientID = "3fe05j8mavwd68cjoqwqs2e9oqsou02";
var regStreamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"];
I know there is some spelling mistakes I'm going to fix them,but overall what do u guys think about it?
@tommygebru Add this line of code to your codepen to see:
$('body').append(twitchAPI + stream + regStreamers[0] + callback);
Or just use
console.log(twitchAPI + stream + regStreamers[0] + callback)
also maybe more color
@TylerMoeller are you saying I cant replace the url in .getjson(url)...
@tommygebru Thanks for the feedback I will make sure to change that thx <3
progamers780 sends brownie points to @tommygebru :sparkles: :thumbsup: :sparkles:
:cookie: 780 | @tommygebru |http://www.freecodecamp.com/tommygebru
@tommygebru No, I'm saying if you want to see the difference, console.log or write it to the page so you know what the URL is and then visit the URL in your browser to see how it is different.
yeah i made a typo finally I got some data :smile:
@TylerMoeller I will take a break for now maybe i can message you in an hour?
nice! I have an interview at the end of the day hope to finish my last api project before then :wink:
thanks @TylerMoeller
tommygebru sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1044 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Hi guys! I'm having trouble with show the local weather. Does anyone know how to get geolocation to work with the OpenWeatherMapAPI. I've tried to get it to work but Google requires a https connection and that causes the api to stop working
I've also tried to use an IP location api but I can't grab the lon/lat values and place them into the url
what is a good resource to look up all of the syntax for HTML and CSS? while studying java I could look at the API docs, does html have something similar?
the float right in my nav bar is making my selections backwards than how i want, how can i fix this? http://codepen.io/bestintown23/pen/woPMBV
Updated my Local weather app. Feedback is appreciated: https://ayoisaiah.com/weather-app/
phiggins567 sends brownie points to @ayoisaiah :sparkles: :thumbsup: :sparkles:
:cookie: 206 | @ayoisaiah |http://www.freecodecamp.com/ayoisaiah
@phiggins567 When you grab the longitude and latitude like this
var longitude = l.lon;
var latitude = l.lat;You can make the request like this:
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude, function (res){});
Anyone here could help with Angular? I'm learning it meanwhile doing Local Weather App and I got problem with message
"Possibly unhandled rejection: {}" and I can't figure out why.
Hi...I am trying to start on my resume website but i am having trouble getting started. Any one have any ideas?
Hi! I need some help with Bootstrap... I have a row with two columns (they have text and a button and I want them to be in two columns in a large device and in one column in small ones. The thing is I have used this to set the column height equal in both columns, so I can put the button on the bottom
display: table-cell;
float:none; And now it seems that it doesn't recognize the "col-xs-12" property
Hey guys, I have a quick question. Is their a way to link my images beforehand in HTML so that I dont have to put in a long link everytime I want to put that image up? Like "src='something.jpg'", is that possible?
Waiting for a better answer... @Twitchy-Cake if you use Sass you can set a variable with the name of the image
lmao
like im looking it up but i dont understand what it does, sass
@Twitchy-Cake I don't know if there is other options, but just an idea... :)
you have to configure the codepen editor to use it
Hey chat, I am having trouble calling an API with my quote machine, can anyone help me with this, been stuck for quite some time now...https://codepen.io/Duruzican/pen/yVbaOq
@bestintown23 Not sure what you mean by the floats in your navbar making your selections backwards. If you're using float: left, use float: right to make them appear on the other side.
Or, send an example of another website that has the design you're trying to accomplish
I'm having trouble with my Weather App. I can get Farenheit to change into Celsius but I can't get it to work the other way round. http://codepen.io/donealbercier/pen/wopJNB
@Twitchy-Cake You can use an URL shortening service: https://goo.gl/
Or just upload the picture to https://postimage.org - they should give you a link that's more manageable in size.
Or just upload the picture to https://postimage.org - they should give you a link that's more manageable in size.
hi guys how do you customize a circle or a rectangle? like you put some curves and have text inside and for the circle like making a pie with a text on each pie?
@zKruki Most of the time this happens it's because you need to add bootstrap.min.js - and it needs to load after jQuery.
https://code.jquery.com/jquery-3.1.1.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://code.jquery.com/jquery-3.1.1.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
hi guys how do you customize a circle or a rectangle? like you put some curves and have text inside and for the circle like making a pie with a text on each pie?
@artoodeeto Can you show an example of what you're trying to do?
@TylerMoeller i dont have example but on my my like a rectangle but on the top and bot line i could curve it or make it like a wave
@TylerMoeller <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Navbar-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://codepen.io/futuristicHat/full/MbrpGb/#top">ABC</a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="http://codepen.io/futuristicHat/full/MbrpGb/#top">About</a></li>
<li class="active"><a href="http://codepen.io/futuristicHat/full/MbrpGb/#portfolio">Portfolio</a></li>
<li class="active"><a href="http://codepen.io/futuristicHat/full/MbrpGb/#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--About-->
You'll need jQuery in addition to bootstrap.min.js. Both of those need to go at the end of your HTML, right before the closing </body> tag
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
@nuria-gs
Hi! I need some help with Bootstrap... I have a row with two columns (they have text and a button and I want them to be in two columns in a large device and in one column in small ones. The thing is I have used this to set the column height equal in both columns, so I can put the button on the bottom
http://codepen.io/nuria-gs/pen/PbJmjj?editors=1100
Hi! I need some help with Bootstrap... I have a row with two columns (they have text and a button and I want them to be in two columns in a large device and in one column in small ones. The thing is I have used this to set the column height equal in both columns, so I can put the button on the bottom
display: table-cell;
float:none; And now it seems that it doesn't recognize the "col-xs-12" propertyhttp://codepen.io/nuria-gs/pen/PbJmjj?editors=1100
@nuria-gs Yes, I see your same question above and trying to help, but codepen is down...
No need to apologize, just letting you know I can't help when codepen is down :(
zkruki sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1045 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@nuria-gs It's back up ( for now :) ) It looks like your col-xs-12 is working fine - in fact, you don't need it, just col-md-6. Everything at col-sm and col-xs will assume 12 by default if you do that.
@TylerMoeller the thing is that I wanted the buttons aligned on the bottom, so i put this
.external-link{
/* display: table-cell;
float:none;*/
padding-bottom: 50px;
}
but with this the col-xs-12 doesn't work
@nuria-gs You should be able to accomplish that by nesting a row beneath those columns
@nuria-gs Yes, let me see if I can find an example to show
@TylerMoeller the thing is that the buttons are in different columns with different heights
hey guys, i have a question about appending HTML in javascript... are there some best practices to doing it? I have some code that I am experimenting with for my Tic Tac Toe, and just wondering how I could refactor it? Or what methodology i should follow?
let view = {
setupBoard: function() {
let gameBoard = document.createElement("table"),
tictactoe = document.getElementById("tictactoe"),
messageBox = document.createElement("div"),
playerButtons = document.createElement("div"),
restartButton = document.createElement("button");
// refactor ??
// setup restart button
restartButton.innerText = "Restart";
restartButton.setAttribute("onclick", "handlers.restartGame();");
// setup player buttons
playerButtons.innerHTML = this.createPlayerButtons();
// setup message box
messageBox.setAttribute("id", "message");
messageBox.setAttribute("class", "message-box");
this.createGameTable(gameBoard);
// this should be refactored -- see appendElementsToHTML() below
tictactoe.appendChild(gameBoard);
tictactoe.appendChild(messageBox);
tictactoe.appendChild(playerButtons);
tictactoe.appendChild(restartButton);
// set id's to each tile
let tds, k;
tds = gameBoard.getElementsByTagName("td");
for (k = 0; k < tds.length; k++) {
tds[k].setAttribute("id", k);
}
},
createGameTable(parentElement) {
let rows, tiles;
for (var i = 0; i < 3; i++) {
rows = document.createElement("tr");
parentElement.appendChild(rows);
for (var j = 0; j < 3; j++) {
tiles = document.createElement("td");
tiles.setAttribute("class", "tile");
tiles.setAttribute("onclick", "handlers.tileClick(event)");
rows.appendChild(tiles);
}
}
},
appendElementsToHTML() {
return Array.from(arguments).forEach(function(argument) {
console.log(argument);
return document.getElementById("tictactoe").innerHTML += argument;
});
},
createPlayerButtons: function() {
let playerButtonHTML = '';
playerButtonHTML += '<form id="switch">';
playerButtonHTML +=
'<input onclick="handlers.setStartingPlayer(event)" type="radio" name="pick-player" class="switch-input" value="X" id="playerX">';
playerButtonHTML += '<label for="X" class="">X</label>';
playerButtonHTML +=
'<input onclick="handlers.setStartingPlayer(event)" type="radio" name="pick-player" class="switch-input" value="O" id="playerO">';
playerButtonHTML += '<label for="O" class="">O</label>'
playerButtonHTML += '</form>'
return playerButtonHTML;
}
}
Hey guys i am trying to take the "hello, world" to the extreme left of my page anyy ideas http://codepen.io/NnamdiV/pen/yVppJN
@Duruzicanyour
error: function(){
console.log(false)
}add this after success:
duruzican sends brownie points to @gniewoszu :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @gniewoszu |http://www.freecodecamp.com/gniewoszu
@nuria-gs Hmmmm, I'll have to think about it some more :(
nuria-gs sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1046 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@nuria-gs It's a little complicated to be honest lol, but I think this is what you want: http://codepen.io/TylerMoeller/pen/yVppEa?editors=1100
@Gniewoszu I understand that there is an error in the code, I am getting nothing back in my log other than "false" (which is the desired effect from the code you've given me) I've been stuck on this project for 3 days now, kind of at a loss...
Add this to the CSS to better visualize what the grid layout is doing:
* {
border: 1px solid black;
}
hi guys can i ask someone in private?? its about using you nav buttons but instead going to the next link it will just change the div?
@Duruzican this code was only to show that your call is unsuccessful
ok, so why is the call not going through is my question. am i missing something from the process
Is there any easy to use weather API that works over https?
http://codepen.io/donealbercier/pen/wopJNB
http://codepen.io/donealbercier/pen/wopJNB
@TylerMoeller that's exactly what I wanted... you get it with the min-height?
@nuria-gs Yes, min-height and nesting a row in each column
@donealbercier I like Weather Underground - free to use and supports HTTP/HTTPS
ok thanks! @TylerMoeller I tried neting a row with the column, but withouth the min-height it didn't work
nuria-gs sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: nuria-gs already gave tylermoeller points
@Duruzican The URL is slightly off - format=jsonp and at the end add
&jsonp=?
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?You also have to load your codepen page over HTTP because the quote api does not support HTTPS
@TylerMoeller yea I had heard of that one I'll try it out. I was also having trouble getting my Farenheit/Celsius switch working. It works the first time and then stops
hey everyone, I'm working on the random quote maker. I have an array of quotes as well as the twitter button implemented but my javascript isn't changing the quote or the text for the twitter link
'''
$document.ready(function(){
$("#randQuote").on("click",function(){
var quoteIndex = Math.floor(Math.random()*rickyQuote.length);
if(rickyQuote[quoteIndex].length > 140){
document.getElementById("#quote").style.font-size = "14px";
}
document.getElementById("#quote").value = rickyQuote[quoteIndex];
var twitStr = encodeURIComponent(document.getElementById(rickyQuote[quoteIndex]).value);
document.getElementByID("#twitter-share").href = "https://twitter.com/intent/tweet?text=" + twitStr;
}); });
'''
@donealbercier Not sure if this is a best practice, but an easy way to do the F/C conversion is to read the current temperature from the page. If it has an F in the text, convert to celsius, else convert to Fahrenheit. You can use .indexOf() to see if it has the 'F'
Then you don't have to deal with local/global variables and scope issues
$document.ready(function(){
$("#randQuote").on("click",function(){
var quoteIndex = Math.floor(Math.random()*rickyQuote.length);
if(rickyQuote[quoteIndex].length > 140){
document.getElementById("#quote").style.font-size = "14px";
}
document.getElementById("#quote").value = rickyQuote[quoteIndex];
var twitStr = encodeURIComponent(document.getElementById(rickyQuote[quoteIndex]).value);
document.getElementByID("#twitter-share").href = "https://twitter.com/intent/tweet?text=" + twitStr;
});
});
@donealbercier @TylerMoeller Probably more streight-forward and easy would be to store the value one gets (Probably Celcius) and then either convert it before writing to page, or not.
@maxroar When you work with
document.getElementById, don't use the # sharp
@maxroar
document.getElementById("quote")
@TylerMoeller the thing is that with that solution, in one column there is too much space between the text and the button. I there any option to change the value of min-height on col-xs-12?
Also,
here you wrote the function wrong (Case sensitive)
document.getElementByID("#twitter-share")here you wrote the function wrong (Case sensitive)
@TylerMoeller I see the mistake in the url, I've changed it but I am still not able to make a successful call... scratching me head here.
Hey guys I'm wondering if you can help me with an issue I've been having since I started my tribute page sometimes when I write code into css it doesn't change anything but when I use the <style>...</style> tag it works. I know that I could just write it the the style tag but I want to know why this is. for example I wrote a class called car in my css but the font-size property won't work but when I wrote it in style it did. any hel would be greatly appreciated thanks guys. http://codepen.io/Tron2097/pen/QGMJML
@donealbercier True, that could work. This is what I meant:
$("#temperature-holder").on("click",function(){
if($(this).text().indexOf('F') > -1) {
$('#temperature-holder').html(tempC)
} else {
$('#temperature-holder').html(tempF)
}
});
@maxroar Additionally
element.value works only for textboxes and some few other input elements. If your element, which should show the quote, is no input element, use element.innerHTML
@Duruzican Look in your browser's address bar and make sure you are opening your page via
http://codepen.io/..... not https://codepen.io/.....
@nuria-gs You can make min-height whatever value you want, maybe I'm misunderstanding the question
OH! Ok, that is what you meant by that, I thought you meant in the url for my api call... thank you
@TylerMoeller I mean having one min-height for col-md-6 and other for col-xs-12
Hey guys I'm wondering if you can help me with an issue I've been having since I started my tribute page sometimes when I write code into css it doesn't change anything but when I use the <style>...</style> tag it works. I know that I could just write it the the style tag but I want to know why this is. for example I wrote a class called car in my css but the font-size property won't work but when I wrote it in style it did. any hel would be greatly appreciated thanks guys. http://codepen.io/Tron2097/pen/QGMJML
@nuria-gs Ahhh, I'm sorry, I misunderstood. For that, you would need to use media queries and change the height depending on the screen size. This tells you where the breakpoints are: http://getbootstrap.com/css/#grid-media-queries
thanks again!! @TylerMoeller
nuria-gs sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: nuria-gs already gave tylermoeller points
Man I had no trouble with my tribute page but this portfolio one is already getting me stuck. will probably have more questions later lol
@Tron2097 With codepen, all the <html>, <body> tags are taken care of for you. The CSS that goes in the <style> tags should go in the CSS panel or it will cause some conflicts like you're seeing. Check out this tour to see where to put everything: https://codepen.io/pen/tour/welcome/start
@TylerMoeller so I have to use the style tags in the css panal? because I tried that and got an error message
@Tron2097 No - that panel doesn't accept HTML tags, only pure CSS, so leave out the <style></style> and just put everything from in between
@TylerMoeller I did that and it still won't change my font-size for the car class
@TylerMoeller thanks I really appreciate it
tron2097 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1047 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@Tron2097 Try this:
.car {
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 48px;
}You need the . in front of car to signify it's a class name and font-sizes can't be in % sizes.
I have a question about the Simon Game. I want to create an array called "player" and push a number to it every time the player clicks a button. But when I console.log(player) outside the blueOn function it doesn't push anything to the array. Any thoughts on how to fix that?
$(document).ready(function(){
var simonAI = [];
var player = [];
//function to run Jquery
var blueOn = function(){
$('#blueAudio')[0].play();
//play audio
$(".bluels").addClass('blueon');
setTimeout( function() {
$(".bluels").removeClass('blueon');
},1000);
//hightlight ls for 1 second
player.push(1);
}
console.log(player);
$("#bluels").click(blueOn);
});
Here's the codepen
http://codepen.io/tyl-er/pen/XNzjdg?editors=0011
http://codepen.io/tyl-er/pen/XNzjdg?editors=0011
tron2097 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: tron2097 already gave tylermoeller points
@tyl-er This is a scope issue. If you put your console.log(player) inside the blueOn function, you will see the number gets pushed to the array.
@TylerMoeller Ok. I wanted to be able to compare that array to another array that has the computers moves. How would I do that? Or should I go about it another way?
@tyl-er You can create a function that does the comparison and send that array to the function. Also, jQuery .queue is useful instead of using setTimeout:
var blueOn = function() {
//fx to play sound and flash ls
//play audio
$('#blueAudio')[0].play();
//hightlight ls for 1 second
$(".bluels").addClass('blueon').delay(1000).queue(function(next) {
$(".bluels").removeClass('blueon').dequeue();
});
player.push(1);
compare(player);
}
var compare = function() {
console.log(player);
}
On a bootstrap nav bar, is their any way to change the color of the text on one of the tabs?
duruzican sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1048 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
I tried calling a blue-text class, but that hasnt worked
hey how can i change the blue parts of my page to show different pictures??? http://codepen.io/bestintown23/pen/woPMBV
hey how can i change the blue parts of my page to show different pictures??? http://codepen.io/bestintown23/pen/woPMBV
hey how can i change the blue parts of my page to show different pictures??? http://codepen.io/bestintown23/pen/woPMBV
@TylerMoeller Ok thanks a bunch. I need to go back study scope some more because it's a little confusing. So if I call "compare" inside of "blueOn" that put's it in blueOn's scope? Even though I declared it separately.
tyl-er sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1049 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@bestintown23 Create <section>s for those blue parts and use CSS to apply a background image or just use the <img> tag if you mean to put something like a portfolio image grid for example.
@tyl-er It all depends on what you want to do with the array - I was just showing how to manipulate the array in one function and then do something with it in another function. The parent function (document.ready) has the array defined as [], so it will always log like that if you manipulate it in lower-level functions.
@bestintown23
<section class="first-blue-section">
<p>Some content</p>
</section>
<section class="second-blue-section">
<p>Some content</p>
</section>
Like you're doing with the other sections you already have in your page
@TylerMoeller i'll give it a shot and let you know what i come up with, thanks!
bestintown23 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1050 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
does anyone have any suggestions for required reading on Ajax and JSON? I didn't find the section on freecodecamp very helpful and I'm pretty lost on the intermediate front end projects
@TylerMoeller in your example i can replace the <p> element with an image right?
@bestintown23 Yes, or you can remove the <p> element and use CSS to apply a background image to .first-blue-section instead if you want it to take up the entire section
@engineerwithoutfear It works for me right now.
Gives me a blank page and a "Origin: header is required"
@nwilson314 Maybe the folks at https://gitter.im/FreeCodeCamp/HelpJavaScript can help out with that. I learned it the hard way through trial and error and the jQuery documentation. This pattern was useful:
var url = 'https://URL to some api/?callback=?'
$.getJSON(url, function() {
console.log( "success" );
}).done(function() {
console.log( "second success" );
}).fail(function() {
console.log( "error" );
}).always(function() {
console.log( "complete" );
});
@engineerwithoutfear Change your URL to use
&callback=? so you don't have to use that crossorigin.me server:"https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&callback=?&srsearch="
Hi everyone, currently working on my wikipedia viewer. Having some trouble with my JQuery. When trying to reach the value written on my textarea/textbox by doing console.log, I get back "" every time. What have i missed?