@wearenotgroot when I do it on Safari, still wont work!
@zarruk You're declaring variables inside the geolocation function then trying to use them outside that function. Also, the info is async so you will need to call your getweather
from inside the geolocation function after setting the variables
Declare the vars at the top, then set them inside geolocation.
This message was deleted
@jdtdesigns http://codepen.io/zarruk/pen/dpNyOj?editors=0010 I did what you said and still wont work :(
@zarruk Looks the same. If you're using Chrome you can't use the navigator without being on https. Open weather requires premium service to use https. You'll need to use an ip locator for chrome and navigator for the others.
@jdtdesigns when I use it in Safari, wont work either
Because your code is wrong ;)
I'm having problems with my portfolio. Can someone explain why "my New Portfolio website" runs into my navbar?? http://codepen.io/staceyland/pen/ZpBdoX
Where Can i find a website with URL based sound bytes to upload to Js??
hi any body knows how to make the pomodoro clock background color with css
@AshriSoft ?
@bomholt when the clock almost to end the background color changing gradually to green or red
@staceyland body { padding-top: 70px; } add this
thats what i posted ^^
you mean how to change css per js? @AshriSoft
the css is background-color: #fff but that can't be your problem if you are doing the pomodoro clock already ^^
with JS add .style.background-color = "#fff" to an element
Thanks @bomholt @AshriSoft
staceyland sends brownie points to @bomholt and @ashrisoft :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @ashrisoft |http://www.freecodecamp.com/ashrisoft
:cookie: 555 | @bomholt |http://www.freecodecamp.com/bomholt
hey guys, I can't figure out why my Demo buttons don't work on my site: https://amitp88.github.io/New-Portfolio/
but the Repo buttons do
I've inspected my code and I can't find what's the difference
also on my hamburger menu, I can't seem to change the color of the hamburger in toggle form (when it turns into an X)
guys what are your favourite fonts?
looking for fresh ideas
the ubuntu one was a great discovery
never actually thought of using it on a website lol
could someone help me figure out why my navbar hamburger menu won't toggle my links when my screen size goes small? links work fine but the drop down just doesn't appear. not sure what it is i am missing. https://codepen.io/keyspress/pen/YGpGPP
@keyspress - make sure that you have (in your JS panel) the external libraries
jquery.js, and bootstrap.js, loaded in that order - jquery first, bootstrap second. That is what makes the menu expand.
@khaduch oh man, thank you so much. that fixed it.
keyspress sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1705 | @khaduch |http://www.freecodecamp.com/khaduch
@keyspress - you're welcome. I don't think that you need jquery-ui to be loaded?
@khaduch yeah, i loaded that one out of desperation lol. i took it out now
Can someone check to see if this is how I'm allowed to write my js?
JS inside of jQuery??
Also, can you find what is wrong on line 11?
http://codepen.io/amidzicigor/pen/JREGyq
JS inside of jQuery??
Also, can you find what is wrong on line 11?
http://codepen.io/amidzicigor/pen/JREGyq
@amidzicigor else if ==> not elseif
@AshriSoft Thank you
amidzicigor sends brownie points to @ashrisoft :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @ashrisoft |http://www.freecodecamp.com/ashrisoft
@AmitP88 not sure why but it has something to do with your span element
@kthao91 yeah, I was thinking that too, but I don't know why or what, since both span elements for the demo and repo buttons are the same
oh wait, nvm. lemme check
Can someone help me - I can't find out why my openweathermap API is returning undefined for
All of my other variables are assigning and logging to the console.
weather.main and weather.description when they should be Rain and heavy intensity rain for the area I am debugging with (Minneapolis): http://codepen.io/a_melomaniac/pen/EgNyjbAll of my other variables are assigning and logging to the console.
Nevermind! I found the problem. I'm supposed to use
weather[0].main
could I get some feedback on a project?
I require some help on the Random Quote Machine project. I was well on my way until I noticed I have no idea where I am to get the quotes from. Is there an API to a website out there that can help with this, or do I have to write a JSON of my own with quotes? Any assistance would be appreciated.
Yea, you can take your pick from the results when you google random quote generator
@GikuyuNderitu Thank you. Turns out there are quite a few.
algorri sends brownie points to @gikuyunderitu :sparkles: :thumbsup: :sparkles:
:cookie: 294 | @gikuyunderitu |http://www.freecodecamp.com/gikuyunderitu
@Algorri no problem!
what is the best source to embed video calling service to embed into a site?
Greetings. I could use opinions on this: http://fcc-projects.radix.cc/build-a-tribute-page/ Here's the code https://github.com/rjstone/fcc-projects/tree/master/build-a-tribute-page
Hey all, I'm trying to fix my Twitch Viewer does anyone know what the Redirect URI is supposed to be? Not understanding what the oauth_authorization in the URL is supped to be?
Does anyone know how to get the authorization for the Twitch API?
How could I center the span element "Erick Delfin" ?
center vertically*
:worried:
I dont understand the question
@kirbyedy I literally just want "Erick Delfin" to be vertically centered
@Nifled you can use: span {line-height: 71px};
@Nifled the same line-height that the height of the other elements
@gemaderus How would you know that the height of the other elements is 71px?
just asking, I really want to get the hang of this
@Nifled open the console, do rollover over the other elements and you can see the height and the width of them
@Nifled with flexbox is better than the line-height
@gemaderus I've tried with flexbox so much, it just won't work
@Nifled here you have a guide about flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ If you have any question tell me
but the line-height approach works
@gemaderus Thanks for the additional help.
nifled sends brownie points to @gemaderus :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @gemaderus |http://www.freecodecamp.com/gemaderus
@Nifled delete the line-height and put in the parent row {display: flex;
align-items: center;}
align-items: center;}
wow, that is just perfect. Thank you so much! @gemaderus I will get to reading the flexbox guide.
nifled sends brownie points to @gemaderus :sparkles: :thumbsup: :sparkles:
:warning: nifled already gave gemaderus points
@Nifled you're welcome!
Hi, I'm working on the tribute page and can't seem to get jQuery to work in codepen. Is there a known issue? My code is identical to that used in the lessons
@dbtate settings -> javascript -> quickadd -> jquery
Hi Andrew, thanks for your help. It still doesn't seem to be working.
Here's the code:
<script>
$(document).ready(function() {
$("#myTitle").css("color","red");
});
</script>
<h1 id="myTitle">Leonhard Euler</h1>
The colour isn't changing though
@dbtate You can link your codepen page here
@dbtate did you load the jquery library ?
@sjames1958gm thanks, here's the link: http://codepen.io/dbtate/pen/kkgPqV
dbtate sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3412 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@kirbyedy I did 'quick add' of jQuery in the JavaScript window. Is that correct?
yes
in this case, you better put that styling in the css part
@dbtate Put your javascript into the js section to ensure that the jquery is loaded before your code is run
@Ierofantis
Does anybody know how to link on my html/ejs template with href a router with parameters like this:
I tried something like this
And here is the rendering line
Does anybody know how to link on my html/ejs template with href a router with parameters like this:
/title/:name?I tried something like this
a href="/title/<%= user.name%>">Press</a> but noopeAnd here is the rendering line
res.render("title.ejs", { user: user });
@dbtate
#myTitle {
color: red;
}
@kirbyedy thank you, that worked straight away. Is that doing the same thing essentially? The only reason I was trying to use that code in particular was because that is what I've just learnt
dbtate sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1403 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
its the same thing, but styling is usually done in the css part
you did it through jquery
Is there a reason the jQuery wouldn't work?
I've just been learning addClass(), css(), appendTo(), etc. and was trying to test those functions in codepen
@dbtate If you put the javascript in the js section of codepen it does work
@sjames1958gm thank you for that, it does too!
dbtate sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:warning: dbtate already gave sjames1958gm points
That makes sense, too.
@sjames1958gm would I be correct in saying, in a simplified manner, that HTML is a webpage's content, CSS is its appearance/design, and JavaScript is its functionality?
@dbtate Yes
@sjames1958gm awesome! Thank you. Only just getting started so still wrapping my head around all of this as I'm a total beginner. Thanks again for your help, I really appreciate it. I'm off to start working in codepen again.. Take care!
dbtate sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:warning: dbtate already gave sjames1958gm points
Help please
in Build a Tribute Page i am getting an error that the server unexpectedly closed the connection.
in Build a Tribute Page i am getting an error that the server unexpectedly closed the connection.
no wiki entry for:
pleasein build a tribute page i am getting an error that the server unexpectedly closed the connection
what this is all about ??
This message was deleted
This message was deleted
Hi, can someone tell my why for the temperature class in my code when I use a conditional expression it disappears and when I use if else the units only change once. http://codepen.io/Mokubao/pen/JRdpXq
This message was deleted
Help please
in Build a Tribute Page i am getting an error that the server unexpectedly closed the connection.
in Build a Tribute Page i am getting an error that the server unexpectedly closed the connection.
no wiki entry for:
pleasein build a tribute page i am getting an error that the server unexpectedly closed the connection
is this issue same with everyone ??
no issues here - this is a link to the video that's not loading for you: https://youtu.be/qqrnzmqCGDw
@TravCamer youtube access is prohibited on my desktop :(
@sourabhatt bummer dude. let me see if i can find a mirror on another site. the video more or less just outlines the rule/steps on the left side of the page.
@sourabhatt how about this? https://vimeo.com/154927651
@mokubao
You probably should have a "global" that says which type of temperature is being displayed
$(".temperature").html(Ctemp + CtempSym) this probably always return something truthy so it never gets to the else in your click handler.You probably should have a "global" that says which type of temperature is being displayed
@mokubao initialize celsius to true
if(celsius){
$(".temperature").html(Ftemp + FtempSym);
celsius = false;
}else{
$(".temperature").html(Ctemp + CtempSym);
celsius = true;
}
Hi
i need help on random quote api.
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
i need help on random quote api.
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
@vtarun What do you need?
what is "?" in the api.
@vtarun Are you using $.getJSON?
no
@sjames1958gm too some time to understand but thanks man
:star2: 3413 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
mokubao sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
this is my code
$.ajax({
url: "http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?",
// The name of the callback parameter, as specified by the YQL service
jsonp : "callback" ,
// Tell jQuery we're expecting JSONP
dataType : "jsonp",
success: function( response ) {
console.log( response.quoteText); // server response
},
cache: false});
hi
<header class="main-header">
<div class="container">
<h1 class="name">Wild horses <span>tour</span></h1>
Which selector do i need to use to select the span in css
is it .main-header .name and thenN
Hi! I need som help with scopes. I am tryng to check if str is the same forwards as backwards, any one that can help=
if (str1=== str){
str = str.split("");
str = str.reverse();
var str1 = str.join("");
return true;}
if (str1=== str){
str = str.split("");
str = str.reverse();
var str1 = str.join("");
return true;}
@maeswilliam use
span{}
@ndrsrv even if i alleady have other spans?
@sjames1958gm
this is my code
$.ajax({
url: "http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?",
// The name of the callback parameter, as specified by the YQL service
jsonp : "callback" ,
// Tell jQuery we're expecting JSONP
dataType : "jsonp",
success: function( response ) {
console.log( response.quoteText); // server response
},
cache: false});
@vtarun The ? tells jquery to fill in its own callback function for jsonp.
I ran that code in codepen and the following was sent (crossorigin was to solve some issue
I ran that code in codepen and the following was sent (crossorigin was to solve some issue
https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=jQuery31007955132176370245_1474543217636&_=1474543217637
@ndrsrv also it doesn't work it targets the other spans
@Hansi2468 Your code is testing str1 before it is even set to any value
@maeswilliam
.name span{} or h1.name span{}
@sjames1958gm Okay - but how do I do it?
@sjames1958gm this is working... i saw response in console
@ndrsrv Not working
@vtarun I only added crossorign.me to get it to work in jsbin
@Hansi2468 The code that sets str1 goes before the if
@sjames1958gm so like this
function palindrome(str) {
str = str.split("");
str = str.reverse();
var newstr = str.join("");
if (str=== newstr){
return true;}
@sjames1958gm if u open this link in chrome , it will give response
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
@Hansi2468 Well, yes except you have replaced str with an array
@vtarun Yes it does, if you notice there is a ? in the front - when you use $.ajax the ? is not sent but jquery fills in a callback name
@vtarun
?({"quoteText":"Into each life rain must fall but rain can be the giver of life and it is all in your attitude that makes rain produce sunshine. ", "quoteAuthor":" Byron Pulsifer", "senderName":"", "senderLink":"", "quoteLink":"http://forismatic.com/en/035bb0a5bb/"})
@sjames1958gm Okay - i’ve changed it back to a string now
@Hansi2468 Probably need to create a different variable when you do the first split("")
@sjames1958gm can u please suggest any blog or tutorials where i can get learn ajax and api ?
@sjames1958gm Like this?
function palindrome(str) {
var str1 = str.split("");
var str2 = str1.reverse();
var str3 = str1.join("");
if (str=== str3){
return true;}
if (str != str3) {
return false;
}
@Hansi2468 Your join should use str2
@vtarun I would just search on youtube - I don't have any specific ones to advise
@sjames1958gm oh yeah thanks
hansi2468 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3414 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@Hansi2468 You can just do
return str === str3;
How can I implement this layout in BS ?
@sjames1958gm What is the advantage of writting that?
@Hansi2468 Less code, also the intent is more specific
Has anybody any idea why this script won't get the json that the url is pointing at (the url works just fine if you open it regularly in the browser)? http://codepen.io/rujaraju/pen/zKNwRA
@sjames1958gm allright, could you tell me why this palindrome("A man, a plan, a canal. Panama”) doesn’t return true?
@Hansi2468 Becuase you didn't implement all the instructions - before you reverse you need to remove all non letters and numbers
@Hansi2468 and capitals
@gordoh @sjames1958gm what is the command for that=
@ndrsrv thanks it worked, my brackets was troubleshooting ^^
maeswilliam sends brownie points to @ndrsrv :sparkles: :thumbsup: :sparkles:
:cookie: 345 | @ndrsrv |http://www.freecodecamp.com/ndrsrv
@Hansi2468 toLowerCase()
@rujaraju the console returns this error
XMLHttpRequest cannot load http://www.geoplugin.net/json.gp?ip=137.163.145.183. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
There is an issue with your API. I had this earlier with the Wikipedia API. I had to add origin=* to the url
I am not sure if it works the same with that API though.
@TravCamer thank you so much for helping me out, thanks a lot
sourabhatt sends brownie points to @travcamer :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @travcamer |http://www.freecodecamp.com/travcamer
@TravCamer also if u can send me the previous youtube videos
Watch Coding Videos on our YouTube Channel, gear up for success challenge
Watch Coding Videos on our YouTube Channel, gear up for success challenge
@sourabhatt gladly, here is a link to the fcc videos on Videom: https://vimeo.com/search?q=free+code+camp
@TravCamer that's awesome travis, thanks :)
sourabhatt sends brownie points to @travcamer :sparkles: :thumbsup: :sparkles:
:warning: sourabhatt already gave travcamer points
@gordoh thanks! seems like a messy problem with no simple solution..
:cookie: 273 | @gordoh |http://www.freecodecamp.com/gordoh
rujaraju sends brownie points to @gordoh :sparkles: :thumbsup: :sparkles:
It took me about an hour to figure it out earlier today. I had to read through the documentation for the API @rujaraju . I hope this works for you
Good afternoon!
I have a question regarding HTML and jquery if anyone could offer help...
so?
how do i access the weather id in this json with jquery?
i retrieved it as "data" but data.weather[0].id doesnt work?
data.weather[0].id
this works for me
@kirbyedy okay, i'll try to see what's wrong with my code, thanks
mokubao sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1404 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
any console log ?
nothing coming out on console though
strange
are you getting the other data properly ?
yeah, the only other data I'm retrieving is data.main.temp and it works fine
if you log the whole object does that weather id show ?
hmm, i tried storing it in something called "weatherId" first instead of just using it in switch(data.weather[0].id) and it worked
well normally thats how you should do it
oh, it's something like a best practice thing?
yea, store it in the variable then do something with it
Okay, got it. Thanks man
anyone have any idea how to transition from < 768px width, to a full page layout run by bootstrap columns?
I have both sections built I dont know how to execute the change?
if you used bootstraps syntax it should work automatically
if not, explore the media query
Hey guys! I'm having trouble chaining some CSS elements using jQuery, anyone mind helping?
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
I just need to know how to do the box-shadow part
Hey guys, just a little help with CSS layout, please...
According to every tutorial or Stackoverflow discussion I checked, this should make the 'content' div stretch to fill the rest of the container after the headers have taken up the alocated space. For me, that's not happening, the 'content' div is tightly wrapped around the content inside. Any ideas?
#container {
display: flex;
flex-direction: column;
width: 400px;
height: 400px;
}
#header1 {
flex: 0 1 40px;
}
#header2 {
flex: 0 1 80px;
}
#content {
flex: 1 1 auto;
}
@kirbyedy thanks
grantknaver sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1405 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
hey guys i m getting this with my wikipedia challenge if someone would like to take a look it will be nice
ReferenceError: valeur is not defined
Can someone help me stack my Simon Game controls on top of the actual game? It is currently covered up and CSS is not my forte. http://codepen.io/kmulligan/pen/ammPvA
@oh-moses have you looked into https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
@kmulligan have you looked into https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Oh, nvm, I'm an idiot; it does work
@osfan501 Have not, will look later today
@osfan501 Well that was easy
@osfan501 thanks!
kmulligan sends brownie points to @osfan501 :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @osfan501 |http://www.freecodecamp.com/osfan501
I'm glad you guys got it figured out! :smile:
I can get this media queries to work with pixels and everything works fine, but the bootstrap site says this should work > @media (min-width: @screen-sm-min) {...} why wont it?
This is a curious question more than anything. I literally copied the code mentioned on the bootstrap site to see if it would work, but with no success.
@janine9vn sorry for the late reply. probably you have to look back to what you have said that made me reply.... so here is what you said
@bvipul From what I can tell it has to do you with you adding the custom class name for each user. If I remove that, it does break some of the formatting, but it brings back the links. Is there any reason why each individual user gets its own class?
@bvipul From what I can tell it has to do you with you adding the custom class name for each user. If I remove that, it does break some of the formatting, but it brings back the links. Is there any reason why each individual user gets its own class?
@grantknaver link
@janine9vn so the classes that are made for each user is dynamically made, not made it statically, so my javascript code makes the class for each user dynamically thats why there are classes of each of their name
@grantknaver that looks like a sass type of thing. Try running it with a sass compiler
Hey how is everyone this morning
can i see someones tribute page?
im curious what it means about personal style
im sort of square when it comes to doing projects
here it is @JessCallahanSEO
i do whats required
thanks @bvipul
jesscallahanseo sends brownie points to @bvipul :sparkles: :thumbsup: :sparkles:
:cookie: 285 | @bvipul |http://www.freecodecamp.com/bvipul
@JessCallahanSEO basically you just make a tribute to somebody that you can relate to
yeah, just anyone you admire
@JessCallahanSEO Its actually a really fun project and its open to anything. Like you can even tribute a cartoon character if you wanna
@gordoh i got ya i know whom/ what i want to tribute
its just the recreation
@JessCallahanSEO Its just to teach you html / css / bootstrap. Its open to your own creativity.
by the way @mones-cse thats an awesome tribute page!
:D
@mones-cse yeh i was just about to say thanks for sharing that
jesscallahanseo sends brownie points to @mones-cse :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @mones-cse |http://www.freecodecamp.com/mones-cse
that is totally swagged out
I actually started doing that just now. http://codepen.io/1338/pen/gwgGAG
Guess I have a bit to go though.
Guess I have a bit to go though.
:)
you all have me hype to do this now
great to know that :)
but alas i have to go do my day job until this is my day job
@JessCallahanSEO :)
@JessCallahanSEO what is your current day job ?
heres to hoping the rain makes for a short day since our patio will be closed
@mones-cse i bartend and wait tables
how do i make col-md-3 to re-arrange in pairs instead of each col re-arranging individualy?
i love it
but i love this too
@JessCallahanSEO hope you will be soon a kick ass developer :)
you mean have 2 columns in 1 row? if so change to col-md-6 for those.
yeah
well doing seo and seeing peoples businesses doing well
thanks for clarifying
oooooh duuuuuuhhh lol thanks so much lol
Sure thing. :)
thanks @1338
b1tc0de sends brownie points to @1338 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @1338 |http://www.freecodecamp.com/1338
so layout is made in CSS or Bootstrap or combination?
You can do whatever. But bootstrap makes your life a lot easier.
ive been doing seo for about a year and a half and its picking up but i want to not have to pay for development tools i can make myself
and web design things i want to know if what im paying for it worth it
like divi
is bs but it works for now and provides solutions to what i need
@rusmex I tend to use bootstrap as much as possible. Only using CSS if need be.
so bootstrap is kind of substituting CSS ?
anyway walking into work now later campers <3
thanks @1338
rusmex sends brownie points to @1338 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @1338 |http://www.freecodecamp.com/1338
@rusmex You can see bootstrap as a bit of CSS and JS. They are a toolset to do things with.
@rusmex bootstrap is a css library
You can expand upon Bootstrap with extra CSS.
thanks for clarification guys. I m out
it just write most useful scenario .
all we have to do is call
all we have to do is call
help please
in the tribute page challenge
how to add these <ul> lists in the center under the above line
1914 - Born in Cresco, Iowa
1933 - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"
in the tribute page challenge
how to add these <ul> lists in the center under the above line
1914 - Born in Cresco, Iowa
1933 - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"
no wiki entry for:
pleasein the tribute page challengehow to add these ul lists in the center under the above line1914 - born in cresco iowa1933 - leaves his familys farm to attend the university of minnesota thanks to a depression era program known as the national youth administration
@sourabhatt share your codepen link
@mones-cse <ul class="text-center">
@mones-cse any more suggestion please
it's not working
only the text moving in the center @mones-cse
not the bullet line list <ul>
@sourabhatt i am looking into it
is there any alternative way for this
<blockquote>
<footer><cite>Sir Donald Bradman</cite></footer>
</blockquote>
@sourabhatt don't really know what you're wanting
@sourabhatt Since ul and li elements are display: block by default — give them auto margins and a width that is smaller than their container.
ul {
width: 70%;
margin: auto;
}
If you've changed their display property, or done something that overrides normal alignment rules (such as floating them) then this won't work.
Hmmm
$(document).ready(function() {
$('#strict').click(function() {
$('#strictActive').toggleClass('clicked');
});This should work to allow me to toggle the CSS on #strictActive, right?
Feel like I am missing something simple: http://codepen.io/kmulligan/pen/ammPvA
@kmulligan why are you wrapping it in doc.ready?
This message was deleted
doc ready hasn't been needed on codepen for years lol
@sourabhatt do you want something like this?
no my friend @mones-cse
This message was deleted
i want the points <ul> under the line
Here's a time line of Sachin Tendulkar's Life:
Here's a time line of Sachin Tendulkar's Life:
like in the example
https://codepen.io/FreeCodeCamp/full/NNvBQW/
https://codepen.io/FreeCodeCamp/full/NNvBQW/
@jdtdesigns I guess that's how I've seen stuff implemented.. can you explain what I should be doing instead and why I don't need doc.ready?
@1338 i ain't got you please
@kmulligan you're click toggle works
@jdtdesigns it is changing colors for you?
Hey guys, using the developer tools on chrome, how can I change an image to have an effect upon hovering?
I seem to get the effect on its initial state, but not on mouse hover...
I seem to get the effect on its initial state, but not on mouse hover...
@jdtdesigns Got it working now. Needed to add
!important to the .clicked css
@sourabhatt http://jsfiddle.net/8mHeh/1/
Look at this example.
The div align's the text to the left.
and auto's the margin.
Look at this example.
The div align's the text to the left.
and auto's the margin.
@gbsimon87 are you looking for this ?
I found that, but my changes won't go through...
<style>
ul {
width: 70%;
margin: auto;
}
</style>
this works @1338
ul {
width: 70%;
margin: auto;
}
</style>
this works @1338
thanks folks :)
which link need to be pasted while submitting challenge ?
this one above ?
nope
@sourabhatt https://codepen.io/sourabhatt/full/KgamPG/ this one
@sourabhatt
You can also nest your ul in a div with the class name .center and use this css:
.center {
width:200px;
margin:0 auto;
text-align:left;
}
You can also nest your ul in a div with the class name .center and use this css:
.center {
width:200px;
margin:0 auto;
text-align:left;
}
The reason it acts that way is because the <li> tag has a margin build in automatically.
thanks @mones-cse @1338
sourabhatt sends brownie points to @mones-cse and @1338 :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @1338 |http://www.freecodecamp.com/1338
:cookie: 394 | @mones-cse |http://www.freecodecamp.com/mones-cse
@bvipul wow... that's literally weeks later. I know it's dynamically made, I'm saying why do it that way at all?
@mones-cse how will i get the link which need to be submitted ?
i made some changes in the code and want me to do the following in order to get the link
can u please describe the steps for this @mones-cse
@sourabhatt ^ just select Full page
@mones-cse thanks
sourabhatt sends brownie points to @mones-cse :sparkles: :thumbsup: :sparkles:
:warning: sourabhatt already gave mones-cse points
:)
@miriam-z
hello! I am using the following library: https://github.com/rendro/countdown
in my front-end project and want to know how to make changes to the countdown?
hello! I am using the following library: https://github.com/rendro/countdown
in my front-end project and want to know how to make changes to the countdown?
@miriam-z
when I try to make changes in the js file my ide says that the file belongs to a library and cannot be changed
any suggestions?
when I try to make changes in the js file my ide says that the file belongs to a library and cannot be changed
any suggestions?
I have just come across this:
new Date();
new Date(value);
new Date(dateString);
new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);
would I add these properties to the current code I have in my html script tag :
<script>
$(function() {
$('.countdown').countdown({
date: "June 7, 2087 15:03:26"
});
});
</script>
If you have the CDN of the countdown added that should work yes. @miriam-z
@1338 thanks for your reply I am using this with bootstrap 4 and jquery already comes with bootstrap 4 so should I be using the cdn or jquery from bootstrap install?
miriam-z sends brownie points to @1338 :sparkles: :thumbsup: :sparkles:
:cookie: 141 | @1338 |http://www.freecodecamp.com/1338
@miriam-z
you need to add this:
<script type="text/javascript" src="/path/to/jquery.countdown.js"></script>
As I believe it does not come standard with jQuery and is a plugin.
So if you have jQuery already add that and it should work.
(note: the page said it is tested with jQuery 1.7.2)
Can we paste our code from another program into Codepen for hte challenges?
yes i am aware of it being tested with this version of jquery which is why I wondered
@miriam-z if you are working on code pen
you can add this one
"http://rendro.github.io/countdown/javascripts/jquery.countdown.js"
you can add this one
"http://rendro.github.io/countdown/javascripts/jquery.countdown.js"
@mones-cse thanks for this i am working on changing the date
miriam-z sends brownie points to @mones-cse :sparkles: :thumbsup: :sparkles:
:cookie: 395 | @mones-cse |http://www.freecodecamp.com/mones-cse
https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage
can somebody please send me the vimeo link of the youtube video on this challenge
can somebody please send me the vimeo link of the youtube video on this challenge
youtube is blocked over here
@mones-cse it is working but as I said I am changing the date
@miriam-z oh got it
@sourabhatt
There doesn't seem to be a version avaliable on vimeo.
I can send you the video if needed though.
There doesn't seem to be a version avaliable on vimeo.
I can send you the video if needed though.
@1338 that would be great
@1338 please send
that'll probably work.
plz can someone help me with the wikipedia projet i m stuck
http://codepen.io/Medi2006/pen/jrrYZX
http://codepen.io/Medi2006/pen/jrrYZX
i have the error value is not referenced
@Medi2006 Doesn't do anything for me. JS is failing
@Medi2006 what error value ?
in my code it tolds me ReferenceError: value is not defined
@Medi2006 The search doesn't do anything for me.
that's my problem i m trying to get the value of the search in a value variable but it's not working
here is the code i m using
$('#val').bind("enterKey",function(e){
var value=$('#val').val();
console.log(value);
});
$('#val').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
var value=$('#val').val();
console.log(value);
});
$('#val').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
val is the id of the input
@Medi2006 you use value in local space
$(document).ready(function(){
var value=''; var url ='https://www.mediawiki.org/w/api.php?action=opensearch&search='+value+'&format=json&callback=?'
@mones-cse i see but why my JS is not working when i type something and hit enter
i have this now
Object { servedby: "mw1206", error: Object }
Object { servedby: "mw1206", error: Object }
this error showing cause you called the api when the page loaded at that particular time variable data has no value
so if figure out why value doesnt take my entry when i type something it should work?
do you have an idea why i cant get the value from the user entry?
hi guys
quick q
i'm trying to find the length of an array within a JSON
the length is 7 key value pairs
but it's giving me a reading of 668!!
$('#val').bind("enterKey",function(e){
var value=$('#val').val();
console.log(value);
});
$('#val').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});thats why it is not working
my JSON object
var famousQuotes = '{"quotes":[' +
'{"author":"Arnie", "quote":"I\'ll be back."},' +
'{"author":"Arnie", "quote":"I\'ll be back."},' +
etc
to find the number of pairs in the array
console.log(famousQuotes.length);
@Medi2006 you need to write a function that hold this portion above
and when search icon clicked called that function
and when search icon clicked called that function
@cdraper99 can you send the full json
?
var famousQuotes = '{"quotes":[' +
'{"author":"Arnie", "quote":"I\'ll be back."},' +
'{"author":"Kevin Kruse", "quote":"Life isn’t about getting and having, it’s about giving and being."},' +
'{"author":"Napoleon Hill", "quote":"Whatever the mind of man can conceive and believe, it can achieve."},' +
'{"author":"Albert Einstein", "quote":"Strive not to be a success, but rather to be of value."},' +
'{"author":"Florence Nightingale", "quote":"I attribute my success to this: I never gave or took any excuse."},' +
'{"author":"Wayne Gretzky", "quote":"You miss 100% of the shots you don’t take."},' +
'{"author":"Michael Jordan", "quote":"I’ve failed over and over and over again in my life. And that is why I succeed."}]}';
var obj = JSON.parse(famousQuotes);
@cdraper99 try
obj.quotes.length
it should provide you 7
@mones-cse you're a genius
thank you!!
:)
legend
happy coding :)
@Medi2006 You're main problem is you are injecting the input html through js and not running the get results code after you inject the html. Therefore the get results function isn't even aware of the input or it's key presses. I would suggest you start thinking functionally when coding. Write every step out in separate functions so your program runs each step at the appropriate time. Here is an example:
http://codepen.io/jdtadlock/pen/VKPyoj?editors=0010
http://codepen.io/jdtadlock/pen/VKPyoj?editors=0010
I also put the input element into the html instead of through js. I added a hide class to css to toggle the search and input back and forth. ;)
@sourabhatt Did the link I send work?
@1338 yes that worked
Ah okay good. :D
@1338 sorry for late reply
@1338 thanks :)
sourabhatt sends brownie points to @1338 :sparkles: :thumbsup: :sparkles:
:cookie: 147 | @1338 |http://www.freecodecamp.com/1338
ello
hello guys. I'm almost finished with my portfolio site project. (The main parts at least) This took me a few days because i'm still learning and I had to correct a lot of errors. It's simple tell me what you guys think. Also can anyone help me on how to align the submit button at the bottom of the page for smaller screens? https://codepen.io/emmanuelamador/pen/zKKrEa
@emamador Can't you just put an "text-center" class on the button?
@1338 what all we have to use while building portfolio ?
can we use .js too ?
@1338 that's the thing. I want to keep the button aligned to the left of the form and not the window. On the full screen version it works well but on smaller screens it gets aligned to the far left of the window.
i guess that would be the other option. to center it.
the form in a div and put text align to the left? @emamador
but i want to figure out the solution to the problem.
ok hold up
what should be recommended in order to build portfolio ?
css and js too ??
https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage
@sourabhatt the challange mentions the use of jQuery so I guess JS must be fair game?
@sourabhatt the challange mentions the use of jQuery so I guess JS must be fair game?
@sourabhatt You don't need js to build a portfolio, but it can help to add interaction if you so choose.
Start watching youtube tutorials and find other means to learn more about html/css/js
you will need every bit of knowledge you can get
@sourabhatt idk i just used css and html and bootstrap because that's all i know right now and what i'm familiar with. i'm still learning. i want to implement js though.
@emamador js is intense, but starting with jQuery can help to bring you in without exploding your brain
don't get me wrong though, jQuery can be intense as well
@emamador I really like your page so far. It has the style I would use once I get to doing the challange myself. :+1:
@emamador Try wrapping your form in a container like this.. and then instead of wrapping the button with an offset do this…
@jdtdesigns thats probably why they showed us some jquery first here in freecodecamp.
@1338 thanks :) i'm trying to get better at the designing aspects of the site. i always get stuck there.
emamador sends brownie points to @1338 :sparkles: :thumbsup: :sparkles:
:cookie: 148 | @1338 |http://www.freecodecamp.com/1338
@emamador jQuery is used for DOM manipulation for the most part and makes it easy to make changes to the page. Vanilla js is where you get into actual programming and algorithmic problem solving.
Actually what @SteveAmaki showed was better then mine. Use that instead. I'm still learning too. @emamador
There's 10,000 videos for jq, so you have plenty to learn from. ;) @emamador
@SteveAmaki ok. let me try that.
hello everyone
My general rule for Bootstrap is this.. Never use “col-size-#” outside a container or row.
Hey Vinita.
hi @SteveAmaki
@VinitaBapna your menu button doesn't work when you make the window smaller. Otherwise a nice and colorfull website. :D
@1338 m also looking for solution
@VinitaBapna make sure jQuery is linked properly.
i haven't read javascript may be i need to do that first
@SteveAmaki i'll check
There's no need for javascript.. you can activate jQuery in Codepen.
and Bootstrap should see it automatically.
thanks let me check
@SteveAmaki added jQuery - https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
Show me your code in Codepen
hmm.. weird.
@VinitaBapna Add bootstrap.min.js below jQuery in your codepen JS settings. Click Run, and then try again.
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
That should fix your menu
@TylerMoeller How come the jQuery in codepen isnt working?
Yours worked.
@SteveAmaki The bootstrap mobile menu requires jQuery and bootstrap.js
It's a JS component of bootstrap: http://getbootstrap.com/javascript/
OH!!! Bootstrap.js was missing
Yeah, that's what was missing
@TylerMoeller Thanks man.
steveamaki sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 846 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
No problem
Can someone tell me why my Navigation bar is hyperlinked like that? http://codepen.io/n_horn/pen/bwgaXL
@N1CKL3 What do you mean?
@JLuboff My navigation buttons look like they are visibly hyperlinked. They are blue when I classified the color white, and when you hover over them the words are underlined. Makes me think that they are hyperlinked, or they at least have the appearance of being hyperlinked.
I have no idea how this happened. I followed a guide to creating a navigation bar and it should not look like that
@N1CKL3 Thats becuase they are hyperlinked
anything between <a href="link">Text</a> is a hyerlink
@JLuboff Yeah but the examples I saw didn't have the appearance of being hyperlinked. I understand that I am linking the words to a part of my webpage but I don't want the buttons to look like that.
@N1CKL3 You can modify the color of the links and remove underlines with this CSS:
.topnav a {
color: white;
}
.topnav a:hover {
text-decoration: none;
}You could also use a template for your navbar: https://getbootstrap.com/examples/navbar-fixed-top/
@N1CKL3 I would add text-decoration: none; to your css for a:hover to get rid of the underline
@N1CKL3 You probably also want to put a color under the a:hover in css for it changing to another color.
@N1CKL3 I think nicole is trying to get the default Bootstrap styling to work..
not create her own styling.
@N1CKL3 make sure you have the right classes in the right spot..
http://getbootstrap.com/components/#navbar
http://getbootstrap.com/components/#navbar
@TylerMoeller @SteveAmaki Thank you! I am going to look through that link you sent me Steve. I got it to work by doing what everyone else said but yeah, it's a lot more steps than I wanted
n1ckl3 sends brownie points to @tylermoeller and @steveamaki :sparkles: :thumbsup: :sparkles:
:cookie: 204 | @steveamaki |http://www.freecodecamp.com/steveamaki
:cookie: 847 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
oh good!
@SteveAmaki Yeah...I looked up how to create a navigation bar html but I wanted to make it using bootstrap. All of what I just did was pointless....... (╯°□°）╯︵ ┻━┻
I wouldnt say it was pointless.. Im sure you learned some stuff along the process.
@N1CKL3 https://codepen.io/1338/full/rrjdGW You can start with something like this. Look at all the classes used and look at the bootstrap website to see what they do. :3
@1338 Thank you!
n1ckl3 sends brownie points to @1338 :sparkles: :thumbsup: :sparkles:
:cookie: 149 | @1338 |http://www.freecodecamp.com/1338
@SteveAmaki Lol that's me making fun of myself, in an overly dramatic way, for being careless
So every portfolio project I have seen has had JavaScript in it. I followed the order of the sections. JavaScript comes after this. Should I assume that I need to go do that before finishing this project?
@N1CKL3 Oh, remove the CDN's from there and use CodePen for it instead. You need the CDN for bootstrap (CSS and JS) as well as jQuery's JS CDN.
I'm using Atom to code then throwing it into codepen.
@N1CKL3 You don't need to add JavaScript to your portfolio. Most of the JS people use is for smooth scrolling effects or bootstrap's scroll spy initialization. You can always come back to your portfolio project later and update it with new features.
You do, however, need to add the jQuery and Bootstrap.js libraries if you want to use the bootstrap collapsible navbar.
@TylerMoeller That is why I said it. I wasn't expecting her to use JS. But it is nice to have that feature and it doesn't require any extra knowledge. Makes you feel like you have delivered a more complete product.
@TylerMoeller @1338 Thank you. You guys have been a huge help
:warning: n1ckl3 already gave tylermoeller points
:warning: n1ckl3 already gave 1338 points
n1ckl3 sends brownie points to @tylermoeller and @1338 :sparkles: :thumbsup: :sparkles:
@SteveAmaki hey i tried your code...it didn't work. but I found a simpler solution http://codepen.io/emmanuelamador/pen/zKKrEa I just added the class "col-xs-offset-2" for the smaller screen. anyways, thanks for the help.
emamador sends brownie points to @steveamaki :sparkles: :thumbsup: :sparkles:
:cookie: 205 | @steveamaki |http://www.freecodecamp.com/steveamaki
@N1CKL3 you remind me of julia from justkiddingfilms. heard of them?
Glad you found your solution @emamador !
@SteveAmaki hey how did you get so good at web design? are you an artist or something?
So.. Im a graphic designer.. been doing it for awhile.. i dabbled with code along time ago. back before html5 came out.
so I havea basic understanding of things.
Still working on getting better for sure.
@SteveAmaki how did you end up in graphic design? were you always an art kid or something?
I wanted to be a graphic designer back in college...I had dappled with creating websites in middle/high school....then the counselor at my community college were garbage and were having me take classes that I didnt need...so I ended up in IT support/administration haha
@SteveAmaki and do you have any tips? for design?
@emamador Yeah I was born and raised in the Philippines. I was surounded by people who worked a lot with their hands.. my grandpa was a carpenter/painter. My other grandpa was a cook. Two of my uncles worked a designer for the department of agriculture. My mom and sister drew well.. so did my uncle.. so yeah. creativity was encouraged.
@emamador I don't think I have heard of them
so my definition of design changed through out the years. So I guess one tip is.. always keep in mind that design is more than just looks. You design because their is a user.
in terms of getting better as a designer, just the internet man. freaking google everything.
watch videos.subscribe to podcasts
follow your design heroes on social media.
The most important factor is Just Do It. ;)
the more you screw up, the more you learn
One great podcast is http://www.travandlos.com/
don't sit around and listen or watch all day
actually do it
theyre also on twitter. They’re great guys.
for sure @jdtdesigns doing is definitely vital....which Im sure @emamador is already doing.
@SteveAmaki dude thats awesome. Oh, and thanks for the resources.
emamador sends brownie points to @steveamaki :sparkles: :thumbsup: :sparkles:
:warning: emamador already gave steveamaki points
sure thing.
This message was deleted
@SteveAmaki I teach design and code and the main thing I see constantly is the desire and talk, but no action.
@jdtdesigns yeah lots of time i start to watch tutorials and then just watch them like i'm watching a movie and then i binge watch cause it's faster to watch then to actually do it.
@JLuboff Im sorry to hear that. Im sure IT is a rewarding field as well
@jdtdesigns This I do more then I'd like to admit as well.
if i really want to learn i figured i have to do so im here now trying to learn.
@jdtdesigns I see. I guess them being in your class is a step. lol
@SteveAmaki lol
@SteveAmaki Ya it is. At this point, I'm trying to learn SQL and programming (I like javascript, its the first programming language I've been able to somewhat grasp) just to advance myself in my career.
@JLuboff SQL and database in general is my list. Right now, Im trying to get front end down.. then moving to backend and database stuff.
@SteveAmaki Ya, I'm taking a class for SQL...which actually isn't terribly difficult, albeit, it is all the basics right now. I need to learn to create Front end apps for it though, seeing as how thats the position I will need to fill at my current job
@JLuboff nice! is it a class in FreeCodeCamp or somewhere else. Im in a full-stack class right now via Udemy.com.
@SteveAmaki Its an online class through a local community college, works paying for it :D
Nice! free is always good!
Ya definitely. Now I think I'm going to have to try and learn Visual Basic or something along those lines for the front end :(
One thing I found out is that, its very helpful for me to take two different classes of the same thing.. for example.I was taking a Javascript class on Udemy and another Javascript class via Lynda.com.. jus tseing two different take on the matter.
When I first learned to use (my)SQL with a front end application in mind. It was just a highscores game for a game that I cough made /cough. Didn't have fancy things like PDO and such.
Ya I've done the FCC and Codecademy Javascript lessons. I'm stuck on the FCC advanced algorithms though...they're...not easy..
Hi guys, am stuck at the second front end project, online portfolio.. am trying to make my div have a negative margin at the top, but it wont budge, http://codepen.io/awanjila/full/LRNwWx/ kidly assit someone, anyone?
@SteveAmaki it should completly feel the top, thanks though, i keep giving it a negative margin but it wouldnt change
awanjila sends brownie points to @steveamaki :sparkles: :thumbsup: :sparkles:
:cookie: 206 | @steveamaki |http://www.freecodecamp.com/steveamaki
@awanjila open @SteveAmaki pen in fullscreen it looks different on here. what do you mean fill the top?
exactly like that @SteveAmaki and @emamador thank you
awanjila sends brownie points to @steveamaki and @emamador :sparkles: :thumbsup: :sparkles:
:cookie: 64 | @emamador |http://www.freecodecamp.com/emamador
:warning: awanjila already gave steveamaki points
@awanjila great! I just added the "navbar-fixed-top” class on the nav element.
@SteveAmaki wow! i didnt even know that was a class.
@emamador I didnt either! I just went here. hahaha
https://v4-alpha.getbootstrap.com/components/navbar/
https://v4-alpha.getbootstrap.com/components/navbar/
@SteveAmaki yeah im looking at all the nav options after i googled the class you mentioned. there's a bunh of nav options!!!
*bunch
There are a ton of awesome built in classes with bootstrap
javascript elements as well
@JLuboff yup.
@SteveAmaki @JLuboff damn son. this is awesome. lol
I try to stick to the base styling and then edit bit by bit as needed.
Thats how I did this!
http://codepen.io/ssuratosjr/pen/JRRAWJ
http://codepen.io/ssuratosjr/pen/JRRAWJ
This might be a dumb question. But how come the background doesn't turn black?
https://codepen.io/1338/full/rrjdGW/
Do I need to overwrite some bootstrap method and if so how does one do that on codepen?
Other then the obvious and ugly style="" in the tag?
https://codepen.io/1338/full/rrjdGW/
Do I need to overwrite some bootstrap method and if so how does one do that on codepen?
Other then the obvious and ugly style="" in the tag?
@1338 because the container is filling the background
also, you don't put html/head/body tags in the html on codepen
@1338 do this
/* Empty CSS file for your own CSS*/on your CSS sheet
just everything between
@1338 then it will work
@1338 add
background: black;to you “container-fluid"
try that
@1338 edited my reply ^
@1338 since the "#" is interfering with your CSS
@APRim05 is right.
@1338 so you have to comment it out
@APRim05 what he said erase this line or comment it out.
Yeah. just noticed it. That was a bit of a fail on my part. thanks @APRim05 and @SteveAmaki and @jdtdesigns
1338 sends brownie points to @aprim05 and @steveamaki and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 207 | @steveamaki |http://www.freecodecamp.com/steveamaki
:cookie: 599 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:cookie: 150 | @aprim05 |http://www.freecodecamp.com/aprim05
@emamador and thanks XD
aprim05 sends brownie points to @emamador :sparkles: :thumbsup: :sparkles:
:cookie: 65 | @emamador |http://www.freecodecamp.com/emamador
cmd / is the shortcut for comment line just an FYI
or ctrl \
@APRim05 :) no prob
Good to know. I am rather new to codepen. (first day) and haven't been programming for a few years. so kind of getting in the swing again.
ctrl /
@SteveAmaki is that for codepen?
@APRim05 yes
@SteveAmaki oh nicee
cmd / for mac
ctrl / for pc (obviously)
ctrl / for pc (obviously)
how do i make images that are wider than they are tall responsive when put into a circle
@mhdavis instead of “putting” the image in a circle, just give the image the border-raius of 100%
..or give the circle container/div an overflow:hidden;
..i think
@SteveAmaki I'm trying to keep the image withing a certain size (400x400) but i also don't want the image to get distorted
when i try what you suggested, it does make the image itself circular
but it doesn't keep the dimensions i want
Where’s your code?
if you go to the portfolio section on the css
and the portfolio section in the html
its the first entry in the portfolio section of the html
@mhdavis very nice site. :)
@emamador thanks; still a work in progress
mhdavis sends brownie points to @emamador :sparkles: :thumbsup: :sparkles:
:cookie: 66 | @emamador |http://www.freecodecamp.com/emamador
center center is the position of the image
you can adjust that with percentages or text values (left, right, top, bottom)
@jdtdesigns oh right on, you can adjust it in the css, both the width/height and the border radius
@mhdavis in the context of your project, I would wrap the image in its own div that is 300x300.
setting an image as a background gives you way more flexibility
background-size will automagically adjust the image to always maintain ratio no matter the size
@jdtdesigns yup thats a good option too.
@jdtdesigns is there a way to adjust the image? you have it set as centered, but the image that im using, the person is standing right-of-center
how do you adjust the orientation more precisely?
@jdtdesigns perfect
@jdtdesigns more so out of curiousity, what does the percentage correspond to on the image
in the background-position
@mhdavis it's the x/y offset
with only one number, it's just the x-axis
nice @jdtdesigns !
with 2, first is x, second is y
@jdtdesigns so then csss auto detects the image center
yep, with it set to 'center center', the browser will focus on the center of the image automagically
that's pretty neat
css3 is awesome
so many things that you don't think about or even know until you play around
yea fure sure
What if you want to add alt text in case the image doesn't display properly in the browser
I tried it in the html and it overlapped with the image
title attribute @mhdavis ;)
@jdtdesigns thanks still getting used to the technical terms for everything
mhdavis sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 600 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
it'll never stop so get used to it lol @mhdavis
@jdtdesigns so in the css goes "title attribute: "blah""
in the html
title="some dude"
@TDandelion your website link on your profile isnt working..
@SteveAmaki Yeah, coding it in laravel
not done with it ;)
gotcha
@jdtdesigns yea it still overlaps the picture in the html for some reason
Hello.
Can anybody help me to understand why reset.css effects my font settings?
I linked reset.css file (this one http://meyerweb.com/eric/tools/css/reset/) and then linked my own css file.
When I try to set font in my own css file using * selector – it doesn’t work.
https://codepen.io/Pablo8/pen/kkgjRy
Can anybody help me to understand why reset.css effects my font settings?
I linked reset.css file (this one http://meyerweb.com/eric/tools/css/reset/) and then linked my own css file.
When I try to set font in my own css file using * selector – it doesn’t work.
https://codepen.io/Pablo8/pen/kkgjRy
@mhdavis Im guessing because the image is set as a background instead of embedding it in an <img> tag.
…not sure.
@mhdavis The title attribute will do that, but it's not like people will be hovering over your images for any good reason. If it's important to have text for the image, that's the best way to do it. Otherwise, I wouldn't even worry about the text.
Alt text is specific for readers for the blind
Can anybody help me find you why div with #wheather_widgetid doesn't change its html text for the json?
http://codepen.io/zarruk/pen/dpNyOj?editors=1010
http://codepen.io/zarruk/pen/dpNyOj?editors=1010
@jdtdesigns but wouldnt you want your site fully accesible to everybody?
@SteveAmaki Your personal profile to show off your work? Not so much lol.
hmm..
ok
@zarruk $.getJSON("http://ip-api.com/json", json => console.log(json) )
you just had a closing paren after the url
@jdtdesigns sounds good
@zarruk longhand version
$.getJSON("http://ip-api.com/json", function(json){
$("#weather_widget").html(JSON.stringify(json));
});
@jdtdesigns oh yes, that works! can you please explain me what would be the difference between what I and you had?
@jdtdesigns btw thanks!
zarruk sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 601 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@zarruk
// You had this -- Notice the closing paren after json" and no closing paren after the closing bracket
$.getJSON("http://ip-api.com/json"), function(json){
$("#weather_widget").html(JSON.stringify(json))
} // need closing paren here and semi-colon
@jdtdesigns yes, I mean. I noticed the syntax difference, but wanna understand why yours work and mine doesnt
@zarruk because those are syntax errors that will cause the code to fail lol
@zarruk Your code terminated the getJSON, so there was no callback function passed to getJSON
@zarruk The worst part is it wasn't a syntax error from js point of view.
@sjames1958gm yes, i understand! thank you, i think it is a matter of practice
zarruk sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3430 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@zarruk Yep.
how does it work?
For the tribute page are we not allowed to use style?
His example only showed using one. Can we use more?
@sjames1958gm @jdtdesigns and now, do you know why it is not displaying the json of the Open Weather Map api?
Here's the trick answer @zarruk. You can store an ajax call in a variable to be used later. So the compiler red the getJson as a promise and didn't throw an error when you followed it with a function. Pretty weird and rare occurrence.
Can someone help me with jQuery?
I have a signup form with text boxes for inputs. I want the text box border to be gray at page load, then turn blue on active, and then turn red when clicked out of the box (if box is empty).
Can you just point me to the event I would use? Thank you!
I have a signup form with text boxes for inputs. I want the text box border to be gray at page load, then turn blue on active, and then turn red when clicked out of the box (if box is empty).
Can you just point me to the event I would use? Thank you!
@jdtdesigns how would i do that?
@zarruk You're trying to run asynchronous calls procedurally(one command after another) which won't work.
The best way to go about it is to separate your calls into functions that flow with each other.
@jwoo92 Very Nice :-)
@jdtdesigns thank you master. How do I do to obtain the first json first (therefore being able to assign the city name (
json.city) to var a) and then afterwards the next json (therefore being able to include a in the url that calls the Open Weather Map api)?
zarruk sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: zarruk already gave jdtdesigns points
@zarruk Would that be a synchronous call?
I've been trying to work this out for the past 40 mins. or so. I am trying to change the colors of my navigation buttons. I have tried forming id tags to change them. I haven't managed to find a place to stick the id tag so that it applies to all 4 of my buttons. I did, however, manage to get the text color to change when I made an id tag specifically for 1 <li> element. I didn't know if someone knew how to target them all with 1 id tag or if I need to make individual id tags. http://codepen.io/n_horn/pen/bwgaXL
@jdtdesigns Oh thank you so much! That makes things much clearer!
zarruk sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: zarruk already gave jdtdesigns points
@jdtdesigns One question. How I was doing it is an asynchronous call?
@N1CKL3 Don't use the same id for multiple items. That's when you'd use classes instead.
Apply the same class to multiple <li> tags, then write a style for that class.
@zarruk You were just procedurally writing out the getJson calls one after another. Those calls will connect to the server, ask for the data and then wait for it to come back. The data won't be returned instantly so running the code line by line won't work. JS runs super fast so the server doesn't have time to grab the data and use it before your code has already run. That's why you have to process the data in order of how it's received for it to work.
@jdtdesigns Thank you so much!
zarruk sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: zarruk already gave jdtdesigns points
@jdtdesigns You can't imagine how much that helped
@zarruk Glad to help ;)
@jdtdesigns Now I'm trying to re write it myself to see if I properly understood the logic
@N1CKL3
.NavButtons {
color: red !important;
}
@amidzicigor You'll want to look at the focusout event or onblur parameter in HTML.
$('input').focusout(function() {
$(this).css('border-color', 'red');
})
@monotone2k @1338 I tried both things and it still won't change. I can't overwrite the bootstrap defaults for the buttons.
If you have items which already have classes/ids applied, you need to specifically override them.
I haven't used glyphicons yet... but those are the items you'll need to override.
Or just this: http://codepen.io/anon/pen/kkgRRR
Don't overcomplicate things.
@monotone2k But what if she is going to use glyphicon more on her page?
@zarruk You can also use the built in Promise functionality in jQuery .ajax/getJSON calls:
$.getJSON("http://ip-api.com/json").done(function(json){
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q="+json.city+"&APPID=1f58400991b966bafb35c7f208b3817d", function(json){
$("#weather_widget").html(JSON.stringify(json))
\\ Do something with your weather data
});
});
@1338 I'll counter that with: what if she's not?
@monotone2k and @1338 Then @N1CKL3 would need to use:
.navbar-default .navbar-nav>li>a {
color:#2a2a2a;
}
@TylerMoeller I am not familiar with how you did it there
@zarruk It's adding the
.done(function(json) to your .getJSON call.
@monotone2k @1338 Thank you, both of you! I wasn't coding it wrong as CSS...I was applying it in the wrong place, which is why it never actually did anything.
n1ckl3 sends brownie points to @monotone2k and @1338 :sparkles: :thumbsup: :sparkles:
:cookie: 214 | @1338 |http://www.freecodecamp.com/1338
:cookie: 108 | @monotone2k |http://www.freecodecamp.com/monotone2k
@N1CKL3 No problem. :)
@zarruk For example:
$.getJSON(url,function(data) {
// first success
}).done(function() {
// second success
}).fail(function() {
// failures
}).always(function() {
// failures and successes reported here
});
Hi! Please, check my Random Quote Machine and give me a feedback
@jdtdesigns http://codepen.io/zarruk/pen/dpNyOj?editors=0010 although i did it (i hope) the same as you, it wont work! :worried:
@NatashaSetnik it doesnt tweet the quote
@zarruk you need 'http://' before the api url
@jdtdesigns Oh thanks. For example, those kinds of thing, am I supposed to know them?
zarruk sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 602 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
.dp{
background-color: #c3c3c3;
height: 200px;
border-radius: 5px 5px 0px 0px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
-webkit-transition: all 2s;
transition: all 2s;
}
.dp:hover{
background-size: 300px;
-webkit-transition: all 2s;
}Hi! Is there anyone that can help, please :/ I need strings that is spelled the same way foward as backwards to be true, so that is only characters and numbers
function palindrome(str) {
var str1 = str.toLowerCase();
var str2 = str1.replaceAll("[^a-zA-Z0-9]", "");
var str3 = str2.split("");
var str4 = str3.reverse();
var str5 = str4.join("");
if (str=== str5){
return true;}
if (str != str5) {
return false;
I am having a problem with this code
it changes when I hover but the animation is not working for some reason
selective help. well...
@Utkarshbhimte what animation do you meen? do you have a link to codepen?
@MichielHuijse transition
I am tryin to change the background size
@MichielHuijse https://utkarshbhimte.github.io/DevmashCard-liveCode/
Background is always fullscreen. what do you meen.
Also do you work inside github pages to modify your page? Think it is easier to work in codepen.
@NatashaSetnik Hi, I am also busy with this. I used a 2 dimensional array think it is a little shorter and cleaner. http://codepen.io/michiel-huijse/pen/rrWVdO
@NatashaSetnik
var items = [
["jan", "ik hou van alleman"],
["piet", "geeft hem niet"],
["dolf", "is een wolf"]
];
Does anyone have a link on how I can get a bootstrap navigation bar to scroll to the content on my webpage? I am having a hard time executing this.
@N1CKL3 like this? https://getbootstrap.com/examples/navbar-fixed-top/
Does anyone know why my html values aren't being replaced as stated in JS? Seconds ago it was but it isn't
http://codepen.io/zarruk/pen/dpNyOj?editors=0010
http://codepen.io/zarruk/pen/dpNyOj?editors=0010
Never mind, I just found the error!
hello all
from line 119 to 138
when how do i get my AI to toggle the class instead of staying there.
i've tried to remove it but it just removes the class from everything.
i am not sure how to do it....
@zarruk i do that too
@mpettaw2 so you want to remove the 'fil' class from the colored circle thats active?
@N1CKL3 did you figure out how to yet?
yes!
which makes sense now...thank you @4xDMG
@KoniKodes Thanks! that was a rough draft, it is more complete now on my local computer. I just have not uploaded the updated code.
jwoo92 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @konikodes |http://www.freecodecamp.com/konikodes
@mpettaw2 lol no worries. sounds like you worked it out yourself :)
@N1CKL3 -- it's all a matter of putting anchor tags on the places in the navbar with "href" attributes that link to the ID values in the sections that you want to scroll to. So you might have a "contact" link like this:
<a href="#contactSection">Contact</a>and in the div or section where you have contact information:
<section id="contactSection">which ties the two together
I did that. That means the only thing I'm missing is the JavaScript? http://codepen.io/n_horn/pen/bwgaXL
@khaduch
@jwoo92 I'm working on it
@N1CKL3 - it should work without any javascript. You don't have any content in your sections, so they are probably all hidden under the navbar?
@N1CKL3 What exactly are you struggling with and trying to do?
@khaduch Hmm I'm going to try and add some padding to my navbar and add a line of text to see what's happening exactly
@N1CKL3 - add this CSS and a little bit of text to each section:
section {
min-height: 300px;
background-color: blue;
padding-top: 60px;
}You'll see that it scrolls.
@jwoo92 I'm trying to create a one page webpage that has a navigation bar to take you to the proper content
@MichielHuijse thank you
natashasetnik sends brownie points to @michielhuijse :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @michielhuijse |http://www.freecodecamp.com/michielhuijse
@N1CKL3 check this out: http://getbootstrap.com/components/
Look at the right and read over nav and navbar.
In codepen, make sure you have bootstrap selected under the HTML settings.
@N1CKL3 I can help you through it, just make an attempt first :)
@N1CKL3 Also by looking over your portfolio, I would suggest building it with everything you want on it first, then it will be easier to finish off the navigation :)
@khaduch That did it. I see it scrolling now. You were right. We couldn't see it because the sections were pretty much non-existent with no content. Thank you! Also, you wouldn't happen to know how to override bootstrap to change the navigation bar hover and active. I tried to do it earlier and nothing happened.
n1ckl3 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1710 | @khaduch |http://www.freecodecamp.com/khaduch
@jwoo92 My coding was right, we just couldn't see it scrolling due to lack of content. I was confused because I was under the assumption that I had to use javascript to get the webpage to scroll.
everything I had searched had javascript in it
@N1CKL3 You will be fine without javascript on this project and you are right, it will be easier to test once you have more content to scroll through.
@N1CKL3 You will begin to work with javascript challenges after you complete the portfolio project. Be ready for the challenge then as it may be difficult at first.
@jwoo92 I think in retrospect you are right. I should have taken care of the content first. I even thought about that as I was doing it BUT I've already come so far. I've been working on this 1 nav bar since 11am and I want to finish it lol
@N1CKL3 I can fully understand how you feel. It is difficult now, but it slowly will make more sense for you as long as you do not give up. I was in your exact position back in march :)
@jwoo92 Lol I know a lot of it will become instinct eventually. I'm really enjoying coding so far. I have only been doing it for 7 days now, so I am really new. I'm happy with where I am right now and I'm not going to rush it. Also, could you help me with my last question, please?
I'm trying to override bootstrap defaults. I want to add the hover and active actions to my navigation buttons. I tried doing .active and .hover but it didn't work.
I want the colors to change when you are on the content page and when you are scrolling over a navigation button
@N1CKL3 Thats awesome, you are doing a great job for only 7 days in! I will send you a private message so I help you with your code without flooding the main chat.
hey guys, I've finally completed my design for my revamped portfolio site: https://amitp88.github.io/New-Portfolio/
I didn't make it mobile first because I wanted the aesthetics to be right
but now I'm starting over developing this site from a mobile-first approach
however, do you think it would be possible to use bootstrap's grid system for this? or should I just rely on media queries?
@AmitP88 looks like your skill section is showing now :P
@mones-cse lol yup. hopefully in the contacts section only right?
before it was glitching and showing up on the title page =P
Help please: I defined the
setBackground()function. After I did this, some of the elements of the page, disappeared. When I erase the setBackground()function, they re appear. Does anybody know why this is happening? http://codepen.io/zarruk/pen/dpNyOj?editors=0010
no wiki entry for:
please i defined the setbackgroundfunction after i did this some of the elements of the page disappeared when i erase the setbackgroundfunction they re appear does anybody know why this is happening httpcodepeniozarrukpendpnyojeditors0010
nope it only showing in contact section
awesome :)
do you think I would be able to use (should use?) Bootstraps grid system to make it responsive?
or should I just use media queries?
I defined the
setBackground()function. After I did this, some of the elements of the page, disappeared. When I erase the setBackground()function, they re appear. Does anybody know why this is happening? http://codepen.io/zarruk/pen/dpNyOj?editors=0010
@AmitP88 for quick output use bootstrap
and if you want to dive into deep try media queries
and if you want to dive into deep try media queries
@zarruk which element disappeared ?
hmmmm
I mean I want this to be able to look great on any size screen
I dunno if media queries would guarantee that
if you look into source code of bootstrap you can see they use media query
it just when you use bootstrap grid system you do not need to think of media query
it just when you use bootstrap grid system you do not need to think of media query
ah ok
hmmm, I guess i'll try media queries first in that case. I tried just implementing the grid system on my current site but it messed everything up
@mones-cse actually I look it is now working. However, please review the
setBackground()function. Why is the background not changing to the image pointed there although weather == clouds?
hopefully it'll work out
@zarruk ok i am looking
@mones-cse thanks
:cookie: 396 | @mones-cse |http://www.freecodecamp.com/mones-cse
zarruk sends brownie points to @mones-cse :sparkles: :thumbsup: :sparkles:
wrong
$(".general").css("background-image", url("http://www.familyandhome.org/sites/g/files/g20561/f/clouds.jpg"))right
$(".general").css("background-image","url(http://www.familyandhome.org/sites/g/files/g20561/f/clouds.jpg)")
@zarruk url key word should be inside " ''
@AmitP88 The first page is very clean looking. The link to the repo for each project is very convenient!
@mones-cse still wont work
@glgirl28 thank you! :)
amitp88 sends brownie points to @glgirl28 :sparkles: :thumbsup: :sparkles:
:cookie: 343 | @glgirl28 |http://www.freecodecamp.com/glgirl28
I'm trying to do the Local Weather project. I use https to get geolocation, but now I can't call the Open weather API because it's not https. What should I do?
@zarruk inside your setBackground method
variable weather is undefined thats why it is not showing
variable weather is undefined thats why it is not showing
call setBackground(); after
this line
weather = json.weather[0].main;
this line
weather = json.weather[0].main;