Dear community. Trying to complete the "Random Quote" challenge #259, I am at a loss why I can't send a string to Twitter. I generate this HTML code:
'''<form target='_blank' action='https://twitter.com/intent/tweet?text=bla'><button id='tweet-btn' class='btn btn-primary'>Tweet the quote</button></form>'''
'''<form target='_blank' action='https://twitter.com/intent/tweet?text=bla'><button id='tweet-btn' class='btn btn-primary'>Tweet the quote</button></form>'''
:bulb: to format code use backticks! ``` more info
OK let me try again. Trying to complete the "Random Quote" challenge #259, I am at a loss why I can't send a string to Twitter. I generate this HTML code:
<form target='_blank' action='https://twitter.com/intent/tweet?text=bla'><button id='tweet-btn' class='btn btn-primary'>Tweet the quote</button></form>
But, Twitter only receives the part before the question mark.
When I enter the URL directly into the browser, I get the expected result - a twitter window with "bla" in it. When I submit the URL via the form, I get an empty twitter window. What am I missing?
@ICodeWateverIFeelLikeCoding because input is an inline element, set a width and margin-auto to the div that contains the input field
FWIW my pen is http://codepen.io/berndbausch/pen/vgvpjN
@ICodeWateverIFeelLikeCoding or set the display of the input field to block
When a player clicks a square it logs several repeats and logs it as incorrect. Why?
http://codepen.io/DevchamploO/pen/KrRpqq
http://codepen.io/DevchamploO/pen/KrRpqq
@berndbausch Try a different approach. Remove the form and the button. If your tweet text was "helloWorld", your URL would be:
What's the easiest way, in HTML, to allow someone to go to that link?
https://twitter.com/intent/tweet?text=helloWorldWhat's the easiest way, in HTML, to allow someone to go to that link?
Get that working first, and then style it like a button
<a href>
I thought of that, but how do I style this like a button?
You add the same classes you used on the <button> tag.
class="btn btn-primary"
Thanks. (rolling up the sleeves)
<a class="btn btn-primary" href="link to twitter">Tweet the quote</a>
Still I would like to understand what's wrong with my code. Can't sleep at night because of it :)
Thanks @SkyCoder01, seems to work.
berndbausch sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 192 | @skycoder01 |http://www.freecodecamp.com/skycoder01
I'm still learning, but I think if you want a <form> to do a certain action, you need to use a submit function in javascript
I could be wrong there, so don't quote me on that. (no pun intended :))
<form> should work without Javascript. It has existed since the early times of HTML. And I will add your quote to my product :)
lol
If you have more than one button in a form though, how do you tell one of the buttons to submit and the other to clear the contents of a text field, for example?
maybe that's what type="submit" is for on the button?
I guess the HTML <form> is limited. In any case, my knowledge of these matters is.
please how do i support multi character numbers in my calculator excercise
Good evening everyone
Can somebody please help me? https://www.freecodecamp.com/challenges/comparison-with-the-equality-operator
@jumpship91
can someone tell me why "function(data)" works? Where is it getting the "data"?
http://codepen.io/Jumpship91/pen/GrvJOL
can someone tell me why "function(data)" works? Where is it getting the "data"?
http://codepen.io/Jumpship91/pen/GrvJOL
@jumpship91 It's getting the data from this page: https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
Open that URL in your browser to see it in plain text
Open that URL in your browser to see it in plain text
@TylerMoeller what is telling my page that the response is "data"?
versus any other variable
Hmm, just a second, I'll try to explain
var data = 'hello';
function sayHello(data) {
console.log(data); // this outputs 'hello'
}
It's the same as that above, only
$.ajax is going to the URL you give it and assigning the data at the URL to data instead of you creating your own variable
@TylerMoeller ahhh, gotcha. So ajax is assigning behind the scene.
Yes, ajax does a lot of magic behind the scenes - one important part is that it waits until it gets a response back from the website before processing any of the code inside
function(data) {}
@jumpship91 That will be important when you get to the weather challenge - because you'll have to get location, wait for the response, and then get weather for that location
thanks Tyler! One more question....doesn't this API give a JSON response? Why is it working even though I am breaking the same origin policy?
That API gives an array back actually
But some APIs will return JSON
The cross-origin/same-origin policy is also different for different APIs - it all depends on how they set it up
@TylerMoeller makes sense now. Thanks!!!
jumpship91 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1485 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Hi all,how to select the checkbox and change the text color?http://codepen.io/a2340392/pen/jydyWj
No problem - have fun with your quote machine :+1:
@CJ2340392 Unfortunately, checkbox styling can be complicated. Maybe read through this answer for some ideas: http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css
@TylerMoeller Thanks
cj2340392 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1486 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Hi everyone: I'm having trouble with my first HTML project (creating a tribute page). http://codepen.io/ThurstianTsui/pen/EZGjVx
I have two main issues right now:
- I can't seem to manipulate the image properly. I've tried to use bootstrap to round the corner / create a circle image with img-rounded and img-circle. I've also tried to center the image but haven't been to make it work.
- I've been struggling to bold certain parts of a sentence. The way I've been doing it in the code is with <p class="text-center"><strong>Bold Test</strong> A shining pillar in the NBA community</p>. However, the formatting has no change.
Can anyone shed some light on what I should be doing differently?
@ThurstianTsui I don't know anything about img-rounded or img-circle, but in the exercises they just had us use border-radius:50%;
Why don't you use css to style certain classes bold? @ThurstianTsui
Why is every button opening the same link?
ik why its doing that, but don't know how to fix it
@Athabasco Wrap each of your .articles in a hyperlink (<a></a>) rather than registering a click even handler for each one.
<button> and <input> are meant for submitting information. <a> is meant for following a link.
@SkyCoder01 alright
@SkyCoThank you. it is working now.
@SkyCoder01 I know what they do, but window.open wasn't the way
now the search only works once
can some one help me with this please
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</nav>
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</nav>
its just not working?!
it lines all my hrefs in the midle bootstrap never does its thing?
@iriquoi try it without quotations
just href=#
That's so funky...it just doesn't do anything...??
it lines up every thing in the midle
I guess ill keep trying thank for your response @Athabasco
iriquoi sends brownie points to @athabasco :sparkles: :thumbsup: :sparkles:
:cookie: 241 | @athabasco |http://www.freecodecamp.com/athabasco
this is what I get!! aHHH!!!
I think part of the issue is bootstrap in codepen. Add <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> and you atleast get the header. Still weird centering
I wonder if its a bug?
Ill do more research
any ideas on why "thumbnail" isnt doing anything and why my image isn't snapping to size?
Hello! Why can't i change the color of my h1 tag here?
<div class="container-fluid row mainsection">
<div class="col-lg-6" id="sec1">
<h1 class="text-center" id="cololoo">South Africa…It’s here!</h1>
</div>
<div class="col-lg-6" id="sec2">
</div>
</div>
@BryantWood this is what you need to do
remove bootstrap from the css settings
and paste this on your html stuff for head settings
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
are we doing something wrong or is codepen just off?
I feel like we shouldnt be having to put in JS for bootstrap to do its thing.
apparently some things are not supported on bootstrap 4
keep a copy of the links and youll be fine
let me know if it worked so I know.
it wont let me save but I know it worked :smile:
Hello, anyone knows why this works in chrome, opera, edge, but not in Firefox?? http://codepen.io/anon/pen/EZrXqo?editors=0010
@AshanMohammed like this <div class="container-fluid row mainsection">
<div class="col-lg-6" id="sec1">
<h1 style="color:red" class="text-center" id="cololoo">South Africa…It’s here!</h1>
</div>
<div class="col-lg-6" id="sec2">
</div></div>
hey @iriquoi , that worked. Sorry, got caught up in trying to clean things up.
Thanks for your help.
no problem
HELP WITH D3 - anyone here could go through my code and explain to me what have I done wrong that my circles are not fixed to the x axis?
@alpox Hey, I wanted the circles to stick to the xAxis when scrolling right and left. And also when Zooming in to re-render at their position(x)
@JonathanDn are you expecting output something like this ?
@mones-cse There are 2 behaviors:
scrolling left and right - I expect the green circles to stay where they we're originally rendered for example if one of the circles was rendered on 9:30 am it should stay there on the x Axis even when moving right or left.
zoom - when zooming in and out - I expect the 9:30 green circle to re-render itself back to 9:30 on the new resolution of the x Axis
anybody explain me why we should put GOOGLE PLUS into web?
Hello, friends! I am writing code for Random Quote Machine. I have problem with quotes that exseed 140 characters. Can you give me an advice how to get only short quotes?
Hello everyone,i'm already complete assignment.what do you think of the Webpage?give me some advice.thanks http://codepen.io/AlienAvatar/pen/YNBrox
Hello, friends! I am writing code for Random Quote Machine. I have problem with quotes that exseed 140 characters. Can you give me an advice how to get only short quotes?
@zhann1982 There might be a way to ask for only short quotes from the api. I'm not sure which you're using to pull quotes from.
@zhann1982 Could you show me your bug code？what problem with you?
@zhann1982 Otherwise, you could use .length to check the length of the quote and if it's too long, make another ajax request for a new quote
What's wrong here with cloning nodes?
function generateFaces(){
var x=0, y=0;
var numberOfFaces =3;
var theLeftSide=document.getElementById("leftSide");
var theRightSide=document.getElementById("rightSide");
numberOfFaces = numberOfFaces + Math.floor(Math.random()*6);
for(var i=numberOfFaces;i>0;i--){
var x=Math.floor(Math.random()*400);
var y=Math.floor(Math.random()*400);
var img_tag=document.createElement("img");
img_tag.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
img_tag.style.left=x +'px'; //left 0>>400px
img_tag.style.top=y +'px'; //right 0>>400px
var leftSideImages=theLeftSide.appendChild(img_tag);
/*problems start here*/
var xx=document.createElement('div');
xx=leftSideImages.cloneNode(true);
theRightSide.appendChild(xx);
x=x+10; y=y+10;
}}
@bd1887 @AlienAvatar Thank you all. I will try to request shorter quotes
zhann1982 sends brownie points to @bd1887 and @alienavatar :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for alienavatar
:cookie: 341 | @bd1887 |http://www.freecodecamp.com/bd1887
Hi, I am trying to call ajax inside for loop, this way:
but the loop does not work. anybody knows why?
It's working. Your URL is wrong. You keep on appending to the
url variable hence it gets so long.
@oppiniated yes, i see. but how do i reset the url before using it again? i tryed to ad url = ""; on the end of the loop, but it makes "" from all items of the list
That's so trivial. Instead of doing
url = url + users[i]; you can do var tmpURL = url + users[i]; and use tmpURL with the ajax call
@oppiniated Oh, does not seem trivial to me :-)
@oppiniated thanks a lot. I will try it
radekjohn sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 569 | @oppiniated |http://www.freecodecamp.com/oppiniated
see you
@radekjohn The more you code, the better you will get. Also remember, you should also look at code from others. How other's write code.
@oppiniated I thing i ma actually getting worse :-)
hey guys. so i have a function that is supposed to iterate through an array of mp3 links and play the sound. however the play() requests are getting interrupted by the next one in the loop, so only the last one ever plays. i’ve tried creating a function within the loop and then calling it, and i tried using setTimeout and nothing seems to work. If anyone had any insight that’d be great (i’m using react, but i don’t really think that matters for this)
randomCry() {
var self = this
for (let i = 0; i < this.state.randomSound.length; i++) {
var randomPokemon = this.state.randomSound[i]
var audio = self.state.audio
audio.src = randomPokemon
audio.play();
}
}
D3.JS HELP please - this is my fiddle https://jsfiddle.net/8gnx5nns/233/ I don't understand why my green circles are not appending on top of the x axis in their right position x. Could anyone help ?
@chaddd980 Do you have it up on Codepen?
Good morning! I am using a Mac, and trying to insert an image from my Mac in my portfolio challege, but all i have tried it is wrong. Someone can tell me how to do it? I am stuck, I didn't find any clear on internet. Thank you.
no i don’t @bd1887
@AlejoFCC I guess you will have to upload it somewhere on the internet in order to be publicly accessible
@AlejoFCC for example: https://postimage.io/
@kirbyedy Thank you. I will try to use links from my google drive account or google photos. It could work.
alejofcc sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
@AlejoFCC make sure those images from the google photos are publicly accessible
@kirbyedy I can't from Drive. I will try with Photos. Thank you.
alejofcc sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1782 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@AlejoFCC your own photo?
there is this site with cool photos you could use
or just use imgur
Hello everyone,
is there anyone with codepen xp who got a few minutes for me?
is there anyone with codepen xp who got a few minutes for me?
Hi guys, I am trying to use ajax inside a for loop and it does not work for me. Here is what I have:
@Tiboski what is the problem ?
Does anybody here know why the loop is not looping? When i try to let it just write user names, it works ok. The problem seems to be in ajax call
@radekjohn check the console:
error:"forbidden"
msg:"unaccepted route: streams/ - see https://wind-bow.gomix.me/ for infos"
@taltmann42 well, i can call the ajax for each user separately. I just wantet do do it in more legant way
@taltmann42 thanks
radekjohn sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 504 | @taltmann42 |http://www.freecodecamp.com/taltmann42
@radekjohn maybe you could try to use forEach()
@radekjohn ahh, i see the problem now
@kirbyedy hm, maybe. thanks
radekjohn sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1783 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@taltmann42 where?
@radekjohn you're giving the parameter
url to the API, but url is an just the urlPrep plus an empty string (user) at that point
you then set
user in the for-loop but that doesn't change the url
So you're firing 8 requests to
/streams not, 8 different requests with the user in the url
I'm stuck on the random quote generator
any hints on why my button doesn't work?
@taltmann42 so I have to set set url inside the ajax function?
@radekjohn update the url in the for-loop before you pass it to the ajax
@taltmann42 This way?
@Krimsonmedic where is that id floaty ?
@taltmann42 probably no
@radekjohn well it shows results now
@radekjohn the problem you just encountered is quite common, and has to do with javascript closures
@radekjohn the ajax-callback get's called way after the for-loop finished, because the server has to provide you with the information. By the time the callback get's finally called, you refer to
user inside the callback for example. The loop itself has finished so in the variable user is only the last entry
@radekjohn a simple way to solve this is to have a function e.g.
This function then builds the url with the
getStreamData(user).This function then builds the url with the
user parameter and makes the ajax call. You simply call this function in your for-loop. That works because in that case each instance of user is in its own context
@taltmann42 I think I understand. I will lokk at it and try it. thanks a lot
radekjohn sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:warning: radekjohn already gave taltmann42 points
see you, guys
could anyone explain to me the "media breakpoint" concept with bootstrap?
is it basically the container will arrange itself differently according to window size?
is it basically the container will arrange itself differently according to window size?
fixed it, still not working
@kirbyedy
@Krimsonmedic first, there's invalid HTML:
then, i don't think
<div class = "jumbotron text-center>"then, i don't think
onlick would do anything ;)
That's bootstrap tho, which I have loaded?
@Krimsonmedic no the syntax itself is wrong, the
> is still in the class-string
Ah, ok
fixed, but still..the button doesn't seem to call my function
And javascript is case-sensitive,
math doesn't exist, it should be Math
and there's still
onlick
oh my lord
:grin:
@taltmann42 thank you.... that was it
krimsonmedic sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 505 | @taltmann42 |http://www.freecodecamp.com/taltmann42
well, I sure wasn't licking the button
crap...how do I get the button to come back?
like to be able to click it multiple times
you set the html to the element with the id
quoteDisplay, but the button is also in that div, so it gets overwritten
<3
Hi! Could someone pls help me with my 'Wiki viewer' project. I'm trying to get my search results using jQuery's 'autocomplete', but I'm stuck defining my 'source'...
http://codepen.io/PipsChips/pen/zNLMyV
http://codepen.io/PipsChips/pen/zNLMyV
@Krimsonmedic :thumbsup:
This is a public announcement from the hair-pulling prevention center.
I have been trying to centre my elements with the tools introduced by freecodecamp (mostly vanilla css and bootstrap, right?) and it is hell. Please note that your nightmarish vertical-alignment issues can be solved by just adding this class.
Save yourself those hours of endless CSS fiddling and just use Flexbox.
I have been trying to centre my elements with the tools introduced by freecodecamp (mostly vanilla css and bootstrap, right?) and it is hell. Please note that your nightmarish vertical-alignment issues can be solved by just adding this class.
Save yourself those hours of endless CSS fiddling and just use Flexbox.
.vertical-align {
display: flex;
align-items: center;
}
it works perfectly and I will probably never again use anything else
@achudoz and then you get a client who demands IE8 support :P
@Krimsonmedic nice job with your quote machine...works beautifully
@Lorrie01 ty!
krimsonmedic sends brownie points to @lorrie01 :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @lorrie01 |http://www.freecodecamp.com/lorrie01
@achudoz what does flex do specifically?
@taltmann42 ha, I recon that before I would ever get any clients, that will be a dead breed of a browser
@achudoz I'd say it already is :grin:
@Krimsonmedic I always go to this site when using flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
display: flex makes the div element into a flexible box - it is pretty much what you imagine from its name. align-items: center aligns the elements in the center of the div. It is this simple
I just applied this class on my "row" div and it solved all the BS that I was being frustrated with for previous two hours
@kirbyedy are u still here mate?
:cactus:
can someone help me with angular syntax? how do I display the properties that are nested within an object within an array within a JSON object, like here with the weather data under the icon? i only want to select the result under ID. link: http://codepen.io/alant90/pen/egPpLj
hey guyz m stuck at the first page can anyone help?
anyone?
Hi! I can't figure out why my code doesn't work. I wonder if any of you could help me. I'm trying to complete the "local weather" project. When I run the code I get the following error:
""jQuery.Deferred exception: navigation is not defined" "@pen.js:13:5
g/</j@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29946
g/</k<@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262
" undefined"
I'm only starting this project. Here's my pen:
If I copy and paste the API URL to the browser it runs fine.
I mean "copy and paste" with random lat/long, or by city name, but with the same key.
what's a good place to start on the portfolio page
@Drbathound I think as soon as you know who your page will be about you should focus on the HTML content (H1, H2, P, DIV, etc). Write some stuff, add the title, maybe a few pictures. Only after that initial content writing i would focus on the styling.
@pharaohlxvi ok thx
drbathound sends brownie points to @pharaohlxvi :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @pharaohlxvi |http://www.freecodecamp.com/pharaohlxvi
Sorry, It's supposed to be a personal portfolio, right? So I guess you know who the page will be about. My bad :)
@pharaohlxvi :smile:
Hey guys,
I'm wondering why this piece of code is not working. I'm starting with the wikipedia challenge, so I figured let's see if I can get this api to work first. http://codepen.io/svenhendrikx/pen/qRgdvR
I'm wondering why this piece of code is not working. I'm starting with the wikipedia challenge, so I figured let's see if I can get this api to work first. http://codepen.io/svenhendrikx/pen/qRgdvR
small typo in the first one but it doesn't work anyway
Hello I need some help to make a responsive inline box with images
Anyone here? :)
@johnnydemol check your callback at the end of your api URL
Hi
I am working on this and using bootstrap css framework for styling
but I don't know how some bootstrap styles are not working
I am making the header with bootstrap navbar classes but it's not working in codepen while working fine on my local machine
Hello, I currently have an unordered list aligned with right side of page, I am trying to insert a pargraph on right side of screen next to <p>, can i use td <colspan> to do this?
@johnnydemol Got it to work this way:
var searchTerm = 'albert einstein';
var searchUrl = "//en.wikipedia.org/w/api.php?action=opensearch&search="+searchTerm+"&limit=100&format=json&callback=?";
$.getJSON(searchUrl, function(json) {
$("#div1").html(JSON.stringify(json));
});
Hello
sorry i meant to say align <p> on "left" side of screen
I have a question :o:
I would like this: http://codepen.io/firstinten/full/JExeQp/
to emulate this: https://coolors.co/77878b-b4b8c5-85969f-1b2223-dce8e4
where my div elements fit the page. Any guidance appreciated!
@yogesh-captain Hi Yogesh. Did you remember to add bootstrap in the Codepen settings?
Settings --> CSS --> Add External CSS --> "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" --> Save & Close
Settings --> CSS --> Add External CSS --> "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" --> Save & Close
@runnerbill75 <td> is a <table> element and a <table> is meant for data not content necessarily. It sounds like a good case for the bootstrap grid. One column on the left, another on the right.
Guys ive run into a weired situation.
navigator.geolocation works on chrome only if you run codepen under https,
but https doesn't allow to fetch json data from api.openweathermap.org.
my code is working on forefox but not in chrome. What do I do?
navigator.geolocation works on chrome only if you run codepen under https,
but https doesn't allow to fetch json data from api.openweathermap.org.
my code is working on forefox but not in chrome. What do I do?
ok thank you @TylerMoeller
runnerbill75 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1487 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@singleincome Hi. Something like this?
.container {
padding: 0;
height: 100vh;
width: 100%;
display: table;
table-layout:fixed;
}
.div1 { //Style the other divs with the same width and padding
border-style: solid;
border-color: black;
position: relative;
width: 20%;
padding: 0;
background-color: #FFF;
display: table-cell;
overflow: hidden;
}You can also remove the borders to make it more like the link you posted
@bd1887 For some reason, that broke my code hahaha
@bd1887 Oh, wait. There we go. Almost there: http://codepen.io/firstinten/full/JExeQp/
Oh wait I get it now.
Guys, please any idea what I'm doing wrong here?
http://codepen.io/pharaohlxvi/pen/ygQddz
http://codepen.io/pharaohlxvi/pen/ygQddz
The error I get at the console is
"jQuery.Deferred exception: navigation is not defined" "@pen.js:13:5
g/</j@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29946
g/</k<@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262
" undefined
"jQuery.Deferred exception: navigation is not defined" "@pen.js:13:5
g/</j@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29946
g/</k<@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262
" undefined
@pharaohlxvi
navigation is undefined
@singleincome Can I suggest a few other changes to the code. IDs should all be unique. And if several divs share a class, you should put that CSS in that class's styling only. You don't need to repeat it. Try copying and pasting this:
//HTML
<div class = "container">
<div class = "col" id ="div1"> #F1FFFA</div>
<div class="col" id ="div2">#1B2223</div>
<div class="col" id="div3">#B4B8C5</div>
<div class="col" id = "div4">#85969F</div>
<div class="col" id="div5"> #77878B</div>
</div>.container {
padding: 0;
height: 100vh;
width: 100%;
display: table;
table-layout:fixed;
font-family: segoe;
font-size: 20px;
color: black;
}
.col {
border-style: none;
position: relative;
width: 20%;
padding: 0;
display: table-cell;
overflow: hidden;
}
#div1 {
background-color: #FFF;
}
#div2 {
background-color: #1B2223;
}
#div3 {
background-color: #B4B8C5;
}
#div4 {
background-color: #85969F;
}
#div5 {
background-color: #77878B;
}
@pharaohlxvi You check for
navigator.geolocation and then use navigation
@oppiniated Duh! Thank you very much! How did I miss that?
pharaohlxvi sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 574 | @oppiniated |http://www.freecodecamp.com/oppiniated
@pharaohlxvi check the console next time
@fortMaximus I did! And still missed it. Guess I have to pay closer attention from now on. Thanks.
pharaohlxvi sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 398 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
:+1:
@singleincome Looks like you got it...
@CoderPrans Everyone hits that problem unfortunately, here's some background: FreeCodeCamp/FreeCodeCamp#7853
@bd1887 Thanks for the tip! I copied your code but it doesn't fit the page like I was aiming for.
singleincome sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @bd1887 |http://www.freecodecamp.com/bd1887
@bd1887 Definitely saves time. Just trying to figure out why it looks like this:
@yogesh-captain Open your CSS settings in codepen and make sure you're using the same version of bootstrap as you are on your local machine. Codepen changed the default bootstrap version you get with the quick-add menu to a new pre-release with different class names.
@singleincome You forgot to add a "." before ".container"
.container {
padding: 0;
height: 100vh;
width: 100%;
display: table;
table-layout:fixed;
}It's the little things :-/
@bd1887 :warning:
@bd1887 omg. @_@
@singleincome haha
Hi @bd1887 , Yes I have added the bootstrap
@bd1887 other style like container, text-info etc are working
@yogesh-captain There are different versions of bootstrap, some class names are the same, others are different across the different versions.
This is the version we learn in Free Code Camp: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
This is the version codepen adds: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css
This is the version codepen adds: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css
Hi @SkyCoder01
@SkyCoder01 Thank you. I have changed the bootstrap version and it's working fine now. Thanks a lot :)
yogesh-captain sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 195 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Good news :)
Oh good. A new version of Bootstrap to learn :worried:
I know :( I just learned bootstrap 3 like two months ago
hope it's easy to move to the next one
Hi guys. Just working on the portfolio section. How can I center a h2 and buttons vertically? I have them aligned horizontally but theyre sitting along the top of the div
@DeanHollstrom Do you have it up on Codepen?
I dont. Ill throw it on there and post it
@DeanHollstrom It's the nav buttons at the top that you don't like?
I have a bootstrap question, I currently have bootstrap grid element with two colums. In first I have a pargraph of text. In second column I would like to insert an unordered list, does anyone know how to do this?
No, the actual <buttons> under the h2. I want to center them both horizontally and vertically within the div
Here is my pen https://codepen.io/runnerbill75/full/WRYzoQ/
@runnerbill75 use the <ul> tag with <li> for each item in the list
yes, I have the list created, if you look at my pen, I am essentially trying to move <ul> up so it's on right side next to paragraph
Youll have to use the float command in css @runnerbill75 :)
@runnerbill75 the <div> with the list is outside your bootstrap row and column
@DeanHollstrom They're centered horizontally right now. When you say vertically, you mean you want them to stack? Or you want them to be at the center of the page?
@runnerbill75 also your second column is col-md-8, just as the first one
I know they are centered horizontally, its the vertical I have an issue with. I want them dead center of the page, but Im not sure thats even possible with css. This is an example https://gyazo.com/2c906dea33f9082b23102554b2c087cd @bd1887
ok thanks @achudoz , so I need to change second column to something different?
runnerbill75 sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @achudoz |http://www.freecodecamp.com/achudoz
Hello! I am doing the portfolio challenge and when I try to make the header fixed I get it but when i move the rest of elements I can see some over my header and others under my header. Any idea to solve this?
@runnerbill75 you have to change the columns so their combined width is no more than 12.
e.g .
```
<div class="row">
<div class ="col-md-8">
</div>
<div class="col-md-4">
</div>
</div>
then they will be next to each other
whatever you want to have in one row can not have the sum of the col-md-x more than 12
that is the way bootstrap is hardwired
ok, thanks for your help.
@achudoz Ok here's maybe how you might do something like that.
<h2>Tomahawk Digital Designs</h2>
<div id="button-wrapper" class="container container-fluid">
<button><i class="fa fa-twitter fa-fw" aria-hidden="true"></i> Twitter</a></button>
<button><i class="fa fa-github fa-fw" aria-hidden="true"></i> Github</a></button>
<button><i class="fa fa-linkedin fa-fw" aria-hidden="true"></i> LinkedIn</a></button>
<button><i class="fa fa-free-code-camp fa-fw" aria-hidden="true"></i> Free Code Camp</a></button>
</div>#button-wrapper {
text-align: center;
background-color: yellow;
position: absolute;
top: 45%;
}
@achudoz What took so long is it's doing something funny on small screens and I'm not sure why... Some invisible padding somewhere
hey guys how can i center my images and texts in jumbotron bootstrap
Anyone help please
@Rizamoyi In codepen, click Settings, Click CSS, and use this link to bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
After that, for text, use the
After that, for text, use the
text-center class and for images, use the center-block class.
<img class="center-block img-responsive" src="https://some image url">
Or for a pure css/html approach see the link above
Hi guys, could someone help me making API calls for "build a random quote machine"? My codepen worked yesterday, but when running it today I get
"Mixed Content: The page at 'https://codepen.io/bergmam/pen/zNeGMv' was loaded over HTTPS, but requested an insecure script 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=jQuery21306126836037503005_1487127134778&_=1487127134781'. This request has been blocked; the content must be served over HTTPS."
Could someone help me understand why it worked yesterday and not today? :P
How can i get this effect?shall i make a container for the stuff above the border and adjust that with z-index or is there something else?
http://res.cloudinary.com/whizzy/image/upload/v1472872426/img-effect.jpg
http://res.cloudinary.com/whizzy/image/upload/v1472872426/img-effect.jpg
@mml3b you have to pass value to the function
and then assign that to a variable
i did it
// Example
var changed = 0;
function change(num) {
return (num + 5) / 3;
}
changed = change(10);
// Setup
var processed = 2;
function processArg(num) {
processed=processArg;
return (num + 3) / 5;
}
// Only change code below this line
you have to give that value to the function actually
not to the variable
@mml3b
@mml3b change only code under the line it says to
@mml3b reset it, and call the function with a number that gives you the answer of 2
DO I change the processed variable from 0 to 2 ?
no
they are just initializing it
have processed be equal to the function with a parameter that causes the return value to be 2
im lost
just stickto the basics
suppose there is a function
how can i call a function ?
function add(x,y){
return x+y;
}
//result is 4
add(2,2);
@mml3b
you gave two values to add function those values just went to the function body and we added them up.
i hope that makes sense yo you
you can do something like
answer = add(2, 2);
to have the return value of the function be a value, (processed in the problem)
@mml3b yes! the value returned from the function can be stored in a variable.
I have a question regarding bootstrap grid system, I am trying to figure out how to increase space between two columns...
did you check out the documentation?
I read a little about col-offset, but it didn't make much sense to me..
i can check it out real quick, do you still have the page you looked at? can you link it?
yes, here it is http://getbootstrap.com/css/#grid-offsetting
here is my pen https://codepen.io/runnerbill75/full/WRYzoQ/
Essentially I am trying to create a little more space betwen my paragraph and my <ul>
okay i'll see what i can do
@runnerbill75 Think of a bootstrap row like a spreadsheet row with 12 cells inside.
ok
One cell would be: <div class="col-xs-1"></div>
yep
For two cells, change the 1 to a 2... I think you get that part
I currently have first col set to 8, other set to 4
to offset it, put an empty cell between, use the offsets like you were reading about
<div class="col-xs-1"></div>
<div class="col-xs-1 col-xs-offset-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1 col-xs-offset-1"></div>
<div class="col-xs-1"></div>
That would be 3 cells with about 1 cell worth of margin between the first and second cells
ok that's where i was confused i thought offset had to be the same as # of columns like in the example
The total number still has to add up to 12
Or, I should say, it can't be greater than 12
Cells fill in from left to right in each row
ok thank you, I will try that
The best way, for me anyway, to learn the grid was to play around with it. Start with something like this pen: http://s.codepen.io/TylerMoeller/pen/VPgOob
And change the numbers around to see what happens - as long as you don't go over 12
And change the numbers around to see what happens - as long as you don't go over 12
Awesome, I will take a look.
When you're feeling more adventurous, this pen has a bunch of different examples of what you can do with the grid: http://s.codepen.io/TylerMoeller/pen/qNrbok?editors=1000
Resize your browser to see what happens with the different xs, sm, md columns
Hey guys. I'm having a little trouble with my Tic-Tac-Toe project. After I clear the board, the browser freezes (for 10 seconds, then you have to disable the pen) if I try to put a symbol on the new empty one. Can anyone help? http://codepen.io/Freaklancer/pen/xgMbPm
What would be the correct way to write this click event
$("#quoteBtn").click(function() {
$('#quoteText').html(parsed_data.quote);
$('#authorText').html("- " + parsed_data.author);
});
yeah it froze my tab too
ello ...any1 knows angular 1.x ?
have problems with "deep linking" (or whatever its called)
using ngRoute.. when navigate ie /product/details/123 it shows fine on client
but if try to bookmark/reload-refresh browser it breaks (cuz that route dont exist on server)
using html5mode (so no hash-bang links)
have problems with "deep linking" (or whatever its called)
using ngRoute.. when navigate ie /product/details/123 it shows fine on client
but if try to bookmark/reload-refresh browser it breaks (cuz that route dont exist on server)
using html5mode (so no hash-bang links)
@FreakishLancer I want to help, but would need to study your code for a bit. Can you add more code comments to help walk through everything you're doing?
Feeling lazy atm :)
@charlesdarkwind Your click code is fine, but make sure
parsed_data is in scope
i need some css help in my pen, i can't figure out how to center the text within my table http://codepen.io/eweiss17/pen/EyqBBG
@TylerMoeller
var parsed_data = $.parseJSON(data); //parse the data so its usable
$("#quoteBtn").click(function() {
$('#quoteText').html(parsed_data.quote);
$('#authorText').html("- " + parsed_data.author);
});
its right over it
@charlesdarkwind What do you get in your console when you do
console.log(parsed_data.quote)
@TylerMoeller Not sure how to best explain. I will try though. I made a function
clearBoard() which seems to set everything to the original state upon loading the game (currently when the spotsTaken are 9), but after I call it, nothing is able to be drawn on the board anymore.
@FreakishLancer pretty sure that's the culprit
while ($(randomCell).prop("hasSign") !== undefined) {
Hi All
@eweiss17 Could you add a class to your td element and use CSS to center your text?
have a question regarding javascript promises..
@taltmann42 Can you explain why? It seems that that shouldn't be a problem since when I clear the board I set all cells'
hasSign property to undefined.
@TylerMoeller aah I got it to work but its always showing to first quote it gets instead of returning a random one from the api
Please refer this question.. http://stackoverflow.com/questions/42234111/split-divs-by-3-after-getjson-function-success-and-appending-to-body
@charlesdarkwind Yeah, it seems like your code should display the quote text. Does it also need to call your getJSON or ajax function though to get a new quote or do you have a different button for that?
@FreakishLancer currently debugging, I'll let you know when I find something
@TylerMoeller i was trying to use align-text: center; and vertical-align: middle, but it doesn't help. I believe the image is messing with it.
@eweiss17 This works for me:
Line 48 add the class
In your CSS:
Line 48 add the class
centered to your td element: <td class="active centered">In your CSS:
.centered {
text-align: center;
}
@TylerMoeller I think I need to change the order of my code or add a function make a new request on click instead of showing the same value of the same request
@FreakishLancer i have a guess... that's a tough one, i think jQuery is looking internally, if the second argument is
undefined if it is, do nothing, otherwise set it to that value
Do that for all your <td> elements @eweiss17 (offline/online users)
@TylerMoeller I don't see it being changed, it looks the same
@taltmann42 I just did some more console logging. I don't know if it's related, but when I console log the property of the cell even after trying to set it to undefined, I get
true.
So it seems I need to find a way to set the property to undefined properly because the syntax I'm using may be wrong.
yep that's what I meant
@eweiss17 These look centered to me: http://codepen.io/TylerMoeller/pen/wgNLdR?editors=0110
Or do you want both the text AND the image centered? maybe I'm misunderstanding
your syntax is fine, but jquery has to distinguish between the prop method to get a prop and to set a prop and I guess they did something like
if(prop2 === undefined) {
//get property
}else{
//set property
}
Your question was about centering the text inside your table from above
@FreakishLancer so I guess you could try using
false instead of undefined
@TylerMoeller yeah , i was able to do that previously, i do want it to be on the left side
i want it vertically centered. Does that make sense? you see how the image is in the middle perfectly, but the text is more to the top
@taltmann42 I fixed my problem! So instead of undefined, I just changed the
undefined check to === true and set the values when cleraing the board to false.
Well, a table is really for data, not for images and text. You can certainly make it work that way, but I'd recommend using a different approach if you're up for it
@FreakishLancer yep here it is https://github.com/jquery/jquery/blob/master/src/attributes/prop.js
if ( value !== undefined ) {
@taltmann42 Thanks.
freakishlancer sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 509 | @taltmann42 |http://www.freecodecamp.com/taltmann42
@FreakishLancer right otherwise jquery thinks there is no second argument defined.. which.. well.. it actually isn't as you set it to undefined :P
:O
any slight tips on the roman numerals task, i've tried just struggling when it comes to returning a number other then the generic amounts like 1, 5, 10 etc... thanks in advance
I guess a cheesy solution would just make the text as big as the image
A better way would be to separate the text and the image in different elements. You have text next to a floating image right now.
I think you really just need to not use a <table> for your display :p
it looks way worse if i switch that off
plus i like the way it looks right now
Right, you'd have to try a completely different approach. Design the HTML and CSS in a separate pen first, and then incorporate into your twitch app. With .html() it's just a matter of copying/pasting your updated html
Everything you're doing is dynamically generated based on the user list
When you don't use a table, you can make it as simple as:
<div class="user-row">
<span class="status-text">Some twitch user's status goes here</span>
<img src="https://placehold.it/300">
</div>With this CSS:
img {
vertical-align: middle;
border-radius: 50%;
max-width: 100px;
}
Hi @TylerMoeller I went into the pen you provided and set it up exactly how i wanted it, but for some reason not working when i try to use on my pen, do you think you could take a look? https://codepen.io/runnerbill75/full/WRYzoQ/
@TylerMoeller alright thanks for the help, i'm going to have to re evaluate my life decisions on tables
eweiss17 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1488 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
lol :) @eweiss17
@runnerbill75 Your codepen is using a pre-release alpha version of bootstrap 4. Replace your CSS settings link to bootstrap with: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
The grid offsetting documents you were reading earlier do not apply to bootstrap 4
oh ok
thanks
Ok I replaced bootsrap link with 3.3.7 version, for some reason columns are gone now..
Sorry, I'm a bit confused at the moment.
@runnerbill75 The columns look good to me - you are using "md" , so when the screen goes narrower than 992px the columns collapse into one
That's what the xs, sm, md, lg refers to: http://getbootstrap.com/css/#grid-options
so should i use different size?
That's just a matter of design preference
oh ok
It depends on how you want your page to look on smaller devices
changed from m to xs, looks great!! Thanks again @TylerMoeller !
runnerbill75 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1489 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Hi, anybody knows, why my function showOnline (at the end of JavaScrip part) does not work? http://codepen.io/radekjohn/pen/QdzVJa
is it because it is dealing with stuff created by Javscript?
@radekjohn I think you want to target
.offline instead of #offline and you can't call a subfunction of another function, so you'll need to move showOnline() outside of your document.ready function.
@TylerMoeller yes! thanks
radekjohn sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1490 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
hi i was wondering if someone could help me with a embed question
I am using an embed tag to link to a work i have done for my portfolio
but i also want it to have a link to that page, any ideas?
also the embed tag dosent seem to show up in the codepen
Hello All,
I just reached the "Create a Bootstrap Button" lesson and I am having trouble figuring out how to pass the lesson. I've tried nesting the button inside a <form> element. Also tried setting it up outside of a form element below the img element.
I just reached the "Create a Bootstrap Button" lesson and I am having trouble figuring out how to pass the lesson. I've tried nesting the button inside a <form> element. Also tried setting it up outside of a form element below the img element.
What am I doing wrong?
I've been coding it as such:
<label><input type="button" class="btn" name="like-button"> Like</label>
Anyone here familiar with the set() method in java?
js**
@johnnunns I don't think there is one unless you create one
es6
Yeah I'm struggling as to why it's not working in this probelm
return set
haha oops let me copy the right thing haha
function isIsogram(text) {
// add each char to a set
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
// note: a set drops dup values
// thus, to see if all the chars were unique,
// check length of text and the size of the set
var x =text.split("");
for(var i =0; i<x.length; i++){
var mySet = new Set();
if(!mySet.has(x[i])) {
set =mySet.add(x[i])
}
console.log(set)
}
}
isIsogram('olkskdjf')
Thats no function then @moigithub that would be a setter creatior
@johnnunns Ah big letter
S then this is a Set class -> https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Set
I'm logging 8 empty objects currently
oh sorry
my code hasn't been finished I just ran into a little road block here and wasnt sure if I was using Set() correctly
@johnnunns Thats because you log the variable
set to which you assigned the returnvalue of add: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add where there is no
The function add doesn't return anything.
You'd better do:
You'd better do:
var mySet = new Set();
if(!mySet.has(x[i])) {
mySet.add(x[i]);
}
console.log(mySet);var mySet = new Set();
if(!mySet.has(x[i])) {
mySet.add(x[i])
}
console.log(mySet)
}
oh you just typed that
I just did that and still logging the same thing though
8 empty objects
When I click the tweet button, I get the link to my codepen and not the tweet. Can someone help?
https://codepen.io/lclc68lclc/pen/EZLYae?editors=0010#0
https://codepen.io/lclc68lclc/pen/EZLYae?editors=0010#0
@johnnunns Did you clear your console and executed the code again?
I refreshed it now
still printing 8 empty {}
function isIsogram(text) {
// add each char to a set
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
// note: a set drops dup values
// thus, to see if all the chars were unique,
// check length of text and the size of the set
var x =text.split("");
for(var i =0; i<x.length; i++){
var mySet = new Set();
if(!mySet.has(x[i])) {
mySet.add(x[i])
}
console.log(mySet)
}
}
isIsogram('olkskdjf')
cuz u redeclaring ur mySet variable everytime the for loops
ok moved the new set() above the for loop
but i think.. it still shold hvae 1 item not 8 empty
still 8 empty
r u sure ??
where u testing ?? codepen ? or somethign
function isIsogram(text) {
// add each char to a set
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
// note: a set drops dup values
// thus, to see if all the chars were unique,
// check length of text and the size of the set
var x =text.split("");
var mySet = new Set();
for(var i =0; i<x.length; i++){
if(!mySet.has(x[i])) {
mySet.add(x[i])
}
console.log(mySet)
}
}
isIsogram('olkskdjf')
inside repl.it
click run button ? :P
haha
{}
{}
{}
{}
{}
{}
{}
{}
=> undefined
{}
{}
{}
{}
{}
{}
{}
=> undefined
share link
@MichaelScott50 <embed> will capture all your mouse clicks. You could place a link beneath it though.
it's a prep course you'd have to have login info for unfortunately :(
@Threat-Hunter I don't see a <button> element or a <form> element in your sample code
make sure u check on browser console.. not codepen console
An isogram is a word that has no repeating letters, consecutive or non-consecutive.
Write and test a function that determines whether a string is an isogram.
Notes:
* Assume your input is only letters.
* Assume the empty string is an isogram.
* Ignore case.
* Follow the pseudocode exactly!
Starter Code :
function isIsogram(text) {
// add each char to a set
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
// note: a set drops dup values
// thus, to see if all the chars were unique,
// check length of text and the size of the set
}
these are the instructions
is that code running for you elsewhere?
@johnnunns Well where do you run your code
on the repl.it site
@SkyCoder01
<form action="/like-cat-photo">
<label><input type="button" class="btn" name="like-button"> Like</label>
</form>
@johnnunns Yea they show it totally wrong in their console. Don't trust their output. Use the browsers dev console
@johnnunns Btw. you will want to put the set instantiation before the
for loop
@SkyCoder01 that was the full code I put in
@SkyCoder01 I think I see what you are saying now. So "button" is an actual element
@Threat-Hunter Yes, it was a slight hint ;)
yeah that's interesting it does run in my dev tools
well that's slightly a relief because I was really confused
@alpox instantiation means?
@johnnunns the creation of the set
and variable declaration
Means the
var mySet = new Set();
oh right yes I fixed that
yeah looks as though it's running fine
@SkyCoder01 you rock! thanks for the help
threat-hunter sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 198 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@TylerMoeller You answered someone else's question earlier by telling them codepen was running Bootstrap 4.0 and recommended that they backload to 3.3.7 instead. I just want to say thank you because you solved every single one of my headaches in the past 3 days!
thurstiantsui sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1491 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@johnnunns btw you dont have to convert text to an array there
no need for the split?
@lclc68lclc take a look at this link https://www.google.co.uk/url?sa=t&source=web&rct=j&url=/amp/ask.metafilter.com/275194/Creating-a-Twitter-button-that-tweets-dynamic-text/amp&ved=0ahUKEwigs7q6upDSAhVMKMAKHacNDw8QFghrMAg&usg=AFQjCNEk1Ppd_1LC2SCvpWjx41fU9YIXCg&sig2=NZeinFjTNnIi-j19ptCIww this helped me when I had the same problem
@johnnunns yup, just use the variable
text instead of x
@johnnunns since Set store UNIQUES values. u could omit the loop.. and use split :P
new Set('olkskdjf'.split(""))
you guys just threw 2 different opposite options at me! Too much! :)
@moigithub @johnnunns Actually
return new Set(text); in the function body would already be enough :D
@ThurstianTsui :) lots of people have had headaches from that. Glad I could help
didnt tested that one.. was going to
function isIsogram(text) {
// add each char to a set
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
// note: a set drops dup values
// thus, to see if all the chars were unique,
// check length of text and the size of the set
var mySet = new Set();
for(var i =0; i<text.length; i++){
if(!mySet.has(text[i])) {
mySet.add(text[i])
}
}
return mySet
console.log(mySet.length)
}
isIsogram('olksdddjf')
getting an error here
return exit the function
console.log wont be reached
console.log wont be reached
But i think the function was not yet finished @johnnunns @moigithub it seems that the task was to test if the text was an isogram... so probably more
return new Set(text).size === text.length;
right I was going to nest and if statement in my if statement
that's probably the long way but it's a way I understand
@johnnunns Yea its good to test that way first
There are always plenty of ways to solve a problem
Yeah I'm finding this to be very true @alpox
having a little trouble here though, I'll walk you through what I think is going on and maybe some hints to get me out of it if you guys don't mind @alpox @moigithub
function isIsogram(text) {
// add each char to a set
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
// note: a set drops dup values
// thus, to see if all the chars were unique,
// check length of text and the size of the set
var mySet = new Set();
for(var i =0; i<text.length; i++){
if(!mySet.has(text[i])) {
mySet.add(text[i])
if(mySet.length === text.length){
return text + "is an isogram"
}
}else{
return "not an isogram"
}
}
}
isIsogram('olksdjf')
u returning "too soon"
u should evaluate only after u add everything inside the set
u should evaluate only after u add everything inside the set
right it's not allowing the for loop to complete
yep
so inside that nested if statement should I create a variable equal to that?
nope.. put that outside the loop
@johnnunns just put the else with not an isogram out of the loop
i think u shoudl move the if/else out
(not only else)
(... but i dont know what a isogrm is n to lazy to check :P )
(not only else)
(... but i dont know what a isogrm is n to lazy to check :P )
isogram is a string with no repeated characters
so maybe the nested if shouldn't be nested it should be out
@moigithub @johnnunns Well it doesn't really matter much - moving both out is surely cleaner and takes less computation time but else than that it would clearly work when only taking out the else since it can be an isogram only when the lengths are the same which will be in only one case
function isIsogram(text) {
// add each char to a set
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
// note: a set drops dup values
// thus, to see if all the chars were unique,
// check length of text and the size of the set
var mySet = new Set();
for(var i =0; i<text.length; i++){
if(!mySet.has(text[i])) {
mySet.add(text[i])
}
}
if(mySet.length === text.length){
return text + "is an isogram"
}
}
isIsogram('olksdjf')
getting an undefined here
@johnnunns when a text is not an isogram, you don't return anything, and then it defaults to
undefined
olksdjf should be an isogram though
right.. :D give me a sec
so those lengths should be equal? I thought :)
@johnnunns
.length is no property of mySet which ends in undefined. Use .size for the set instead
sets dont have length property
mannnn. You think you've learned something haha
then just find out it doesn't apply
.size worked fine
is that exclusive to sets, or just objects in general? now I've forgotten if you can take the length of any object
objects usually don't have length unless you provide it with a length-key on your own
@johnnunns This applies only to set
gotcha, it even says in the direction check the length and SIZE
@johnnunns For arrays and strings its .length
just didn't catch that as a key word
@alpox @taltmann42 @moigithub thanks guys
johnnunns sends brownie points to @alpox and @taltmann42 and @moigithub :sparkles: :thumbsup: :sparkles:
:cookie: 512 | @taltmann42 |http://www.freecodecamp.com/taltmann42
:star2: 2694 | @moigithub |http://www.freecodecamp.com/moigithub
:cookie: 769 | @alpox |http://www.freecodecamp.com/alpox
you could also check if it's an isogram without a set, using
indexOf and lastIndexOf
i have no good memory to remember all the properties methods n whatever.. so most of times.. i open browser devtools... and test there
ie:
then when u write
(too lazy to check documentation)
ie:
a="";then when u write
a. it opens a list of methods/properties available for strings (cuz a="" on this example)(too lazy to check documentation)
autocomplete (or whatever its called) is nice :)
@moigithub intellisense - i usually use mdn anyway though since i don't trust the intellisenses for javascript :D they often tell you crap
I'm trying to figure out how to check for win solutions in Tic-Tac-Toe. Is this a good data structure?
const boardData = {
"cellTypes": {
0: "corner", 1: "edge", 2: "corner",
3: "edge", 4: "center", 5: "edge",
6: "corner", 7: "edge", 8: "corner"
},
"winCombos": {
0: ["corner", "edge", "corner"],
1: ["corner", "center", "corner"],
2: ["edge", "center", "edge"]
}
};Im trying to make a twitter button that opens with some text but its always filled with the link of my codepen :(
html:
<a class="tweet" href="https://twitter.com/share" data-text="" target="_blank"><button class="btn btn-primary">Tweet this!</button></a>jquery:
$('.tweet').attr('data-text', "Hi");feelsbadman
happy valentines everyone
@charlesdarkwind take a look at this https://www.google.co.uk/url?sa=t&source=web&rct=j&url=/amp/ask.metafilter.com/275194/Creating-a-Twitter-button-that-tweets-dynamic-text/amp&ved=0ahUKEwigs7q6upDSAhVMKMAKHacNDw8QFghrMAg&usg=AFQjCNEk1Ppd_1LC2SCvpWjx41fU9YIXCg&sig2=NZeinFjTNnIi-j19ptCIww it helped me sort out the same problem
@moi238 thanks for that, ill look into it
charlesdarkwind sends brownie points to @moi238 :sparkles: :thumbsup: :sparkles:
:cookie: 283 | @moi238 |http://www.freecodecamp.com/moi238
Could someone please guide me as to how to use imgs in codepen.io?
Hey guys, need some help with the quote generator. It seems like there are some issues with my buttons. They’re not clickable, and the twitter button should work (just open another window but it doesn’t work). Also the css pointer and hover properties doesn’t work. Thank you in advance for the help, greatly appreciate it :smile: (it’s just a trial, I know it looks like the example) http://codepen.io/0livier1O1/full/QdoWNo/
hey
hey guys having a rough day of coding today need some more help
working with skeleton codes
function findMaxRepeatCountInWord(word) {
return word.split("")// Break up individual words into individual letters.
.reduce(function(result, letter){
var regexp = new RegExp(letter, 'g')
result[letter] = word.match(regexp).length
return result;
}, [])
return word;
// Count the instances of each letter
// Iterate all the counts and find the highest
// Return this word's max repeat count
}
im working rn on twitch tv json api project. do you know how ONLY offline users can appear on a screen after user press "Offline" button? code is here, help me pleaseee http://codepen.io/Yaaqov/pen/LxXKrg
yikes I keep posting my question on here and deleting it because by typing it out I figured out the answer :) haha
good for you
can anyone give me a hand with my last two intermediate algorithm challneges
https://www.freecodecamp.com/challenges/make-object-properties-private
what does setGear do and what does getGear mean?
what does setGear do and what does getGear mean?
Hi, can you please help me here. I have problems with my weather app. I can't get the weather from the json
http://codepen.io/ilonavardanyan/pen/oBPxLq?editors=1011
http://codepen.io/ilonavardanyan/pen/oBPxLq?editors=1011
@GoingAllTheWayUp setGear is a function to change the gear, getGear is a function to return the current gear
I I was thinking that, but the examples used this arggument called change. I am not sure what/how this setGear is supposed to be "set" so I did
this.setGear = function () {
gear++;
};
this.getGear = function () {
return gear;
};
my whole code ```
var Bike = function() {
// Only change code below this line.
var gear;
this.setGear = function () {
gear++;
};
this.getGear = function () {
return gear;
};
};
var myBike = new Bike();
```
I am missing a key element i think
how is it setting the gear?
what does that mean?
in the example they pass an argument through a public method
var Bike = function() {
// Only change code below this line.
var gear = 0;
this.setGear = function (change) {
gear += change;
};
this.getGear = function () {
return gear;
};
};
var myBike = new Bike();
I don't understand how you pass a value to change in that public method, do i place it in Bike();
can you post which one is your code
and remember ``` above and below
@GoingAllTheWayUp
just post whatever you have right now
hey guys i have some css problems and wondering if someone could help!
i've done basically all the JS
@ilonchik the API-call returns this error:
Invalid API key. Please see http://openweathermap.org/faq#error401 for more info.
but im trying to make a spotify search app
here's my code http://codepen.io/JackEdwardLyons/pen/JEzjMJ?editors=0100
i would like the boxes to line up in rows of three, if possible
@taltmann42 thank you
ilonchik sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 517 | @taltmann42 |http://www.freecodecamp.com/taltmann42
@JackEdwardLyons you can give the boxes a width of
33.3333% and then use either float:lefton the boxes or display:flex; flex-wrap:wrap on the container
var Bike = function() {
// Only change code below this line.
var gear = 0;
this.setGear = function (shift) {
gear += shift;
};
this.getGear = function () {
return gear;
};
};
var myBike = new Bike();
4 of 6 tasks ok
myBike.getGear() should return 1 after calling myBike.setGear(1). fails
@GoingAllTheWayUp you don't want to add the gear, you want to set/assign the gear
When i do == instead I only pass 3 tasks
@GoingAllTheWayUp because that's a comparison operator, not assignment
OK, i see
@taltmann42 thanks
goingallthewayup sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 518 | @taltmann42 |http://www.freecodecamp.com/taltmann42
I get confused with = == and ===
@GoingAllTheWayUp
= assigns the thing to the right of it to the thing to the left of it (a=5 assigns 5 to a). == and === check if the left value and the right value is the same. Difference is, that == doesn't check the type, so 5=="5" is true, and 5==="5" is false because one is of type number and one of type string
@GoingAllTheWayUp do you have it adam? sorry I didn't respond didn't get a tag from you so I've b een working on something else
ok cool. thank you, @johnnunns I am getting a better picture now
goingallthewayup sends brownie points to @johnnunns :sparkles: :thumbsup: :sparkles:
:cookie: 183 | @johnnunns |http://www.freecodecamp.com/johnnunns
yeah i think just understanding the += would only add to the gear. so if you have a 6 gear bike, and you ran your previous function, let's say, setGear(4), it would add 4 to the gear already set at 6
which would be impossible @GoingAllTheWayUp
that's if the gear was set at 6 before*
I did not understan the bike concept I understood the car's speed in the example but this bike gears went over myhead
Can someone help me with this?
$.ajax({
type: "GET",
url: "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Jimi_Hendrix&callback=?",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (pagina){
var trovato = pagina.query.pages;
console.log(pagina)
$.each(trovato, function(i,j){
$("#risultati").append("<li>" + trovato.pageid+ "</li>")
})
},
error: function (errorMessage) {
}
});
I got 10 undefined from this ajax call
How to add picture in codepen.io?
Can you please tell me
?
@haseebuchiha what kind of?
function findMaxRepeatCountInWord(word) {
var x = word.split("")// Break up individual words into individual letters.
.reduce(function(result, letter){
var regexp = new RegExp(letter, 'g')
result[letter]= word.match(regexp).length
return result;
}, {})
return x
// Count the instances of each letter
// Iterate all the counts and find the highest
// Return this word's max repeat count
}
So I have the counts of individual letters here, now I'm trying to iterate through them all and compare which letter repeats itself the most
I wanted to use a for loop, but trying to print x[0] doesn't work, it'd have to be like x."whatever letter in the word" to produce the count
so how do I compare that value to the others?
how does the build a tribute page challenge work
<vid></vid>
*i
sorry guys new guy how do I use the markdowns??
https://www.freecodecamp.com/challenges/condense-arrays-with-reduce
Why have a 0 after the function inside the reduce method?
Why have a 0 after the function inside the reduce method?
var singleVal = array.reduce(function(previousVal, currentVal) {
return previousVal - currentVal;
}, 0);
@GoingAllTheWayUp It's the starting 'prveiousVal' as it goes through the array
var array = [5, 10, 20];
var singleVal = array.reduce(function(previousVal, currentVal) {
console.log('prev: ', previousVal);
console.log('curr: ', currentVal);
return previousVal - currentVal;
}, 0);
console.log(singleVal);
Try this and change the
0 to see what happens:
its the offset.
@SkyCoder01 thanks
:cookie: 199 | @skycoder01 |http://www.freecodecamp.com/skycoder01
goingallthewayup sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
No, problem. The
initialValue from these docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
callback functions are predifined or strict to their respective method?like myArray.sort(),reduce(), etc.
Is the callback specific,as in, are the formulas used characteristics of the method?
@GoingAllTheWayUp The 0 is the
initialValue. The value to use as the first argument to the first call of the callback.
@GoingAllTheWayUp Not sure what you mean by "predefined or strict to their respective method"...
I do see that, @RationalCoding . IM talkingthe formula in the callback function like in return here
var singleVal = array.reduce(function(previousVal, currentVal) {
return previousVal - currentVal;
}, 0);
Yes, what about the callback?
Some methods have callbacks and some don't. They take different things as parameters too, if that's what you mean.
The only way to know what arguments a method takes is to look at the docs for that method.
Why does return not just return the final value why do you have to do the formula with it?
Like why even have to type the function out? seems redundent.
im just not sure how it all works, and im just think out loud
You have to type it out to tell it how to reduce the array
I have another question.. then
You might see it more concise like:
var singleVal = array.reduce((a,b) => {return a - b;}, 0);
is there another way to reduce or sort etc.? like verbose way?
is this method a pre configured computaion like a short cut
Yeah, it's called a higher order function. You could use a for() loop too
Check out FOLD https://en.wikipedia.org/wiki/Fold_(higher-order_function)
It could this change in the future ? how we use methods I mean ? @SkyCoder01
I don't know, just started learning this all a month ago :p
nice! good job!
Thanks :) still a lot to learn though
me too, togeather our powers combined
about how many of these lessons do you try and complete at any given time or day or week?
I've been trying to do at least one a day while working on front-end projects