Thanks @alan-redding
zenzate sends brownie points to @alan-redding :sparkles: :thumbsup: :sparkles:
:cookie: 253 | @alan-redding |http://www.freecodecamp.com/alan-redding
No problem, good luck with the challenge!
@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
thanks @TylerMoeller
idallenbach sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1425 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Hey folks got a question
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
its ALIVE
@moigithub What does that mean?Sorry I am just dumb
thanks @TylerMoeller
chocolatechimpcookie sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1426 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
You're not dumb hello
is that javascript?
you don't need the () after length
I GOT IT thanks
@moigithub
Its a property http://www.w3schools.com/jsref/jsref_length_string.asp
That was a dumb question.
I can see how someone can make that mistake
THanks @chocolatechimpcookie
hello911 sends brownie points to @chocolatechimpcookie :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @chocolatechimpcookie |http://www.freecodecamp.com/chocolatechimpcookie
forgot to tag you
:)
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?
@AmitP88 could you make a single variable with all the data in it?
var x = <h1>data</h1><h2>data</h2>...
@moT01 facepalm ugh, i'm so stupid lol
then put that in the .menu-info
ill take that as a yes
@moT01 i'll give it a shot
@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
thats some nice ms paint work, by the way
@moT01 lol thx
amitp88 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 480 | @mot01 |http://www.freecodecamp.com/mot01
what about just putting all three variables in there
@moT01 what do you mean?
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
@moT01 ah I see what you mean
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
@moT01 yeah I think so, i'm hoping that will work
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.
i think you could do
var string = str.toLowerCase();
I GOt it now thanks @moT01
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.
good
Afternoon guyz
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
Hi all, can anyone tell me why this web page is not mobile friendly http://www.rami.ae
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/
@Lorrie01 ok I will take a look on that, thanx alot
rami90 sends brownie points to @lorrie01 :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @lorrie01 |http://www.freecodecamp.com/lorrie01
you're welcom @rami90
@Lorrie01 thanks for the feedback really appreciate it.
bitcoinabdi sends brownie points to @lorrie01 :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @lorrie01 |http://www.freecodecamp.com/lorrie01
@Lorrie01 how do i adjust the spacing please explain
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 what is the "right" size?
@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/
@purpose50 i think you are going about it the wrong way
you are testing if it is divisible by 3 4 5...
prime means only divisible by 1 and itself
@moT01 okay, what do you suggest
well, im not sure
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
@purpose50 does that make any sense?
@moT01 I mean the correct size so it looks like the image that i found on the web. it seems way too close
hello
can someone help me?
what do you need @chiuyong
@chiuyong whats up
@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 you need #eee background-color for that
@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
@SkyCoder01 thanks
:cookie: 66 | @skycoder01 |http://www.freecodecamp.com/skycoder01
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...
ahh cool thanks again @SkyCoder01
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?
vertical gaps?
Why does my Bootstrap table look so crappy? How can I improve it? https://codepen.io/jimpix/pen/zNNBZr
Make individual buttons look nice with CSS
How can I position my calculator buttons better? 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
@alexg1990 It seems to work
@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?
@philiplee15 i did
@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
Are you using Bootstrap
?
@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...
@ingundela Do you have a codepen link?
the link is incorrect
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
your CSS needs a lot of fixing
@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
@NitinNair89 it's not easy at all
Yes i know @ingundela That's why do it step-by-step. Create a new one rather than editing the one you already have
@NitinNair89 Ok..
body {
font-family: 'Roboto Slab', serif;
font-size: 30px;
background: linear-gradient(lightcoral, whitesmoke);
}
@NitinNair89
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
no issues
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);
}
yes
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>
add <img> tag under
<div class="carousel"></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>
so what's the error in this
?
The skew appears due to the CSS mentioned above. Remove that to remove the skew
is there any way i can share via email
so that i can explain
the error
You can PM me here
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!");
}
});
});
check your console for errors
@NitinNair89 Ok will do, thanks for the tip
cambscoder sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 387 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
probably a cross-origins issue
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
add https in your API URL
yeah
Yess, then it works!
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
try this - https://crossorigin.me/ @cambscoder
right, that's what i had in mind but couldn't remember it's name of @NitinNair89
:D
hmm, i seem to need to do some more things, i get the error
Origin: header is required
ahh ok
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} /
nvm Diego Mayer @Chrono79 solved my problem
@NitinNair89 I couldn't resolve it sadly. So I just went back to loggin into Codepen through http
@cambscoder Still the same error?
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 what url are you using ?
@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 yeah title was the same what you said
@chungeric this will return array of titles https://en.wikipedia.org/w/api.php?action=opensearch&search=thingtosearch&format=json&limit=10&callback=?
Oh interesting
@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
@chungeric :+1:
@ghulamshabir Figured out the problem... I was using wikidata.org/w/api.php
🙄
@chungeric haha I could not see that
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.
Thank you
does anybody know any good free web hosting service?
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)
how to make a website on my local pc go live?
what steps are necessary?
do it on codepen or github pages
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.
Hello!
Hi @NitinNair89 .
:)
yo can sb help me out with the navbar? dont know how to fix it https://codepen.io/Nawkin/pen/MJOPzw
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
@Nawkin Navbar looks fine. What's the issue?
@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.
Thank you @Nawkin
dadleatherwood sends brownie points to @nawkin :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @nawkin |http://www.freecodecamp.com/nawkin
Thank you @voxgranular
dadleatherwood sends brownie points to @voxgranular :sparkles: :thumbsup: :sparkles:
:cookie: 210 | @voxgranular |http://www.freecodecamp.com/voxgranular
can anyone please go through this?
@faddah I do have them in line 4-6 but it cuts out stuff
@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 i did as you said..still not working
@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?
@bigyan karki yes, jQuery first.
@Nawkin - still looking at your code...
ok
:)
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?
www.twitter.com/status=? + your 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 problem is with the last section
the last section is shorter then 100% height on most resolutions
you are using 100vh for the height right?
no i dont use 100vh
why?
100vh for the last section or for the footer?
it takes up full viewport height
for sections
not footer
because the section can't be that high because of its content
is it okay to pm you?
yea sure
@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...
let that section take up 80% and footer 20%
or 90:10
@faddah thanks for your patience :D
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?
@bigyan karki - i'm looking at @Nawkin 's code now, sorry.
no problem :)
@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.
@faddah what if i add margin-bottom to the nav bar?
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 :/
hmm
@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
Supp guys
Can i animate an svg avatar with css?
like close its eyes
and moves its mouth
yes
awesome
@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 normal desktop with mouse and keyboard
@faddah when i click contact in the nav bar it takes me down though
@Nawkin hmmmm....
@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.
use javascript @playingwithinfinity
@NitinNair89 Duh
:P
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.
yeah
@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.
@faddah no problem, have a good one :)
@Nawkin I can try. Issue?
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
i am checking
@Nawkin it goes to where you tell it to, ...the label is just hiding behind your menu
exactly, so where do i add margin?
this worked
#portfolio {
padding-top: 100px;
}
makes a big space though
@moT01 thank you so much, exactly what i needed
nawkin sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 483 | @mot01 |http://www.freecodecamp.com/mot01
im out, have a nice day!
@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
@NitinNair89 it is defined in typed.js
ah ok @bigyankarki
@NitinNair89 idk whats wrong though
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
yes, that's the HTML. check the CSS
.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
and where does the <span> appear for cursor?
its on JS
or do you mean i should add it on my HTML too?
no i mean, where exactly in JS?
you added it in HTML @bigyankarki
well i dont know what to tell
but the link is here
ya i just did it
Good
I found the solution
what was wrong?
the <h1> adds deafult padding and margins
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
oh :D
@NitinNair89 thank you :)
bigyankarki sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
hehe
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
thanks for helping @NitinNair89
bigyankarki sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: bigyankarki already gave nitinnair89 points
good night
@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:
@TylerMoeller hi tyler how are you doing?
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
:D
i mean just give me the idea
You want the search field to animate to the top?
do i need animation
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
hmm will try that :)
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
@chriswingler yea, i think nothing is getting past your test
the streams are mostly = undefined
@moT01 i can append data.stream.game
and when i console.log, i can see a couple users streaming starcraft
i think its because the name is in the users url
which doesn't include the stream variable in your test
@chriswingler
ahh hrmm i'll check that out @moT01
@chriswingler the name is also in the stream url after a second look
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
it's cool.. thanks @TylerMoeller @moT01
:cookie: 484 | @mot01 |http://www.freecodecamp.com/mot01
:star2: 1427 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
chriswingler sends brownie points to @tylermoeller and @mot01 :sparkles: :thumbsup: :sparkles:
@TylerMoeller have you done any of the data visualization challenges?
@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... :)
yea, thats what im playing with
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
theres a few syntax differences that got me stuck for a bit
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
good timing
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 Here's an example of it working: http://s.codepen.io/TylerMoeller/pen/oBpgXO
@TylerMoeller i will look into it thanks man
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
:cookie: 191 | @davidakoch |http://www.freecodecamp.com/davidakoch
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
Hello. About projects.. Can I use github instead of codepen?
$(".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/
@davidakoch its getting a random number in a range i think
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://
@alpox Okay I will try that
@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 still noresponse
@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 hmm cannot help there then :D
@alpox Okay thanks anyway
sharang108 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 753 | @alpox |http://www.freecodecamp.com/alpox
@sharang108 I think all solutions i've seen were with ip-api
@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
Well there is no error
@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>
@TylerMoeller Can you explain
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 here you go http://codepen.io/harshil1712/pen/wWBMjL
@sharang108 It's the same as:
.done(function(data) {})
@harshil1712 thanks a lot
allisonmahmood sends brownie points to @harshil1712 :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @harshil1712 |http://www.freecodecamp.com/harshil1712
@allisonmahmood anytime
PLEASE HELP ME
how did ui get the backgroung images to scroll in the backgroung.
@allisonmahmood sorry didn't got you
@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
});
@allisonmahmood http://www.w3schools.com/cssref/pr_background-attachment.asp is one way
I made different sections and for each section i selected a different background image
@harshil1712 ohh ok
@TylerMoeller Okay its some sort of advance function notation
can I skip done()?
@ingundela try using boostrap it will be much easier
@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)
@TylerMoeller Okay
@harshil1712 how do I use boostrap?
@ingundela everything you need to know about bootstrap http://getbootstrap.com/
@harshil1712 @alan-redding thanks
:cookie: 325 | @harshil1712 |http://www.freecodecamp.com/harshil1712
: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 ?
@TylerMoeller What Weather api do you recommend?
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
@TylerMoeller Is it free and does it need signup?
@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
@tyler
@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
@dearkathie wow that worked :D
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.
@TylerMoeller How do I generate key on Weatherunderground?
@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 still need help?
@casdidier When you use
getJSON the result is already an object. Just skip this part: obj = JSON.stringify(json);
@gbsimon87 I will try what @alpox said : P thx
:cookie: 386 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
casdidier sends brownie points to @gbsimon87 and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 754 | @alpox |http://www.freecodecamp.com/alpox
@alpox actually not working :/
@gbsimon87 if you could help me : D
How did you get your first job???
@casdidier
"json.name" without quotes
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
@alpox mmmh are you sure for the }); more ?
@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 You had one too much
@casdidier But now its ok
@casdidier Just access codepen through
http:// instead of https:// and it works
oooh....
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
is anyone else on the portfolio challenge?
or has completed it?
Is anyone else having problems with the Random Quote Generator?
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?
@MindWhys Do you have a codepen link?
@TylerMoeller https://codepen.io/MindWhys/pen/ggoapZ
@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
hello guyz
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 :/
@taltmann42 what javascript?
@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
@MindWhys the javascript that's inside the
<script> tags
<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
Why wasn't that made clear in the tutorials?
@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
@all
@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
or not
@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.