zenzate sends brownie points to @alan-redding :sparkles: :thumbsup: :sparkles:
:cookie: 253 | @alan-redding |http://www.freecodecamp.com/alan-redding
@idallenbach You can use a margin to move your list further to the right, but you may want to use CSS Media Queries to help as the screen changes size. With bootstrap, you can use the grid system and use a column offset: http://getbootstrap.com/css/#grid-offsetting
idallenbach sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1425 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Heres my codepen
I was using the browsers location with open weather
someone here told me I should try ipinfo.io instead for the location
I'm still having issues
var string=[["t","w","o"],["t","e","a"]];
console.log(string.length());
cuz length is a property not a function ...
remove the () @Hello911
remove the () @Hello911
@chocolatechimpcookie If you call APIs over HTTP, your codepen's address also needs to begin with http. Open your codepen with this URL instead:
http://codepen.io/chocolatechimpcookie/pen/dNZvNP
chocolatechimpcookie sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1426 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
is that javascript?
you don't need the () after length
@moigithub
hello911 sends brownie points to @chocolatechimpcookie :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @chocolatechimpcookie |http://www.freecodecamp.com/chocolatechimpcookie
hey guys, I'm trying to setup my containers to create a dynamic menu for a restaurant website and I need a little help.
here are my container variables
what i'm trying to do in the picture is place the 3 variables indicated in red in the HTMLdishInfoContainer variable where %data% is. my question is, how do I replace the %data% in the HTMLdishInfoContainer variable with multple variables?
var x = <h1>data</h1><h2>data</h2>...
ill take that as a yes
@moT01 well actually i'll be using this JSON to supply the data: var menu = {
"dishes" : [
{
"name": "Beef Sticks",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/beef-sticks.jpg"],
"altText": "beef-sticks"
},
{
"name": "Stuffed Chicken",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/stuffed-chicken.jpg"],
"altText": "stuffed-chicken"
},
{
"name": "Lot Cha",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/lot-cha.jpg"],
"altText": "lot-cha"
},
{
"name": "Fried Chicken",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/fried-chicken.jpg"],
"altText": "fried-chicken"
},
{
"name": "Chicken Patty",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/chicken-patty.jpg"],
"altText": "chicken-patty"
},
{
"name": "Papaya Salad",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/papaya-salad.jpg"],
"altText": "papaya-salad"
},
{
"name": "Chow Mein",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/chow-mein.jpg"],
"altText": "chow-mein"
},
{
"name": "Eggrolls",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/eggrolls.jpg"],
"altText": "eggrolls"
},
{
"name": "Beef Pahlok",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/Beef-Pahlok.jpg"],
"altText": "Beef-Pahlok"
},
{
"name": "Fried Rice",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/fried-rice.jpg"],
"altText": "Fried-Rice"
},
{
"name": "Pho",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/pho.jpg"],
"altText": "pho"
},
{
"name": "Spring Rolls",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/spring-rolls.jpg"],
"altText": "spring-rolls"
},
{
"name": "Chicken/Beef Larb",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/chicken-beef-larb.jpg"],
"altText": "chicken-beef-larb"
},
{
"name": "khmer shaved ice",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/khmer-shaved-ice.jpg"],
"altText": "khmer-shaved-ice"
},
{
"name": "Shaved Ice Sundae",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/shaved-ice.jpg"],
"altText": "shaved-ice"
},
{
"name": "Boba",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/boba.jpg"],
"altText": "boba"
},
{
"name": "Thai Tea",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/drinks.jpg"],
"altText": "drinks"
}
]
}
"dishes" : [
{
"name": "Beef Sticks",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/beef-sticks.jpg"],
"altText": "beef-sticks"
},
{
"name": "Stuffed Chicken",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/stuffed-chicken.jpg"],
"altText": "stuffed-chicken"
},
{
"name": "Lot Cha",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/lot-cha.jpg"],
"altText": "lot-cha"
},
{
"name": "Fried Chicken",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/fried-chicken.jpg"],
"altText": "fried-chicken"
},
{
"name": "Chicken Patty",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/chicken-patty.jpg"],
"altText": "chicken-patty"
},
{
"name": "Papaya Salad",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/papaya-salad.jpg"],
"altText": "papaya-salad"
},
{
"name": "Chow Mein",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/chow-mein.jpg"],
"altText": "chow-mein"
},
{
"name": "Eggrolls",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/eggrolls.jpg"],
"altText": "eggrolls"
},
{
"name": "Beef Pahlok",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/Beef-Pahlok.jpg"],
"altText": "Beef-Pahlok"
},
{
"name": "Fried Rice",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/fried-rice.jpg"],
"altText": "Fried-Rice"
},
{
"name": "Pho",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/pho.jpg"],
"altText": "pho"
},
{
"name": "Spring Rolls",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/spring-rolls.jpg"],
"altText": "spring-rolls"
},
{
"name": "Chicken/Beef Larb",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/chicken-beef-larb.jpg"],
"altText": "chicken-beef-larb"
},
{
"name": "khmer shaved ice",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/khmer-shaved-ice.jpg"],
"altText": "khmer-shaved-ice"
},
{
"name": "Shaved Ice Sundae",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/shaved-ice.jpg"],
"altText": "shaved-ice"
},
{
"name": "Boba",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/boba.jpg"],
"altText": "boba"
},
{
"name": "Thai Tea",
"price": "$5",
"description": "Description of what's in the dish and how it's cooked.",
"image": ["images/dishes/drinks.jpg"],
"altText": "drinks"
}
]
}
so I dont know if nesting the variables will work
amitp88 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 480 | @mot01 |http://www.freecodecamp.com/mot01
btw this is what the finished menu will look like:
dishinfocontainer = '<div class="menu-info">" + variable, variable, variable + "</div>';
something like that, ...not sure if you need the commas
i'll try it
so something like this right?
yea, something like that. not sure how you would want to separate them, i suppose the + should work i think
function titleCase(str) {
var string=str.split(" ");
for(var i=0;i<string.length;i++){
string[i].toLowerCase();
}
return string;
}
titleCase("I'M A liTtle tEa pot");
The problem seems to be with the for loop.
hello911 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 481 | @mot01 |http://www.freecodecamp.com/mot01
Hello. I need a little help with the Wikipedia viewer challenge. When you click on the search icon, how do you get a search form to display/run? This is what I have so far. Please let me know if I am heading the right direction? http://codepen.io/ibanton/pen/GrOBzR
@remdata need to do something with your form to get the input, ...set the input to a variable, plug that variable into your wikipedia url for your ajax call, ...then you will get the info with the users query
@remdata i would put all that css, for your transition thing into a different/unique css class and then add that class when its clicked
@remdata you don't have any search term functions in your JS
@moT01 . That helps to clarify things. I was not sure how to proceed. thanks.
remdata sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 482 | @mot01 |http://www.freecodecamp.com/mot01
@remdata k good, im not sure when im giving advice if im helping or confusing, ...or even giving good advice some times
@moT01 that was a great explanation to help @remdata it was easy to understand.
please provide feed back
this is my project hanks
am not able to get a smooth scroll into the sections
@bitcoinabdi looks like you need to adjust the spacing in your div's
On desktop its working well with full size
But on phone its smaller
@bitcoinabdi do you know how to use flex-box?https://css-tricks.com/snippets/css/a-guide-to-flexbox/
@rami90 did you design it for your phone first, then adjust with media queries in css?
@rami90 this may help https://www.html5rocks.com/en/mobile/responsivedesign/
rami90 sends brownie points to @lorrie01 :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @lorrie01 |http://www.freecodecamp.com/lorrie01
bitcoinabdi sends brownie points to @lorrie01 :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @lorrie01 |http://www.freecodecamp.com/lorrie01
input height and width of each div ?
Can someone please look at this and explain to me why my background images arent the right size. i was having an issue with spacing/formatting my doc. just trying to figure out http://codepen.io/Stevo914/pen/egexZq?editors=1100#0
@bitcoinabdi you can give each div a specific margin or padding and that can allow you to keep them from being on top of each other. this can also help https://css-tricks.com/almanac/properties/z/z-index/
Hi guys i have been stuck with this please help, what is wrong with my code..the last test is not passing
Sum all the prime numbers up to and including the provided number.
A prime number is defined as a number greater than one and having only two divisors, one and itself. For example, 2 is a prime number because it's only divisible by one and two.
The provided number may not be a prime.
sumPrimes(10) should return a number.
sumPrimes(10) should return 17.
sumPrimes(977) should return 73156.
function sumPrimes(num) {
var prime = [];
for(i = 2; i <= num; i++) {
if(i == 2 || i == 3 || i == 5 || i == 7) {
prime.push(i);
}else {
if(i % 2 === 0 || i % 3 === 0 || i % 4 === 0 || i % 5 === 0 || i % 7 === 0) {
continue;
}else {
prime.push(i);
}
}//end else
}//end for
num = prime.reduce(function(prev, curr) {
return prev + curr;
}, 0);
return num;
}
sumPrimes(977);
@Stevo99 you have all of your background images set to cover, they seem to be overlapping try this resource https://css-tricks.com/almanac/properties/b/background-image/
you are testing if it is divisible by 3 4 5...
prime means only divisible by 1 and itself
you could test each number between 2 and 1 less than the number and see if any of them come to 0
This message was deleted
@Lorrie01 thanks lorie let me look over the info. i used margin and padding to adjust before but it still caused irregular spacing so I tried to strip it down to something plain and simple
stevo99 sends brownie points to @lorrie01 :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @lorrie01 |http://www.freecodecamp.com/lorrie01
@moT01 I mean the correct size so it looks like the image that i found on the web. it seems way too close
can someone help me?
@Stevo99 close? zoomed in?
@Lorrie01 @moT01 Please, how can I fix the login at the right of the navbar and leave the other links before login near the center of the navbar, without breaking the link/login in the collapse .
? *
Could you take a look at my stack overflow question. Thanks- https://stackoverflow.com/questions/41917285/polymer-element-already-registered-error-for-paper-button
It is about polymer
@Renniesb - I don't know anything about polymer, but it looks like someone in the stackoverflow item posted an answer...
Hey all, I'm on the "Build a Personal Portfolio" challenge and am stumped on how to create a collapse-able menu bar as the example shows?
This is what I have so far: <header class="navbar navbar-default navbar-fixed-top" id="banner">
<div class="container"><a class="scrollable" href="#top"><img src="http://picresize.com/images/rsz_588d693126700.png" alt="Aspiring Developer" title="Aspiring Developer"/></a>
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></cpan></button>
<nav class="collapse navbar-collapse" id="navbar" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a class="scrollable" href="#top">About</a></li>
<li><a class="scrollable" href="#portfolio">Portfolio</a></li>
<li><a class="scrollable" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div class="container"><a class="scrollable" href="#top"><img src="http://picresize.com/images/rsz_588d693126700.png" alt="Aspiring Developer" title="Aspiring Developer"/></a>
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></cpan></button>
<nav class="collapse navbar-collapse" id="navbar" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a class="scrollable" href="#top">About</a></li>
<li><a class="scrollable" href="#portfolio">Portfolio</a></li>
<li><a class="scrollable" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
A little simple, but here is my Random Quote Machine if anybody wants to comment on it! Audio does not work on Safari though because of the .ogg audio from the Wikia.
my twitchtv code right now
if (a bunch of crap === true) {
do a bunch of crap
} else {
do lots of this other crap
}
Hey guys! I'm trying to build a calculator, but I'm having trouble with button positioning? Is there anything I can learn to help me position them correctly?
http://codepen.io/jimpix/pen/zNNBZr
http://codepen.io/jimpix/pen/zNNBZr
@KerryW1 body {
padding-top:70px;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-collapse.collapse.in{
display:block !important;
}
Why don't my table elements have spaces between them unlike MDN's tutorial?https://developer.mozilla.org/en/docs/Web/HTML/Element/table
http://codepen.io/jimpix/pen/zNNBZr
http://codepen.io/jimpix/pen/zNNBZr
Hey y'all, pretty stuck on the Twitter API project. Does anyone know what website I can go to in order to access the API?
I'm seeing this (https://dev.twitter.com/oauth/overview) but am unsure as to which API access I need
psyche, think I found my loophole. thanks anyway
Why don't my table elements have spaces between them unlike MDN's tutorial?https://developer.mozilla.org/en/docs/Web/HTML/Element/table
http://codepen.io/jimpix/pen/zNNBZr
http://codepen.io/jimpix/pen/zNNBZr
@playingwithinfinity you may add this in css:
table td{
padding: 10px;
}
can someone help me change purple column colors to matching jumbotron? http://codepen.io/awksfox/pen/dNVrwB?editors=1100
its silver here but on my codepen it looks purple
@philiplee15 something like:
div.col-xs-12{
background-color: #eee;
}if that you want
hey guys, I was just wondering if anyone knew any good resources to get like good at css. I know basic css, but ive seen people on codepen litterally draw things with css, shapes, etc. Does anyone have resources to acquire this skill level of css
how do i access the returned data outside the function?
function apiLookup(term, name) {
$.getJSON(api + apiTerms[term] + '/' + name + '?callback=?', function(data) {
return data;
})
}
@playingwithinfinity Your table looks different because you are using bootstrap.css. If you remove bootstrap.css, it will look like the table on MDN's tutorial.
@chriswingler you have to pass
data to another function because getJSON is asynchronous
chriswingler sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
I gave the wrong link - updated it above. That one has a better answer. Just figured this out today when doing the weather challenge...
chriswingler sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: chriswingler already gave skycoder01 points
Hey, the Wiki Viewer project, any tips to improve the style? : https://codepen.io/FortMax/pen/bgYJwqs
Hi, can anyone tell me how to remove vertical gaps between the page sections as in the Portfolio page project example?
Why does my Bootstrap table look so crappy? How can I improve it? https://codepen.io/jimpix/pen/zNNBZr
can someone tell me, why the text is not changed based on the properties of my object? I already tried it with a string, so the on-click action should work in general. http://codepen.io/alexg1990/pen/YNELNX
@playingwithinfinity strange, in the preview at codepen it doesn't work at all, here it's always changing to the 2nd quote, although I used Math.random.
@playingwithinfinity and the shown text is wrong. It displays "Here is quote number2" although I have no equal string, only "Quote 2". I am so confused right now
you guys, I already have my own portfolio website created http://www.pratikratnaparkhi.com, do I really need to spend time building another one for free code camp?
Hi Guys! Can anyone check my code here?
https://codepen.io/JDVariadic/pen/wWNqQW
I've managed to get the geolocation code to work yesterday; however, it doesn't seem to work now and there is nothing appearing at the center box.
did anyone ski[p the portfolio project and go straight to JS first?
@pratikr1593 Just link it. And then you're done.
@philiplee15 So did I.
Hello everyone.. I'm building a webpage and want to have in it a dropdown manu but it's not working.. i need to have under Solucoes a list of content... this is may code:
<nav class="navigation">
<ul>
<li>
<a href="a">Solucoes</a>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li><a href="#">Internet Dedicada Corporativa</a></li>
<li><a href="#">Transmissao de Dados</a></li>
<li><a href="#">IP-MPLS</a></li>
<li><a href="#">M2M</a></li>
<li><a href="#">Alojamento</a></li>
</ul>
</div>
</div>
<li>
<a href="a">Voz</a>
</li>
<li>
<a href="a">Internet</a>
</li>
<li>
<a href="a">Ready Business</a>
</li>
</ul>
</nav>
@ingundela You cannot create a drop-down with just HTML. You need CSS code as well
@NitinNair89 ok... but isn't at least appear in my browser under Solucoes what I have just coded?
@NitinNair89 so that I can style it?
@NitinNair89 the note that I already have the nav class= "navigation" list in my browser
@NitinNair89 now just want to add the drop down list of content
?
@ingundela
@ingundela Refer this - http://getbootstrap.com/examples/navbar/
@playingwithinfinity the horizontal space between the buttons is too big IMO. A really simple way to do something about that is setting a max-width for your body or table element using css.
That will put your table on the left side of the page though. If you want to center it, you can use a small trick by setting
margin: 0px auto (that means top and bottom margin for the element is 0px, and left and right should be set automatically by the browser, which means it will get centered in this case).
@NitinNair89 I'm getting confused now... I only need to add content under the existing list in the browser... I don't understand when you asking if I'm using bootstrap (need to read more on this)
@NitinNair89 my list is just not appearing on the page...
paste the whole URL
@NitinNair89 I see now the code I typed in now appearing in the right side of the page and not under Solucoesl as I want to
@ingundela Please go through all the steps here - http://www.w3schools.com/css/css_navbar.asp
@NitinNair89 thanks... I'll go through it and see I can fix this...
ingundela sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 386 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Yes i know @ingundela That's why do it step-by-step. Create a new one rather than editing the one you already have
body {
font-family: 'Roboto Slab', serif;
font-size: 30px;
background: linear-gradient(lightcoral, whitesmoke);
}https://plnkr.co/edit/O1KOUfiGGuYCCbdBqRAW?p=preview
i am having issues with placing this image in the html
especially in the local path
it disturbs all the layout
divs are skewed
or slanted as you say
Hi @devpaaji I am checking. Sorry my system got hanged
thats fine
@NitinNair89
@chungeric Add compatibility for all browsers for your background and try
@devpaaji Your
transform: skewY( 7deg); is skewing the div
.carousel:after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: 0;
transform-origin: right bottom;
transform: skewY( 7deg);
}
i want the image to appear under
carousel div class
<div class="carousel">
<div class="image-carousel">
<img src="assets/img/graph.png" />
</div>
</div>
yeah
Can you add external images in pluner?
*plunker
yes see I did
I can't see.. save it and give the link. The preview works only for you
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<div class="header-image">
</div>
<div class="carousel">
<div class="image">
<img src="https://photos-1.dropbox.com/t/2/AACeWkvAnAKick9mL19BFfAqhN0awzonUtSnUzd6Fff49Q/12/11126057/jpeg/32x32/3/1485698400/0/2/carousel_slide1.jpg/EO2spQgYnsMFIAIoAg/XY07dYeH5Js9GsFciYCZ-FlNQSG04KeD27pwMzkb9MY?dl=0&size=1280x960&size_mode=3" /> </div>
</div>
<div class="title">
</div>
</html>
?
The skew appears due to the CSS mentioned above. Remove that to remove the skew
so that i can explain
the error
I'm stuck on this API call, why does it not work? If I type in the URL in the address bar it gets me the result I expect. Yet, I never seem to reach success.
$(document).ready(function() {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=8e83f5c253e4e52246b437596d46c1e8",
success: function(data){
alert("Test!");
}
});
});cambscoder sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 387 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Right, I get this error message:
Mixed Content: The page at 'https://codepen.io/cambscoder/pen/VPrqrL' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=8e83f5c253e4e52246b437596d46c1e8'. This request has been blocked; the content must be served over HTTPS.
send @ jquery.min.js:4
ajax @ jquery.min.js:4
(anonymous) @ VM806 pen.js:2
j @ jquery.min.js:2
k @ jquery.min.js:2
jquery.min.js:4 XMLHttpRequest cannot load http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=8e83f5c253e4e52246b437596d46c1e8. Failed to start loading.
Mixed Content: The page at 'https://codepen.io/cambscoder/pen/VPrqrL' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=8e83f5c253e4e52246b437596d46c1e8'. This request has been blocked; the content must be served over HTTPS.
send @ jquery.min.js:4
ajax @ jquery.min.js:4
(anonymous) @ VM806 pen.js:2
j @ jquery.min.js:2
k @ jquery.min.js:2
jquery.min.js:4 XMLHttpRequest cannot load http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=8e83f5c253e4e52246b437596d46c1e8. Failed to start loading.
Weird because yesterday it worked. Maybe I was logged into http://codepen.io
yeah
ah no, the API has only http
so now I must use some cross-domain trick right?
so now I must use some cross-domain trick right?
How do I do that? @NitinNair89
right, that's what i had in mind but couldn't remember it's name of @NitinNair89
hmm, i seem to need to do some more things, i get the error
Origin: header is required
hello dear campers, please tell me how can I use a condition to check if thumbnail exists in the json object then I can append an <img> tag if it does not exist then just don't want to use <img>. here is my code. I am using template strings
$('#wiki').append(
`<a href=${url+pages[i].pageid} class="article" target="_blank">
<div>
${pages.thumbnail ? <img class="align-right" src=${pages.thumbnail.source} /
@NitinNair89 I couldn't resolve it sadly. So I just went back to loggin into Codepen through http
I'm doing the wikipedia viewer, and i've got a query but the title property isn't returning actual titles. It's giving me for example, 'Q19832958'
Anyone been here?
@chungeric I have used this which has images too https://en.wikipedia.org/w/api.php?action=query&format=json&prop=pageimages%7Cpageterms%7Cinfo%7Cextracts&generator=prefixsearch&redirects=1&formatversion=2&piprop=thumbnail&pithumbsize=300&pilimit=10&wbptterms=description&inprop=url&exsentences=3&exlimit=20&exintro=1&explaintext=1&exsectionformat=wiki&gpslimit=10&callback=?&gpssearch=yourQuery
@ghulamshabir alright.. but i'm just trying to get the title working right now. did you click my link? what do the titles say for you?
@chungeric this will return array of titles https://en.wikipedia.org/w/api.php?action=opensearch&search=thingtosearch&format=json&limit=10&callback=?
@ghulamshabir Okay thanks, i'll try to figure it out
chungeric sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
:star2: 1767 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
🙄
Hello. About the tribute page.. I must to use bootstrap? I find its a lot easy for me to do it with vanilla CSS with such simple html page
@alonl6 - you can use any library or simply use HTML and CSS directly.
Hey guys! please follow me on github https://github.com/sramakrishnan247 . I recently completed the first two api projects
I have a question for those familiar with developing web forms. Is it proper to use services like Formspree for a clients website or does it have to be built out of PHP and MySQL?
What are the best practices?
does anyone had a problem with bootstrap fullscreen modals adding padding-right: 15px on open? (just on linux though)
what steps are necessary?
else buy a domain and host it
just wanted to stick my head in and say a 'Hello World!' to all, from portland, oregon, u.s.a.
can anyone tell me why my typed.js is not working?
I started over on my portfolio page. I want my content to stay within my container no matter what the screen size is. Can someone tell me what's wrong? http://codepen.io/dadleatherwood/pen/QdOzzr
@NitinNair89 when i click on it, it doesnt go where i want it to. it cuts out stuff, because i used margin on the body i think
@dadleatherwood You are using too much margin styles which is breaking the grid you have. Please remove all unwanted margins
@nawkin - because you don't have links
<a href="...">...</a> or sub-menus to your li's for it to go anywhere.
@dadleatherwood for your h1, you've set
margin-left: -200px for instance, try and remove that as @NitinNair89 suggests
@Nawkin It goes to the section when clicked. Just add margin-top to the sections
@Nawkin you have to be the one to tell it where to go, using link tags.
dadleatherwood sends brownie points to @nawkin :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @nawkin |http://www.freecodecamp.com/nawkin
dadleatherwood sends brownie points to @voxgranular :sparkles: :thumbsup: :sparkles:
:cookie: 210 | @voxgranular |http://www.freecodecamp.com/voxgranular
@bigyan karki - it is not working because typed.js is jQuery plug-in and you're not including a CDN to jQuery in your codepen JavaScript settings, or as a
<script src="..."></script> in your HTML. the jQuery script reference should come before typed.js & your bootstrap.js
@Nawkin let me look again.
@faddah now its working
@faddah thank you so much :)
bigyankarki sends brownie points to @faddah :sparkles: :thumbsup: :sparkles:
:cookie: 118 | @faddah |http://www.freecodecamp.com/faddah
@faddah does that mean any jquery cdn should come before any other js library and files?
@Nawkin - still looking at your code...
hi, regarding the random quote machine, how do i fix the problem where i click the tweet button, it pops up but doesnt contain the quote?
that should give you some idea @darrenho97
i have a one page website with a navigation that scrolls to different sections of that page. the last section is short and has the footer below. if the footer is too short the scroll stops above the section it should scroll to. is there a way to make the footer take up all space left so the scroll works on every screen resolution? (the section varies in height ... so calc 100vh - section height isn't possible)
@darrenho97 or alternatively when you "share" something on twitter, what does the URL say? Visit any blog or video on Youtube and check the twitter share button link. :)
@bomholt Does your nav scroll to the footer as well?
I mean any links that scrolls the user to the footer?
@NitinNair89 no just the sections between header and footer
any way, I think it should be fine, users won't scroll deliberately to check the footer of the page. It should appear when the last section is viewed
the last section is shorter then 100% height on most resolutions
for sections
not footer
because the section can't be that high because of its content
is it okay to pm you?
@Nawkin - one thing, and this is just a don't put
<link stylesheet="..." /> in the <body> of your HTML, they should be between <head> tags above the <body>. still looking at why your anchor tags from the navbar aren't working...
or 90:10
nawkin sends brownie points to @faddah :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @faddah |http://www.freecodecamp.com/faddah
@faddah did you know why my cursor is down instead of in the header section?
@nawkin - i see you moved the
<link stylesheet="..." ... /> to the top, which is good, but it needs to be between <head> ... </head> tags.
in codepen, don't use anything in HTML window except the things that should appear between
<body>...</body> tags. Everything else should be placed in the pen settings
@NitinNair89 that's not a hard & fast rule about codepen, it's optional. it doesn't hurt anything, either way. you can put your
<link styleshee="..." /> or <script> tags in your HTML or in their codepen settings interface, either will work. i've done both, both work fine.
yeah right, but sometimes the <link> tag does not work and affects the other elements..helped fix such a issue with one of the campers
@Nawkin - in your css, you mean? which are you trying to fix, the "cut off" problem or that the links don't transfer you to those sections of the page? i'm working on your link issue first, as that seems most pressing.
@NitinNair89 you are correct that you have to know how to do CSS stylesheet links and
<script> tags correctly, and know the right order they need to be in for them to work, but that is true in any implementation of HTML/CSS.
@faddah i only see the problem with cutting off with the navigation bar. so yeah :/
@Nawkin - i don't really see your "cut off" problem, so i'm working on the links.
maybe im using wrong terms but i think we're talking about the same thing :D
Can i animate an svg avatar with css?
like close its eyes
and moves its mouth
@Nawkin - "cut off" to me is a visual thing — one element is bleeding down on another when you use it, as in "cutting off the other element," and i am not seeing that when i hover over your nav bar. the fact that when i click your "Contact" link and it doesn't jump me down to the bottom of the page is more disconcerting to me.
@Nawkin - one question - are you accessing your code pen through a mobile phone or tablet touch browser, or via a desktop/laptop with a touchpad or mouse?
@faddah when i click contact in the nav bar it takes me down though
@faddah only when i click about or portfolio it goes a little bit to low
can anyone explain why the cursor is in a new line?
Hi! Could someone pls check my JS part of code for typos and mistakes. My Random Quote Machine generates only one (first) quote; although i've set cache to false...?
http://codepen.io/PipsChips/pen/pRWRKd
http://codepen.io/PipsChips/pen/pRWRKd
How do you build a JS calculator? I've gotten the HTML and CSS done, but I have no idea how to perform the actual operations.
You get the elements value via JS, do the operations, then put that value in html using JS
Don't do it all at once, do one operation at a time
Displaying the operations is the hard part
Clicking and other stuff is pretty easy.
@bigyankarki Where is "typed-cursor" defined in HTML?
@Nawkin - i don't know why, but i'm getting a "404 not found" on your pen now in my desktop chrome browser. so maybe i'm not the one to help you. sorry.
@Nawkin - i have to leave now, in any case, sorry i couldn't be more help. re-post the question, maybe someone else can help.
does anybody see what i did wrong? when i click on about or portfolio on my navigationbar it almost does the right thing
but cuts out and it should show more
@Nawkin it goes to where you tell it to, ...the label is just hiding behind your menu
makes a big space though
nawkin sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 483 | @mot01 |http://www.freecodecamp.com/mot01
@Nawkin You can add a
<section id="about"> wrapping up the necessary elements. This will also make your HTML DOM good
Add sections for each group and then in CSS -
#about {
padding-top:70px;
}
respectively for all sections.
Hi! Could someone pls check my JS part of code for typos and mistakes. My Random Quote Machine generates only one (first) quote; although i've set cache to false...?
http://codepen.io/PipsChips/pen/pRWRKd
http://codepen.io/PipsChips/pen/pRWRKd
check it's CSS in their code and overwrite it in your pen. Maybe it has
display:block; or something instead of inline and that's why it appears on next line
*its
@PipsChips your getJSON is called only once when the document loads. Hence the click event also executes once since you wrote that inside the getJSON which is a wrong practice
Define your function outside getJSON but within document.ready() and pass on the
json data you retrieve as a function argument.
something like -
$(document).ready(function(){
function getQuote(){
// my getJSON call goes here
displayQuote(response); // call a function and pass the response from getJSON
};
function displayQuote(data){
//update HTML element values here using 'data' variable.
};
});
@NitinNair89 <span class="typed-cursor">'+this.cursorChar+"</span>")
i think its defined correctly
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
this is the CSS
its all animation
or do you mean i should add it on my HTML too?
you added it in HTML @bigyankarki
but the link is here
ya i just did it
I found the solution
try this -
<span class="typed-cursor"></span><span class="heading"></span>
add font-size to your heading class to look it like an <h1> tag ;) @bigyankarki
@NitinNair89 thank you :)
bigyankarki sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Good night Everyone!
Thanks for making me feel productive today :P
Had fun helping you all, learned a great many things as well :)
Until next time, cyz
You can always PM me, but please expect delay in response
bigyankarki sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: bigyankarki already gave nitinnair89 points
@thodorisanta One way is to find it via the greatest common divisor. (lcm(a,b) = (a*b)/gcd(a,b))
There is some pseudo code on Wikipedia that helps with the implementation:
There is some pseudo code on Wikipedia that helps with the implementation:
this is the program I am doing right now. and I just wanted to make it more dynamic
how do i make a smooth transition from a search button to a input field at the top of a page
?
Hi @bigyankarki just waking up :coffee: :) I'll take a look
i mean just give me the idea
yes and change it to an input field
One way is to replace the HTML with the input field when the user clicks the icon, and then use .animate() to change the position of the element.
.animate() takes CSS properties as arguments, so you might change the css to
({position: absolute;}, {top: 50px}) for example
I'm not an expert at this stuff yet - still learning it, but it's how I would start
why won't data.name append? i suspect it's related to pulling in multiple data sources, but don't know how to fix it.
function online(data) {
console.log(data)
if (data.stream !== null && data.stream !== undefined) {
$('#results').append(data.name);
}
}
function apiLookup(term1, term2, name, callback) {
$.getJSON(api + apiTerms[term1] + '/' + name + '?callback=?', callback)
$.getJSON(api + apiTerms[term2] + '/' + name + '?callback=?', callback)
}
for (var i = 0; i < user.length; i++) {
apiLookup('users', 'streams', user[i], online);
}
@chriswingler maybe the test isn't passing? got a pen? i could maybe help if you do
@TylerMoeller but how will i use this to find the lcm of more than 2 numbers
@thodorisanta You can sort from greatest to smallest, start with the first two, then go through the rest in the range
the streams are mostly = undefined
and when i console.log, i can see a couple users streaming starcraft
which doesn't include the stream variable in your test
@chriswingler
so you could keep your test and use
data.stream.channel.name to get the name
@chriswingler Use
|| instead of &&: if(data.stream !== null && data.stream !== undefined) {`
@TylerMoeller when i do that, it returns users that aren't streaming
@chriswingler Sorry, thought you were trying to get data.name to append from your question above
:star2: 1427 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
chriswingler sends brownie points to @tylermoeller and @mot01 :sparkles: :thumbsup: :sparkles:
@moT01 Just the markdown previewer - did the bar chart in jquery, need to do it in react
maybe halfway through the camper leaderboard, but keep going back to learn more algorithms instead of front-end work
need to do it in react? says you can use whatever, im lazily trying to play around with this d3 for that
I assume they want us to use react.js for all those challenges, but you're right, they don't say you have to use React
i think its react for that first group of challenges, and d3 for the 2nd group
I'm finding D3 to be a pain - most of the tutorials and documentation are for v2 and v3, but I'm thinking we should use v4... :)
So I keep finding how to convert what I learn in the tutorials to the newer method names. Lots of stack overflow searches for errors in my console
any idea if theyre going to put up the 'coming soon' learning challenges anytime soon
I saw a post from Quincy on the forums that they have the alpha version up and ready
I did the courses at codecademy
hey guys is there a way to use the browsers back button to close a bootstrap modal?
@bomholt Yes, lots of solutions on stack overflow. Ideally though, the modal can be presented in a way where the user sees a 'close' button and presses that instead.
now im confused @TylerMoeller just got told in main channel its not possible ^^
hey guys this challenge is complicated , i didnt understand what i should do https://www.freecodecamp.com/challenges/finding-a-remainder-in-javascript
@TylerMoeller there is a really big close button but if a modal is fullscreen lots of people... at least the ones which tested the page tend to use the browser back button
bomholt sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1428 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Hello Everyone, How are you today?
I am currently doing the Pomodoro Clock challenge and was wondering if anyone could point me toward a website where I can obtain a "clock" mp3 audio file to add to my code? Please and thank you :D
I am currently doing the Pomodoro Clock challenge and was wondering if anyone could point me toward a website where I can obtain a "clock" mp3 audio file to add to my code? Please and thank you :D
Hello all, can anyone help me understand the logic in this:
return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;
@mml3b Hello Mostafa, the remainder operator is a bit tricky. But think of it as an operator that automatically divides. So we know that if you divide 5 by 2, you'll have a remainder of 1. So think that the % operator won't give you 2.5 (which is what 5 divided by 2 is), but will give you 1 (which is what is left over from 5 divided by 2)...hope that helps
@davidakoch thank god i passed that challenge , tell me if you want something
mml3b sends brownie points to @davidakoch :sparkles: :thumbsup: :sparkles:
@mml3b thanks, I'm having trouble figuring out this formula "return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;"
davidakoch sends brownie points to @mml3b :sparkles: :thumbsup: :sparkles:
:cookie: 139 | @mml3b |http://www.freecodecamp.com/mml3b
$(".btn").replaceWith("<input type="text" class="form-control" id="inputField" placeholder= "Search"></input>");
what is wrong with this line?
i dontt understand why git hub doesn't show the page? i have a repository frontend-nanodegree-mobile-portfolio and there is index.html here https://VKrukovich.github.io/frontend-nanodegree-mobile-portfolio/
math.random() gives a random number between 0 and 1 i believe
math.floor() rounds down to the closest integer i believe
@bigyankarki If you use
" inside of a string, you have to use different begin and terminating quotes -- use ' the single quote at the beginning and end:'This is some "string" with " quotes'
Help! This API projects SUck API's wont work for free there are no easy/free options
no wiki entry for:
this api projects suck apis wont work for free there are no easyfree options
@sharang108 It is working for free, but you have to use the
http:// instead of https://
@sharang108 Also, you cannot use
You got to use another free ip location api like http://ip-api.com/
navigator.geolocation.getCurrentPosition because it depends on https.You got to use another free ip location api like http://ip-api.com/
@alpox my firewall is blocking ip-api.com
@bigyankarki By the way, this is one way to get that search box moving to the top. It's a bit overkill with the animations :) but the moving to top part is done with a css change of margin-top. No need for position: absolute. http://s.codepen.io/TylerMoeller/pen/oBpNNp
can anyone help me out with the CSS. I want to display text when I hover over the image. I dont understand why it fails to work. http://codepen.io/harshil1712/pen/bgaNEB?editors=1100
sharang108 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 753 | @alpox |http://www.freecodecamp.com/alpox
@alpox But I don't know why it isn't loading even if I allow it to bypass my firewall
@sharang108 I don't know... check your developer console (F12 or ctrl-shift-i) for errors
@sharang108 You can also try https://ipinfo.io/json or https://freegeoip.net/json
Here are some examples: http://s.codepen.io/TylerMoeller/pen/ZBBEGq
Here are some examples: http://s.codepen.io/TylerMoeller/pen/ZBBEGq
@alpox
@TylerMoeller Okay yeah the first ipinfo link works
hello everyone.... I need some help here with a dropdown menu list .. I need to have list inside the "Solucoes" please check my codepen... this messed up
<nav class="menu">
<ul>
<li><a href="default.solucoes">Solucoes</a>
<nav class="sub-menu">
<ul>
<li><a href="#">Internet Dedicada Corporativa</a></li>
<li><a href="#">Transmissao de Dados</a></li>
<li><a href="#">IP-MPLS</a></li>
<li><a href="#">M2M</a></li>
<li><a href="#">Alojamento</a></li>
</ul>
</Nav>
</li>
<li><a href="default.ready business">Ready Business</a></li>
<li><a href="default.ready business">Parceiros</a></li>
<li><a href="default.voz">Suporte</a></li>
</ul>
</nav>done(data =>
displayLoc(data.lat, data.lon,
Can someone please send an example of their portfolio page. the one given as an example in the actual task seems like it uses some js and i dont know js yet so i wanna see one by u guys to see a more realistic example for my knowladge
allisonmahmood sends brownie points to @harshil1712 :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @harshil1712 |http://www.freecodecamp.com/harshil1712
how did ui get the backgroung images to scroll in the backgroung.
@harshil1712 as u scroll down the background changes. how did u do that??
@sharang108 For example, these are the same, one just uses arrow notation so you don't have to type in
function(data):$.getJSON(url, function(data) {
// do something with data
}).done(function(data){
// do some more stuff with data
}).fail(function(err) {
// log errors
});
$.getJSON(url, data => {
// do something with data
}).done(data => {
// do some more stuff with data
}).fail(err => {
// log errors
});
I made different sections and for each section i selected a different background image
@TylerMoeller Okay its some sort of advance function notation
can I skip done()?
@ingundela Check out the code in this pen, it will help you figure out the submenus. https://codepen.io/philhoyt/pen/ujHzd
@sharang108 You can skip done if you wish. The arrow notation is from the JavaScript version released in 2015 (es6)
:cookie: 254 | @alan-redding |http://www.freecodecamp.com/alan-redding
ingundela sends brownie points to @harshil1712 and @alan-redding :sparkles: :thumbsup: :sparkles:
Hi guys.
I've spent whole day trying to figure out what's wrong with my code (feels like I read every page about this errors at staskoverflow, really).
I almost never get data (you can check it in console.log)
Maybe anyone can help and tell whats going on?
http://codepen.io/dearkathie/pen/xgpbjo
I've spent whole day trying to figure out what's wrong with my code (feels like I read every page about this errors at staskoverflow, really).
I almost never get data (you can check it in console.log)
Maybe anyone can help and tell whats going on?
http://codepen.io/dearkathie/pen/xgpbjo
@alan-redding the code in this pen is just the way I did it but why my submenu is in the right side of the pay.. isn't supposed to be right below the Solucoes ?
in this problem when i click a search icon and the input field appears and i try to write a text, why does the rectangular blue shade appears?
@sharang108 I like Weather Underground. They have one URL that gives you weather and location all in one API call.
@dearkathie wondering if it has to do with the data in the url, ...im not sure its actually json, just a bunch of arrays
@sharang108 Yes, it's free, but you do need to sign up for an API Key. Their auto location + weather url isn't very well documented, but this is the link for your getJSON:
https://api.wunderground.com/api/API_KEY/conditions/q/autoip.json
@TylerMoeller Okay I will try this.
@moT01 it's a json, according Wiki API Docs. Looks like something wrong with request, but I cant realise what exactly. I even deleted AdBlock as everyone told me so
i dunno, i plugged the url i used into it, and that's not working either, so its something else
@bigyankarki you need to add to your css of input outline: none;
@moT01 yeah, I see Provisional headers are shown error when I make a request
by the way can anyone tell me the smooth way of transitioning from a search icon to an input field?
In the Local Weather Challenge, there is kind of a bug in the whole way it's set up. I'll explain what I mean: 1. Open Weather API is recommended. Now that API works only using http. CodePen only allows the AJAX request when you are on http://codepen.io
- in the tutorial for jQuery right before, learners are shown how to use the navigator.geolocation object to find the position of the user. Problem is, that this only works with https. So you can't use both together. Is there maybe an API out there that you can use with https? Or a workaround? Haven't been able to find one.
@cambscoder That is a relict from before chrome disabled navigator.geolocation for https
they changed that few months ago
@alpox yes, that's what it seems like. so now you need to query the ip through ipify or so. could they maybe change it in the course. otherwise people get unnecessarily stuck.
I've now resolved it like this: http://codepen.io/cambscoder/pen/VPrqrL
Anyone know why my javaScript/jQuery will run fine in a browser but not in Code Pen? (yes I added jQuery to Code Pen).
Hello Guys !
I am having issue with Weather API, I m trying to get my city name from the JSON api. But it fails at converting JSON to HTML...
@casdidier When you use
getJSON the result is already an object. Just skip this part: obj = JSON.stringify(json);
casdidier sends brownie points to @gbsimon87 and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 754 | @alpox |http://www.freecodecamp.com/alpox
just
json.name
@casdidier Also you have one time
}); too much :-)
@casdidier And in settings -> Javascript you have to quick add jquery (Above bootstrap so you might have to remove that one first
@casdidier always check devtools / console
if something doesnt work.. probably have errors...
Mixed Content: The page at 'https://codepen.io/ddcas/pen/zNpxMX?editors=0010' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?id=3037456&APPID=6a658928bb00556b756c4018538cefbc'. This request has been blocked; the content must be served over HTTPS.
@casdidier But now its ok
@casdidier Just access codepen through
http:// instead of https:// and it works
Thanks @moigithub @alpox it was frustrating... , next time i will check more console... but not all errors are understandble for me yet.. : )
casdidier sends brownie points to @moigithub and @alpox :sparkles: :thumbsup: :sparkles:
:warning: casdidier already gave alpox points
:star2: 2629 | @moigithub |http://www.freecodecamp.com/moigithub
Seems like people are running into the http/https codepen problem all the time. Maybe it'd be good if there was a warning at some point in the API chapter. Admins anywhere?
agreed :) , there must be a section to report problem on the challenge page no?
@cambscoder actually i have checked on forum the error already reported there, we can just upvote the issue so admin takes action later on
or has completed it?
I couldn't work out why it wasn't putting in the quote when I clicked the button so I cut and pasted the example in and that didn't work either!
@cambscoder what's the http/https problem?
@cambscoder They need a challenge that explains mixed-content. Many people are not aware that you cannot load HTTP when connected over HTTPS...
https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content
https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content
i need you help on smth
@MindWhys You need to add your javascript to the javascript-panel ;)
i have started my second project and I have problems with dimension when i change these
any ideas how to overcome this problem
i am newbie :/
@MindWhys If you add jQuery to the codepen settings, you have to use the JS Panel. Otherwise, add jQuery to your HTML and put all the <script> tags after your HTML
<div class="container-fluid">
<div class = "row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#getMessage").on("click", function(){
// Only change code below this line.
$(".message").html("Here is the message");
// Only change code above this line.
});
});
</script>
@TylerMoeller I have cut and pasted it into javascript now @taltmann42 thanks
mindwhys sends brownie points to @tylermoeller and @taltmann42 :sparkles: :thumbsup: :sparkles:
:star2: 1430 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:cookie: 405 | @taltmann42 |http://www.freecodecamp.com/taltmann42
@MindWhys The tutorials are just meant to get you started and give you the vocabulary to help you read-search-ask to figure out stuff on your own.
@MindWhys hmm right.. well it tells you that the HTML belongs to the HTML tab.. so it's kinda intuitive to add the Javascript to the JS tag
@TylerMoeller @taltmann42 I guess I'll chock it up to a good chance to practise my read-search-ask skills and move on. Thank you both again
mindwhys sends brownie points to @tylermoeller and @taltmann42 :sparkles: :thumbsup: :sparkles:
:warning: mindwhys already gave tylermoeller points
:warning: mindwhys already gave taltmann42 points
@Mikesigelakis
i have started my second project and I have problems with dimension when i change these
any ideas how to overcome this problem
i am newbie :/
i have started my second project and I have problems with dimension when i change these
any ideas how to overcome this problem
i am newbie :/
@Mikesigelakis you should provide us with more information. We don't know what you mean by "this problem", what is happening? what have you tried? a link to the codepen is also necessary to help
@Mikesigelakis I'm guessing you mean to make your web page responsive? Check out the bootstrap grid system: http://getbootstrap.com/css/#grid
Hello guys, I am working on the Wikipedia Viewer project and stuck from the very beginning. :( Could anyone please tell how to use Wikipedia's API.