Is there really any way to create your own personal portfolio page without taking a look at bootstrap templates? How do you go about creating your own site from scratch? Which resources should I be using?
Salam
Hi Everyone :)
guys need help regarding images
using html/css/bootstrap, currently learning
for example i have images, i want them to line up and make them all have the same width and height (like the coffee), but then i put the 1st picture and it doesnt line up to the coffee, maybe because the image is much larger than the coffee
i want to make the 1st picture line up with the coffee that have the same width and height
how can i do that?
Does anyone know of any sites with good tips on how to implement social media sprites? I know how to get the coordinates using Sprite Cow, but I can’t figure out how to put the image into my HTML.
I'm almost done with my tribute page and I
'd like feedbacl
feedback*
also, I'm having two issues. First, the first quote (the one with a green background) has a white splotch on the left part of its background, and second, the attribution for the second quote (the <h4> element with text: -Candace Lightner on the lack of social stigma around drunk driving and how MADD is trying to change it) should be indented (it's given the "indent" class) but it isn't.
Lastly- I guess it's really three issues- my margin CSS for the "attr" class doesn't seem to be working
I needs some help with media quieres.
This message was deleted
I think i have my media query set up properly but when i try to re-write what i want the code to do when it’s min-width 600 it’ just changes the code and not when it’s to be responsive.
Sorry Danny, I don't have a good experience on this
I wish to help you
Hey i mean i thought I’d ask to se. One day we’ll both know enough to help somone else.
Yes :)
I have a problem with this code of Bootstrap Create a Row
<div class="container-fluid">
<div class="row">
<h3 class="text-primary text-center">jQuery Playground</h3>
</div>
<div></div>
</div>
<div class="row">
<h3 class="text-primary text-center">jQuery Playground</h3>
</div>
<div></div>
</div>
http://codepen.io/drbe4t/pen/KrkGZA this is the code pen. the image is ineternal but it’s not relative.
<h3 class="text-primary text-center">jQuery Playground</h3>
I believe you have to remove > tag
after center
Na
just seconds
ok
@andresshare I'm not pretty sure
jQuery Playground
"jQuery Playground"
na
I have a problem is with this line
which line
Add a div element below your h3 element.
where is my mistake..
did you solve it
no :C
:worried:
i can´t pass the next level.. but i don´t know..
but it seems that you put it right
give me
the subject
in order to reach you from the map
maybe you forget something
what is the title subject in your map that you reach on it
Are you sure about fluid
@andresshare I think you define the row class, so you have to use col class for all elements in the row class objects.
This message was deleted
How to post code in the message?
you mean private message
go to the top of the corner you will find three buttons
or 4 buttons
next of the star button click on the setting
"Room setting"
No
you just high light your mouse through my picture
it will show you after you click
three buttons
you will find chat privately
click on it
hi, I want to make it so I add class on scroll, I know this isn't efficient but I understand what is going on.. except I'm a little lost
```js
$(document).ready(function(){
function scroller() {
function aboutAdd() {
var aboutActive = $("#nav-about").addClass(".nav-active");
$("#nav-portfolio").removeClass(".nav-active");
$("#nav-contact").removeClass(".nav-active")
};
function portfolioAdd() {
var aboutActive = $("#nav-portfolio").addClass(".nav-active");
$("#nav-about").removeClass(".nav-active");
$("#nav-contact").removeClass(".nav-active")
};
function contactAdd() {
var aboutActive = $("#nav-contact").addClass(".nav-active");
$("#nav-about").removeClass(".nav-active");
$("#nav-portfolio").removeClass(".nav-active")
};
var aboutPos = $("#about").offset();
var portfolioPos = $("#scroller").offset();
var contactPos = $("#contact").offset();
$(window).on("scroll" , function() {
if (aboutPos > portfolioPos && aboutPos > contactPos {
aboutAdd();
}
else if (portfolioPos > contactPos && portfolioPos < aboutPos){
portfolioAdd();
}
else if(contactPos < portfolioPos && contactPos < aboutPos){
contactAdd();
}
else{
$("#nav-about"),removeClass(".nav-active") ;
$("#nav-portfolio").removeClass(".nav-active");
$("#nav-contact").removeClass(".nav-active");
}
});
};
});
```js
hi, I want to make it so I add class on scroll, I know this isn't efficient but I understand what is going on.. except I'm a little lost
$(document).ready(function(){
function scroller() {
function aboutAdd() {
var aboutActive = $("#nav-about").addClass(".nav-active");
$("#nav-portfolio").removeClass(".nav-active");
$("#nav-contact").removeClass(".nav-active")
};
function portfolioAdd() {
var aboutActive = $("#nav-portfolio").addClass(".nav-active");
$("#nav-about").removeClass(".nav-active");
$("#nav-contact").removeClass(".nav-active")
};
function contactAdd() {
var aboutActive = $("#nav-contact").addClass(".nav-active");
$("#nav-about").removeClass(".nav-active");
$("#nav-portfolio").removeClass(".nav-active")
};
var aboutPos = $("#about").offset();
var portfolioPos = $("#scroller").offset();
var contactPos = $("#contact").offset();
$(window).on("scroll" , function() {
if (aboutPos > portfolioPos && aboutPos > contactPos {
aboutAdd();
}
else if (portfolioPos > contactPos && portfolioPos < aboutPos){
portfolioAdd();
}
else if(contactPos < portfolioPos && contactPos < aboutPos){
contactAdd();
}
else{
$("#nav-about"),removeClass(".nav-active") ;
$("#nav-portfolio").removeClass(".nav-active");
$("#nav-contact").removeClass(".nav-active");
}
});
};
});
Anyone here who could at least take a look at my codepen and see what i need to do to correct my media query
link?
<link> inside <head></head>
<link href="" rel="stylesheet" type="text/css">
going to stream a twitch overlay I started today on FCC twitch channel
@trip16661 sorry i was traveling it’s http://codepen.io/drbe4t/pen/KrkGZA
if you remove the media query stuff it should be designed for desktop. The media query i think is suppose to be fore media.
@drbe4t you should use your queries to target screens that are max-width
@drbe4t put them before your CSS because CSS is read top-down
@willcodes i actually just barely figured that out and I removed the only before screen.
@drbe4t if you are designing for mobile first, or if thats what your intent is, it won't matter unless you use pictures
@drbe4t use %s instead of pixels and your site should look half decent without the queries
So this is for an assignment for school. I think that my professor just wants us to get the “concept down.”
so i think he wants us to leave the parts that I did code as response to be responsive.
So i figured it out .now my question is when i desgin for mobel first. I’d set up each individual media query?
hi guys. it seems like a big jump from the json/ajax tutorial to the random quote generator, mostly because of the twitter api
i've been doing some initial research and I see that there are a lot of bloat with Twitter's new 1.1 API
one of the solutions I've seen is from Rafase282 (github) and I don't know where he got the idea of using the tools he used e.g. forismatic
i think its pretty decent isnt it? http://codepen.io/morazajuan/pen/zBPAqJ
@johnsalcedonetwork you don't have to use any APIs on that one. i'm guessing he found forismatic by googling something like "random quote API", which has forismatic show on the first page.
@johnsalcedonetwork there are many api services that provides quotes
one thing i recomend is to search for one that serves in HTTPS
one thing i recomend is to search for one that serves in HTTPS
otherwise u will deal with troubles xD
I found an amazing api for quotes if anyone is interested
it doesnt return the temperature
can someone fix it ?
@NixonRichard just use data.main.temp to retrive the temperature
$("#weather").html("City: " + data.name+data.main.temp);
$("#weather").append("<p>Weather: " + data.weather[0].main + "</p>");
}
like this @sorinr ?
@NixonRichard yes. if you want to put the temp inline with the city name. but i would add a span like <span class="myclass">data.main.temp<span> to be able to format the temp as i wish using myclass
@sorinr
$("#weather").html("City: " + data.name+ <span class="myclass">data.main.temp<span> );
$("#weather").append("<p>Weather: " + data.weather[0].main + "</p>");
}
i think im adding the span element the wrong way
@NixonRichard just close the span </span> instead of <span> at the end
@NixonRichard and add some css to that class like: padding-left: 10px to move it to the right from the city name, ecc
$("#weather").html("City: " + data.name+ <span class="myclass">data.main.temp</span> );
still wrong
it says unexpected token <
@NixonRichard $("#weather").html("City: " + data.name+ "<span class='myclass'>"+data.main.temp+"</span>" );
@sorinr
```
$("#weather").html("City: " + data.name+
"<span class="myclass">"+data.main.temp+"</span>" );
$("#weather").html("City: " + data.name+
"<span class="myclass">"+data.main.temp+"</span>" );
i made this and it s also wrong
$("#weather").html("City: " + data.name+
"<span class="myclass">"+data.main.temp+"</span>" );
nvm
it worked
@NixonRichard it is here: "myclass". i wrote 'myclass' because you have the span
yeh
305.15
is thes fahrenheit degree ?
yes @NixonRichard
how to make it appear under my city name like the weather ?
anyway thx u first @sorinr
nixonrichard sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 468 | @sorinr |http://www.freecodecamp.com/sorinr
@NixonRichard make a new <div id="temp"></div> below your weather one and make $("#temp").html(data.main.temp);
<div id="weather">
<div id="temp">
<p class="center">Click the button to get your local weather.</p></div></div>
<div class="center-div">
make a new div id like this ?
@NixonRichard <div id="temp" class="center-div">
$("#weather").html("City: " + data.name$("#temp").html("Temperature:" +data.main.temp);
$("#weather").append("<p>Weather: " + data.weather[0].main + "</p>");
}
\
and i made this also
$("#weather").html("City: " + data.name
);
$("#temp").html("Temperature:" +data.main.temp);
$("#weather").append("<p>Weather: " + data.weather[0].main + "</p>");
}
but it doesnt return the temperature
@NixonRichard have you closed this div: <div id="temp" class="center-div"></div> ?
yes u can see here
<div id="weather">
<div id="temp">
<p class="center">Click the button to get your local weather.</p>
</div>
</div>
@NixonRichard do not nest
<div id="temp"> within <div id="weather"> put it after because when you call $("#weather").html("City: " + data.name
); it overwrites all content inside id="weather div
<div id="temp"> within <div id="weather"> put it after because when you call $("#weather").html("City: " + data.name
); it overwrites all content inside id="weather div
@NixonRichard <div id="weather"></div><div id="temp"></div>
oh
okay
:+1: @sorinr
@NixonRichard great
This message was deleted
but ic ant change the city s style
just the weather and temp
@NixonRichard change $("#weather").html("City: " + data.name
); into $("#weather").html("<span class='city'>City: " + data.name+"</span>"
); and make a css class city to style it
); into $("#weather").html("<span class='city'>City: " + data.name+"</span>"
); and make a css class city to style it
yeh i forgot that
Hey @sorinr
do u know how to add weather animations based on the returned weather descriptions ?
hi guys
how can i fix this error
Refused to execute script from 'https://raw.githubusercontent.com/shinnn/AudioContext-Polyfill/master/audiocontext-polyfill.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
how can i fix this error
Refused to execute script from 'https://raw.githubusercontent.com/shinnn/AudioContext-Polyfill/master/audiocontext-polyfill.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
@buiphuking how do you link this lib?
<script src="https://raw.githubusercontent.com/shinnn/AudioContext-Polyfill/master/audiocontext-polyfill.js"></script>
@buiphuking try give it a type
i did, same error
@buiphuking like type="application/js" ?
not error anymore but not working
@buiphuking maybe its the way you are calling the functions in that lib
@sorinr thanks
buiphuking sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 469 | @sorinr |http://www.freecodecamp.com/sorinr
does any one know how to use twitter tweet api?
@AbsoluteZero273 if it is for the quote generator this web site has a good how-to for twitter http://gpiot.com/blog/elegant-twitter-share-button-and-dialog-with-jquery/
@GregatGit thanks!
absolutezero273 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 690 | @gregatgit |http://www.freecodecamp.com/gregatgit
@GregatGit ```js
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>```
Do I not have to use this at all?
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
.
did you go to there demo page http://gpiot.s1.cotidia.com/twitter-share-demo/
@AbsoluteZero273 Yours looks very complicated - they provide a very simple work through
I got that from twitter's website itself
https://dev.twitter.com/web/javascript/loading
https://dev.twitter.com/web/javascript/loading
yeah theirs is simple :)
@AbsoluteZero273 I couldn't get my head around twitter's example and was fortunate to find that one. It only takes about 10 lines of js and a little bit of html to tweet out
hi everyone. i want too know about twich.tv project. can someone explain what i have to do?
to*
@ShwetaRajput What did you try and whats the error?
@ShwetaRajput you have to build something like https://codepen.io/FreeCodeCamp/full/Myvqmo/
hey guys, i have a question -- how do you split an array into arrays?
like this
['a', 'b', 'c'] convert to
[['a'],['b'],[c']]
Hi, can someone help me?
This is my code:
$(document).ready(function() {
$("#randomBtn").on("click",function(){
var answer="";
var random= Math.floor(Math.random() * (3)+1);
switch(random) {
case 1:
answer=['"La mujer es como la polvora, si no la tratas con cuidado, explota"', "Miguel Moyá"];
break;
case 2:
answer= ['"Y los españoles, muy españoles y mucho españoles!!"', "Rajoy"];
break;
case 3:
answer= ['"El mundo esta dividido en tres grandes grupos, el de los que sabe contar, y el de los que no."',"Homer J. Simpson"];}
$(".message").html(answer[0]);
$(".name").html(answer[1]);
var tweet= "https://twitter.com/intent/tweet?text=+";
answer=answer[0].split(" ");
answer=answer[0].join("%20");
tweet+= answer[0];
tweet+= "%20"+ answer[1];
console.log(answer);
$("#tweetBtn").attr("href",tweet);
});
});My problem is that $("#tweetBtn").attr("href",tweet); don't work, also I write console.log(answer); for search problems, and console don't print anything
;_(
help please
Does anyone know where, on the Open Weather API's website, you can find all possible API responses ?
@kevinkuehler http://openweathermap.org/current
@Dueldrawer8 yeah it shows examples. cant find all possible responses
isn`t it here? http://openweathermap.org/api
@kevinkuehler the best way to do it IMO is to try it out in your codepen..first get an api key.. then put it in a .getJSON or .ajax call with a callback function and console.log it
@Dueldrawer8 THX
kevinkuehler sends brownie points to @dueldrawer8 :sparkles: :thumbsup: :sparkles:
:cookie: 411 | @dueldrawer8 |http://www.freecodecamp.com/dueldrawer8
@kevinkuehler dunno if that helps answer your question.. be sure to use JSON.stringify() to make the JSON data easier to read
if you need help ill be on for maybe another 15-20 min
just open the console and you should see all the info it provides.. although thats only on the current weathe
@kevinkuehler here is a link for all the weather conditions which is what you mainly need.. http://openweathermap.org/weather-conditions
@Dueldrawer8 your site looks nice. i like that you used a geo-locator api instead of the default javascript one... no need to confirm
@kevinkuehler indeed, thanks man :) i still need to do some work on it.. i'm going back and touching some things up on it specifically making my projects responsive/mobile
dueldrawer8 sends brownie points to @kevinkuehler :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @kevinkuehler |http://www.freecodecamp.com/kevinkuehler
hi, can someone help me out with mediaqueries / fluid grids??
how to add image from internet
@gsr3568 <img src="http://www.whatEverTheUrlIs">
Hola, can someone please help me figure out where the grey hover effect is coming from over the menu: http://businessdemo1.xyz/#
@flyyyperth sure
@flyyyperth are you still around?
I'm here @Benalron (:
@flyyyperth are you trying to do it yourself?
I'd love to get rid of the grey effect and keep the underlined orange line under the text for a:active
Marc, I was know this formula but I forget it
I will try to figure out just sec
usually its using the psuedo selector ::hover
I see
True
@Benalron @CoderGeek700 Thanks guys, do you have any idea for code that could disable the grey background?
flyyyperth sends brownie points to @benalron and @codergeek700 :sparkles: :thumbsup: :sparkles:
:cookie: 30 | @codergeek700 |http://www.freecodecamp.com/codergeek700
:cookie: 371 | @benalron |http://www.freecodecamp.com/benalron
How would I make the active link underlined with my hover class ?
Marc, You are most welcome
So far I can only underline the whole element, as you can see on "HOME" , but not the actual text
<head><link href="" rel="stylesheet" type="text/css"></head>
Marc, I don't have that experiecne but I hope that's what you expect it from me
Guys, please correct me if am I wrong ?
bonfire mutation
:fire:Bonfire: Mutations :link:
function mutation(arr) {
return arr;
}
mutation(['hello', 'hey']);Return true if the string in the first element of the array contains all of the letters of the string in the second element of the array.
more info:
bf details|bf links|hint
Cany anyone help me
hint
:construction: Spoilers are only in the Bonfire's Custom Room :point_right:
Goodday all, can anyone tell me how can I use col-xs and md, to center a list of elements in my code? Here's the link to the excercise: http://codepen.io/CarlosFerrerCeldran/pen/BzJvVK
I can't figure out how to center or align the list justifying it to the left side leaving a margin
Ok, I managed to align the list to the left margin, how can I move it a bit more to the center, with row command?
@CarlosFerrerCeldran hi
@CarlosFerrerCeldran add this on your css
.text-centers{
position: relative;
right:-20px;
}and replace your text-center class of the list with text-centers
thanks a lot Theodore.P, I played a little with that command and got a great result!
@CarlosFerrerCeldran no problem...
@CarlosFerrerCeldran you can also use "col-sm-6" type classes together with "col-sm-offset-2" type ones, which will create an offset on the left based on the number of rows indicated in the offset class
@Guvargam
hi everyone!
is there anyone here who completed “ Advanced Algorithm Scripting “ section on the course series??? please someone say yes :(
hi everyone!
is there anyone here who completed “ Advanced Algorithm Scripting “ section on the course series??? please someone say yes :(
How do I get rid of the spacing between these columns? http://codepen.io/drunktuts/pen/Gqywjd
@pizzapgh on your @media(min-width:550px) you have a margin-left of 4%. take a look at that
@sorinr Okay, I see what the margin-left 4% is doing, but adjust that to 0 is not fixing my problem. I get margin on the right instead.
I just want the columns to nudge up against each other
setting margin-left to 0%, and .one-half.column to width: 50%; works for me. Thanks @sorinr
pizzapgh sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 470 | @sorinr |http://www.freecodecamp.com/sorinr
@pizzapgh welcome
i dont know how to start in Build a Tribute Page
@ahmedvip2008 just choose the subject first. the tribute page is a page about something you like. it can be anybody
@ahmedvip2008 I recommend using bootstrap from scratch but if you find it difficult you can always use a template :http://startbootstrap.com/
tweak it with adittional css and then try to mimic it from scratch using only what you need , thats a great practice
is there a shorthand in sass /scss for the following: I defined
$colors: #A8E0E1,#5A96BB,#75448C,#C46CAA;
and I want to access them by place for example
body{
background-color: nth($colors,1);
}
Ofcourse this works but is there a shorter way to do it ?
@Wo1v3r what do you mean by a shorter way?
I'm a little stuck on how to change from F to C on the weather app. I'm using ajax to make api requests, and I wanted to use a global var to keep track of weather the app should use F or C, but that doesn't seem possible since the requests is async.
@sorinr without nth , as in just typing $colors[1] etc
what i just said doesnt work, but is there a way to "make it work"
?
@mkrump just convert the Fahrenheit to celsius using the formula
@Wo1v3r $colors: #A8E0E1,#5A96BB,#75448C,#C46CAA; its not defined as an array
@Wo1v3r no need to request again
@sorinr That's a List right?
@Wo1v3r then why not: $colors: "#A8E0E1" , "#5A96BB" , "#75448C" , "#C46CAA"; ?
Ok so if I do that how do I give body that color for example? @sorinr
It will omit the quotations?
how to add different images by using code pen???
@Wo1v3r http://clubmate.fi/lists-in-sass-syntax-and-use-cases-with-examples/ maybe it will help u
@sorinr thanks sorin, I need a refresh on mixins too , from my search it looks like mixins are a good solution + shorter script
:cookie: 473 | @sorinr |http://www.freecodecamp.com/sorinr
wo1v3r sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
@Wo1v3r I'll read that and practice mixins fogot all about it, I learned SCSS pretty througholy in teamtreehouse but never practiced it so thats what happens : ]
guys where can i get images to insert in the tribute project?? I have tried copying links from google but it won't allow them!!
@shivam13 What do you mean?
@FrancescaDD Can you link your codepen?
i just started !
i want to make local weather app so in that i need to add images as per local weather
@FrancescaDD use this : <img src="http://media.melty.it/article-2750332-fb/emma-watson-un-heforshe.jpg">
If I want to use my own photo in my codepen project, is there a place I can upload/host that photo directly with codepen?
@Wo1v3r You need the full path to the image, the link you had was to the search engine's image display , your path needs to end with .jpg.png etc
@yodermail assets at the bottom
oops mentioned myself lol
thanks!
(thanks @mkrump )
yodermail sends brownie points to @mkrump :sparkles: :thumbsup: :sparkles:
:cookie: 201 | @mkrump |http://www.freecodecamp.com/mkrump
@Wo1v3r thanks!!
francescadd sends brownie points to @wo1v3r :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @wo1v3r |http://www.freecodecamp.com/wo1v3r
@yodermail @mkrump I think assets is a pro feature, you can alternatively use imgur \dropbox etc if you dont have pro
yw
@FrancescaDD go on
can u help me??? @Wo1v3r
@shivam13 I personally used openweather's images but I have a new good way to implement it I'll find the link
@shivam13 http://websygen.github.io/owfont/
thanks @Wo1v3r
shivam13 sends brownie points to @wo1v3r :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @wo1v3r |http://www.freecodecamp.com/wo1v3r
Hi everyone, I'm working with React projects but I have a problem in a Leaderboard project, in the line 46 don't update "order" state. I don't know what happend, any idea? http://codepen.io/mirabalj/pen/AXxqpx
True, didn't think of dropbox. That's a good idea. thanks @Wo1v3r
yodermail sends brownie points to @wo1v3r :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @wo1v3r |http://www.freecodecamp.com/wo1v3r
@shivam13 nice job
thanks @sorinr
shivam13 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 474 | @sorinr |http://www.freecodecamp.com/sorinr
Hello can I prevent reloading entire page after clicking a button?
any clue why when I attempt to use jQuery to load an image it just blanks out? http://codepen.io/zarker24/pen/jAYJgW?editors=1010
Am I doing something wrong?
@pae4557 you forgot
"" around image src see below for reference<img class="img-responsive" src="' + userImage + '" width="300" height="300">
@pae4557 you have set a space later userImage + '
@vinaypuppal correct!
Oops! Thanks @mirabalj and @vinaypuppal
pae4557 sends brownie points to @mirabalj and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 417 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:cookie: 355 | @mirabalj |http://www.freecodecamp.com/mirabalj
@pae4557 which img?
I'm working with React projects but I have a problem in a Leaderboard project, in the line 46 don't update "order" state. I don't know what happend, any idea? http://codepen.io/mirabalj/pen/AXxqpx
@mirabalj can you console.log(pos) and see what u get?
hey guys does it looks good? http://dagman.github.io/
@sorinr yes, the same values. It's crazy.
Line 43 and 48, before and after
@mirabalj move it where do have the logic that can change it to see what happens
Do you guys remove sass files when deploying to live sites? They don't actually do anything right, after they are compiled?
@danielpitulia I'ts necessary sass files? I don't think so.
compile sass files to css and deployment these. Seems like a good idea.
@sorinr I change a bit getData function, this works now. But the mistery continues :smile:
Hi, I'm having trouble with the openweather API. I get the users longitude and latitiude and get a url that works fine (I see the JSON) but when I try and store data into variables it returns undefined.
var url = "api.openweathermap.org/data/2.5/weather?lat=" + latitude+"&lon="+longitude+"&appid=5811a808db020c08d96e634ccf09bb52";
$.getJSON(url,function(data){
var location = data.name;
});
console.log(location);
@jcob95 your declaration is inner function(data), declare location outside, with url.
it is declared outside
Oh sory, wrong var
@jcob95 not really
:smile:
var url = "api.openweathermap.org/data/2.5/weather?lat=" + latitude+"&lon="+longitude+"&appid=5811a808db020c08d96e634ccf09bb52";
$.getJSON(url,function(data){
conditions = data.name;
});
console.log(conditions);
I declared conditions at the beginning
still returns undefined
@jcob95 you should validate the JSON returned. What happend if received error?
´´´
{
cod: "404",
message: "Error: Not found city"
}
´´´
{
cod: "404",
message: "Error: Not found city"
}
´´´
I agree I need to do this, but for now, provided there is no error, the variables should not return undefined. Unless there is an error I haven't seen
@jcob95 what JSON is returned? Log your data var.
reeturned undefined
Ah, don't forget "http://" in url. @jcob95
It's not magic :smile:
I added it, but unfortunately it still returns undefined
@jcob95 What happens if you past the url in your browser? Do you get the data you want?
Yes
it returns this (removed my location purposely)
weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"base":"cmc stations","main":{"temp":296.42,"pressure":1023,"humidity":73,"temp_min":295.15,"temp_max":297.59},"wind":{"speed":4.6,"deg":250},"clouds":{"all":0},"dt":1468696915,"sys":{"type":1,"id":5078,"message":0.01,"country":"GB","sunrise":1468641828,"sunset":1468699897}
weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"base":"cmc stations","main":{"temp":296.42,"pressure":1023,"humidity":73,"temp_min":295.15,"temp_max":297.59},"wind":{"speed":4.6,"deg":250},"clouds":{"all":0},"dt":1468696915,"sys":{"type":1,"id":5078,"message":0.01,"country":"GB","sunrise":1468641828,"sunset":1468699897}
is my syntax for accessing the array correct?
@jcob95 show your code in a tool like jsfiddle or codepen, please.
What do you need @jcob95 ?
@jcob95 property "name" don't exists in JSON returned
@jcob95 - you need to put an "http://" in your URL for the weather site, at least that's one thing...
@jcob95 A couple of issues.
navigator.geolocation requires HTTPS, but your weather API only works over HTTP. Try using http://ip-api.com/json for location or choose a weather api that supports HTTPS (like forecast.io or weather underground)
Your location variable is scoped to your anonymous getJSON function. To use it elsewhere, pass it to another function like:
navigator.geolocation requires HTTPS, but your weather API only works over HTTP. Try using http://ip-api.com/json for location or choose a weather api that supports HTTPS (like forecast.io or weather underground)
Your location variable is scoped to your anonymous getJSON function. To use it elsewhere, pass it to another function like:
$.getJSON(url,function(data){
var location = data.name;
logToConsole(location)
});
function logToConsole(location) {
console.log(location)
}
@jcob95 - I was going to add that I ran it on Firefox, where the geolocation still works in "http://". Just adding the "http://" to your openweather URL looks like it fetches the data. @TylerMoeller 's explanation of the problem with HTTP vs. HTTPS and geolocation and openweather is correct.
@neecholaus remove the li settings in your CSS, close your <a> tags, and add class="navbar nav" to your ul:
<ul class="navbar nav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
</ul>
Geolocation should work fine for Firefox and Safai with HTTP, it is Chrome that requires the HTTPS. That may be the problem you are running into.
I need some help with a two-dimensional array. What I am trying to do is have a random music video displayed with the lyrics when the user clicks the button. I can get it to work when there's only one item in the array, but can't figure out how to display both.
Hi, I am nearly done with the random quote machine, however I have an issue with the Twitter button
The output in the twitter page keeps the tags and also does not return apostrophes and other special characters correctly
could anybody help me out?
@gabriela3001 One way is to use
.text() to get the text of the quote + author from the page. encodeURIComponent($('#quote').text() + ' ~ ' + $('#author').text())
It worked! Thank you so much!
I don't know how to pair both the lyrics and music video randomly and how to display that
How to ensure that elements don't slip behind a fixed nav when they're resized? Or really, what is the "best practice" for setting up a fixed nav?
Hi.
I’m learning webdev with Free Code Camp for about 3 months and I know some HTML, JavaScript, even Bootstrap, but I struggle with CSS. Now I’m close to finish Intermediate Front End Development Project from Free Code Camp - Built a Wikipedia Viewer.
But I want to be better with CSS, because my goal is that my projects look a lot better than now and I want a lot more control of my content.
Could you please recommend me best online courses and YouTube series besides of FCC. I'm constantly searching for new sources, but it is hard to find the best ones...
I’m learning webdev with Free Code Camp for about 3 months and I know some HTML, JavaScript, even Bootstrap, but I struggle with CSS. Now I’m close to finish Intermediate Front End Development Project from Free Code Camp - Built a Wikipedia Viewer.
But I want to be better with CSS, because my goal is that my projects look a lot better than now and I want a lot more control of my content.
Could you please recommend me best online courses and YouTube series besides of FCC. I'm constantly searching for new sources, but it is hard to find the best ones...
@elminsterrr devtips on youtube
hi guys, I have a var called quotes that has 2 properties
"quote" and "author", I want to make it so that if the author = a particular name, the background changes
"quote" and "author", I want to make it so that if the author = a particular name, the background changes
function randomQuote() {
var random = quotes[Math.floor(Math.random() *quotes.length)];
$("#thisquote").text(random.quote);
$("#thisauthor").text("-" +random.author);
};
function changeColor() {
var change = colors[Math.floor(Math.random() *colors.length)];
$('body').css("background", change);
$('#getQuote').css("background", change);
};
$('.btn').click(function() {
randomQuote();
$("#header").remove();
if ( quotes["author"] == "Kramer") {
$("body").css("background-image", "linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('file:C:/Users/user/Desktop/freecodecamp/random quote/images/kramer.jpg'");
};
});
@samosale Thx for info. Is this with that bald, bearded guy? :)
elminsterrr sends brownie points to @samosale :sparkles: :thumbsup: :sparkles:
:cookie: 660 | @samosale |http://www.freecodecamp.com/samosale
@elminsterrr yeah
@samosale Ok
@willcodes can I see your
quotes object?
var quotes = [{
"quote":"Boy, these pretzels are makin' me thirsty.",
"author":"Kramer"
},
{
"quote":"If you know what happened in the Mets game don't tell me, I taped it. Hello?",
"author":"Jerry"
},
{
"quote":"It became very clear to me sitting out there today that every decision I've made in my entire life has been wrong. My life is the complete opposite of everything I want it to be. Every instinct I have, in every aspect of life, be it something to wear, something to eat - it's all been wrong.",
"author":"George"
},
{
"quote":"I'm not a lesbian. I hate men, but I'm not a lesbian",
"author":"Elaine"
},
{
"quote":"Looking at cleavage is like looking at the sun. You don't stare at it. It's too risky. Ya get a sense of it and then you look away.",
"author":"Jerry"
},
{
"quote":"You have the chicken, the hen, and the rooster. The chicken goes with the hen... So who is having sex with the rooster",
"author":"Frank Costanza"
},
{
"quote":"The cat - mrrreeeooowww - is out of the bag!",
"author":"Kramer"
},
{
"quote": "Jerry, just remember, it's not a lie if you believe it.",
"author": "George"
},
{
"quote": "Do you ever get down on your knees and thank God you know me and have access to my dementia",
"author": "George"
},
{
"quote": "We don't know how long this will last. They are a very festive people.",
"author": "Elaine"
},
{
"quote": "You know I always wanted to pretend I was an architect.",
"author": "George"
},
{
"quote": "If you're not gonna be a part of a civil society, then just get in your car and drive on over to the East Side.",
"author": "Kramer"
},
{
"quote": "I'm speechless. I have no speech.",
"author": "George"
},
{
"quote": "I have been performing feats of strength all morning.",
"author": "Frank Costanza"
},
{
"quote": "I lie every second of the day. My whole life is a sham.",
"author": "George"
},
{
"quote": "Hi, my name is George, I'm unemployed and I live with my parents.",
"author": "George"
},
{
"quote": "Just remember, when you control the mail, you control... information.",
"author": "Newman"
},
{
"quote": "I don't trust the guy. I think he regifted, then he degifted, and now he's using an upstairs invite as a springboard to a Super bowl sex romp.",
"author": "Jerry"
},
{
"quote": "I don't think I've ever been to an appointment in my life where I wanted the other guy to show up.",
"author": "George"
},
{
"quote": "Boy, a little too much chlorine in that gene pool.",
"author": "Jerry"
},
{
"quote": "Do you have any idea how much time I waste in this apartment?",
"author": "Kramer"
},
{
"quote": "See, this is what the holidays are all about. Three buddies sitting around chewing gum.",
"author": "Kramer"
},
{
"quote": "The carpet sweeper is the biggest scam perpetrated on the American public since One Hour Martinizing.",
"author": "Kramer"
},
{
"quote": "Here's to feeling good all the time.",
"author": "Kramer"
},
{
"quote": "I'll be back. We'll make out.",
"author": "David Puddy"
},
{
"quote": "Ah, look, I? I'm sorry to bother you, but I'm a US postal worker and my mail truck was just ambushed by a band of backwoods mail-hating survivalists.",
"author": "Newman"
},
{
"quote": "You very bad man, Jerry. Very bad man.",
"author": "Babu"
},
]
lool dont laugh
@willcodes so it is an array of object
oh do I have do put [1].author?
er [0]
YES
IT WORKED
@samosale THANK YOU
willcodes sends brownie points to @samosale :sparkles: :thumbsup: :sparkles:
:cookie: 661 | @samosale |http://www.freecodecamp.com/samosale
you need random number between quotes an ["autor"] :
quotes[random]["author"]
@willcodes yes you got it
help Change Text Inside an Element Using jQuery
:point_right: challenge change text inside an element using jquery [wiki]
Change Text Inside an Element Using jQuery
Using jQuery, you can change the text between the start and end tags of an element. You can even change HTML markup.
jQuery has a function called .html() that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.
Here's how you would rewrite and italicize the text of our heading:
$("h3").html("<em>jQuery Funhouse</em>");jQuery also has a similar function called .text() that only alters text without adding tags. So when using .html() please remember that you will be editing the whole markup and not just the text.
:pencil: read more about challenge change text inside an element using jquery on the FCC Wiki
So I have one div item floated left and another floated right. when the screen resizing, one automatically disappears. How can I determine which floating element is the one that disappears?
@kevinkuehler - you could do something like change the background color of one or the other, border color or something? Or use the browser dev tools to examine the HTML elements - just a couple quick thoughts.
Hi, Can you look for one second on my Vikipedia Viewer? https://codepen.io/ElminsterWhite/full/ZOvdzz
Any ideas how I can prevent results from pushing searchbox out of the site? :worried:
hey guys does anyone tried foundation 6 flexbox grid mixins?