hi everyone, need help on a exercice, it seems to work when i test but i see any validation from the validation button so they might be errors that i can see. Its the exercice about capitalizing the first letter of each words. Here the code. Any advice ?
function titleCase(str) {
var sel = str.toLowerCase().split(" ");
var res = [];
for ( var i = 0 ; i < sel.length ; i++) {
res += sel[i][0].toUpperCase()+sel[i].slice(1)+ " ";
}
res = res.replace(/\sthe\s/gi, " THE ");
res = res.replace(/\sof\s/gi, " OF ");
return res;
}
titleCase("I'm a little tea pot");
resultt here // " I'm A Little Tea Pot"
How can i make my slideshow images smaller. i tried a couple of methods but nothing seems to be working. https://codepen.io/bestintown23/pen/xYjbxd
If that's not working there's another element making it off. A trick to try then is adding !important after the width/height (e.g. width: 50% !important) so it cancels those out. changing the background colors of your divs will also help you figure out what is changing what on the page.
Cant anyone help me understand this quirk of flexbox? I have a child div that is responsive, with a max-width of 600px. I'm trying to create a two column layout and have the layout shrink until a specified width then stack. However, when I put display: flex on the container, the responsiveness of my child divs isn't obeyed.
QUick mp4 showing what I mean
gah, gitter makes you DL, lemme see if I can gif
@abohannon its better to see the code working. Put it in codepen
@krennical_twitter dotn use
!important it's rarely if ever needed
:cookie: 490 | @ezioda004 |http://www.freecodecamp.org/ezioda004
@abohannon It's hard to tell why it's giving you that behavior. This is one way to stack columns with flexbox: https://s.codepen.io/anon/pen/QQPEpZ
@gulsvi the styles are all within multiple react components, so it would be a lot of effort to compile all that in a codepen at the moment. But I appreciate your example, that's exactly what I'm looking to do, but for some reason, the child div when it is placed inside a flex container, loses it's responsiveness and it's parent only resizes to the child's max-width property.
anyone have experience with images on github pages? I have read that you are supposed to supply the image url with the url to the image file (github/image/whatever), but I have a site that just has it in the project directory and it works fine. Well I have another page with the same structure and the image doesn't load.
Otherwise, you can use rawgit to get a hostable link to the file: https://rawgit.com/
Sometimes, it just takes a while for the image to propagate - in my experience though, never more than 10 minutes or so
Images can't load without a path specified, but happy to take a closer look if you want to point to the repo
Check out the image source for the background in the css
in the random quote generator I have the image src just as the image name, because it's in the same directory, same as normal hosting
but in the thank you page I have to specify the whole url, it wouldn't work with just the name
super easy, just send a post request to their website with your email address and it sends whatever was in the form to you
'''
$(document).ready(function(){
var url = "https://fcc-weather-api.glitch.me/api/current?";
var api;
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(pos){
api = url + "lat=" + pos.coords.latitude + "&" + "lon=" + pos.coords.longitude;
$.getJSON(api, (function(data){
$("#loc").html(data.name + ", " + data.sys.country);
$("#temp").html(data.main.temp + "<button id='C' class='btn btn-default'><b>C</b></button>");
$("img").attr("src", "http://openweathermap.org/img/w/" + setIcon(data.weather[0].id) + ".png");
function setIcon(num){
if (200 <= num && num <= 232){
return "11d";
} else if ((300 <= num && num <= 321) || (520 <= num && num <= 531)){
return "09d";
} else if (500 <= num && num <= 504){
return "10d";
} else if (num == 511 || 600 <= num && num <= 622){
return "13d";
} else if (num == 800){
return "01d";
} else if (num == 801){
return "02d";
} else if (num == 802){
return "03d";
} else if (num == 803 || num == 804){
return "04d";
} else {
return "01d";
}
}
}));
});
}
$(".btn").css("color", "orange");
});
'''
$(document).ready(function(){
var url = "https://fcc-weather-api.glitch.me/api/current?";
var api;
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(pos){
api = url + "lat=" + pos.coords.latitude + "&" + "lon=" + pos.coords.longitude;
$.getJSON(api, (function(data){
$("#loc").html(data.name + ", " + data.sys.country);
$("#temp").html(data.main.temp + "<button id='C' class='btn btn-default'><b>C</b></button>");
$("img").attr("src", "http://openweathermap.org/img/w/" + setIcon(data.weather[0].id) + ".png");
function setIcon(num){
if (200 <= num && num <= 232){
return "11d";
} else if ((300 <= num && num <= 321) || (520 <= num && num <= 531)){
return "09d";
} else if (500 <= num && num <= 504){
return "10d";
} else if (num == 511 || 600 <= num && num <= 622){
return "13d";
} else if (num == 800){
return "01d";
} else if (num == 801){
return "02d";
} else if (num == 802){
return "03d";
} else if (num == 803 || num == 804){
return "04d";
} else {
return "01d";
}
}
}));
});
}
$(".btn").css("color", "orange");
});
'''
$(document).ready(function(){
var url = "https://fcc-weather-api.glitch.me/api/current?";
var api;
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(pos){
api = url + "lat=" + pos.coords.latitude + "&" + "lon=" + pos.coords.longitude;
$.getJSON(api, (function(data){
$("#loc").html(data.name + ", " + data.sys.country);
$("#temp").html(data.main.temp + "<button id='C' class='btn btn-default'><b>C</b></button>");
$("img").attr("src", "http://openweathermap.org/img/w/" + setIcon(data.weather[0].id) + ".png");
function setIcon(num){
if (200 <= num && num <= 232){
return "11d";
} else if ((300 <= num && num <= 321) || (520 <= num && num <= 531)){
return "09d";
} else if (500 <= num && num <= 504){
return "10d";
} else if (num == 511 || 600 <= num && num <= 622){
return "13d";
} else if (num == 800){
return "01d";
} else if (num == 801){
return "02d";
} else if (num == 802){
return "03d";
} else if (num == 803 || num == 804){
return "04d";
} else {
return "01d";
}
}
}));
});
}
$(".btn").css("color", "orange");
});
ah got it
:cookie: 316 | @njm8 |http://www.freecodecamp.org/njm8
so it sends the request, you get the response from weather api, THEN it creates the button. but that all happens inside the getjson call
The response can take some time.so what the browser sees is
var url
var url
var api
getJson