Yea you don't need a back end when you're first learning Angular
Only thing is anytime you refresh everything resets
@SupaSaiyan you can build a SPA angularJS website using a json.db file that will host the dynamic content and everything else is static content
its what I did when I learned angular a while ago
Hello, having a really simple issue here. Why is my visible h2 tag untargetable and my other h2 tag behind the background image? Code reference here: https://jsfiddle.net/dzb2zf7b/1/
The first h2 is hidden because of the background image of the div I think
If you add some space on the top of the main-wowbg you will see the first h2 content
@SteveMorenoC What do you mean by untargetable
@X140hu4 You can't highlight it like regular text. I did add some margin-top and the first h2 tag did appear since it is hidden behind the background image of the first div yeah.
The canvas is on top of it i guess
@SteveMorenoC Make your .main-wowbg have
z-index: -1
nice :)
I was trying to put a z-index: 1 on the h2 haha
there are still two hello world's on top of each other though :)
gotta give them separate class names I think
@piteto Awesome, that solves the problem for the most part. Thank you!
stevemorenoc sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 200 | @piteto |http://www.freecodecamp.com/piteto
h2 {
color: white
}
.main-wowbg h2 {
margin-top: 200px;
position: absolute;
z-index: 3;
}
Glad I could help @SteveMorenoC
hi guys a little help!
Hey, anyone experienced with Sass?
@linkin-park with what?
with cooking
ready
my problem with Sass is that I can't see why this code is not changing the text size:
<style>
@for $j from 1 to 6 {
.text-#{$j} {font-size:10px * $j;}
}
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
Why do you have a dash @h1tag?
I think you are missing
.text: for !default
@for $i from 1 to 6
.text-#{$i}
font-size: 60px * $i
Yeah, brackets are not needed in sass
I don't know sass at all though - just made it work from the crash course here: http://thesassway.com/intermediate/if-for-each-while
@jimtryon it's for this challenge
@piteto same one I was looking at
:)
Yeah, brackets are not needed in sass
this is how they did it in the challenge example, with brackets
I think they are optional though, @h1tag
That is taken from the SASS docs
wonder if that's for an older version, the example code in that challenge doesn't compile in codepen
I was curious about that
the syntax reminds me of batch files
for /f "tokens=1-2*" %I in ('dir /a /s /b') do echo %~nxI
it's still not working
It works in codepen: https://s.codepen.io/anon/pen/XeVJjZ?editors=1100
(I know, not being helpful :p)
no, you are
it's a problem with the challenge maybe, since it's still in beta
or using an old syntax
Yeah... I can't seem to get the challenge right either despite all their examples
must be a beta bug
Thank you @jimtryon and @piteto :)
h1tag sends brownie points to @jimtryon and @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 202 | @piteto |http://www.freecodecamp.com/piteto
:cookie: 463 | @jimtryon |http://www.freecodecamp.com/jimtryon
Hi Peeps. Question. What would be the simplest method for showing a video (MP4) then displaying content from a webpage and looping between the two?
I was thinking have the webpage content as the background then superimposing the video over while it plays, then hidden when complete for 2 minutes and loop. Thoughts?
does mixin means function ?
or macro
@horusofoz check setTimeout ans setInterval
yea, mixins are like functions for css
hmm
@h1tag Thanks
horusofoz sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 915 | @h1tag |http://www.freecodecamp.com/h1tag
In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet.
just like it sounds @linkin-park it's code that mixes in with other code - helps promote reusability
its macro
macro is a function
a piece of reusable code that would use mixins
I guess a macro could also be a program - or any form of automation
macros are nice :)
hey i am getting this error in visual studio code
ERROR in polyfills.4abe46a7a6c287fdf3f2.js from UglifyJs
[0] Unexpected token: name (urlParts) [(webpack)-dev-server/client?http:/localhost:5000:24,0][polyfills.4abe46a7a6c287fdf3f2.js:2954,4]
[0] Unexpected token: name (urlParts) [(webpack)-dev-server/client?http:/localhost:5000:24,0][polyfills.4abe46a7a6c287fdf3f2.js:2954,4]
how to solve this?
Please don’t read this post if you are less than 236 on the map or the “Get Set for our Algorithm Challenges” part as I’m posting an answer to one of the problems.
Please can you guys check this code and tell me if it’s the most effiecient way to fix the problem? I think I can probably improve on the code. Thanks in advance!
``` function titleCase(str) {
var strArr = str.split(" ");
var capF = "";
var newCap = "";
var capWord = "";
var titleCase = [];
for (var i = 0;i < strArr.length; i++) {
strArr[i] = strArr[i].toLowerCase();
capF = strArr[i].charAt(0);
newCap = capF.toUpperCase();
capWord = strArr[i].replace(strArr[i][0], newCap);
titleCase.push(capWord);
}
var sanitisedTitleCase = titleCase.join(' ');
return sanitisedTitleCase;
}
titleCase("I'm a little tea pot");
```
hi @grahamsnowdon what do you mean by less than 236?
The score?
@linkin-park It's spoiler alert :)
@linkin-park It's spoiler alert :) Yes I should have said that! :)
well im less than 236 thanks for the
code @grahamsnowdon
linkin-park sends brownie points to @grahamsnowdon :sparkles: :thumbsup: :sparkles:
:cookie: 238 | @grahamsnowdon |http://www.freecodecamp.com/grahamsnowdon
@grahamsnowdon Algorithm is ok, but you have a lot of unnecessary variables.
@grahamsnowdon I'm sure there are more efficient ways to do it
@grahamsnowdon
for (var i = 0;i < strArr.length; i++) {
strArr[i] = strArr[i].toLowerCase();
capF = strArr[i].charAt(0);
newCap = capF.toUpperCase();
capWord = strArr[i].replace(strArr[i][0], newCap);
titleCase.push(capWord);
}can be done in 1 line
for (var i = 0;i < strArr.length; i++) {
titleCase.push( strArr[i].charAt(0) + strArr[i].substr(1));
}If you lowercase the string before split
linkin-park @linkin-park pats @korzo
@korzo thanks that makes much more sense. I think I’m still writing quite long winded code and need to practise making it more effecient before moving ontonext challenge. @linkin-park Sorry about that, maybe try to forget the code before you hit that challenge and make sure you don’t look at it. There’s always spoilers in the “Get a hint” section if you really wanted to cheat yourself.
grahamsnowdon sends brownie points to @korzo and @linkin-park :sparkles: :thumbsup: :sparkles:
:cookie: 38 | @linkin-park |http://www.freecodecamp.com/linkin-park
:cookie: 585 | @korzo |http://www.freecodecamp.com/korzo
@grahamsnowdon
So it can be reduced to
So it can be reduced to
function titleCase(str) {
var strArr = str.toLowerCase().split(" ");
var titleCase = [];
for (var i = 0; i < strArr.length; i++) {
titleCase.push(strArr[i].charAt(0).toUpperCase() + strArr[i].substr(1));
}
return titleCase.join(" ");
}
@grahamsnowdon dont worry ill not do the challenge :)
@grahamsnowdon I wouldn't worry about writting long code for now
you will learn as you go along
you will learn as you go along
@longnt80 Thank you!
grahamsnowdon sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 589 | @longnt80 |http://www.freecodecamp.com/longnt80
@korzo here's my Recipe Box (not finished yet): https://longnt80.github.io/recipe-box/
right now, the ingredient won't wrap to new line if it's too long
what would you suggest to make it wrap? Not using inputs?
right now, the ingredient won't wrap to new line if it's too long
what would you suggest to make it wrap? Not using inputs?
@grahamsnowdon , thanks for the brownie points gonna be rich :D
linkin-park sends brownie points to @grahamsnowdon :sparkles: :thumbsup: :sparkles:
api offline
vello_atom
@longnt80 Input can't be multiline, so I would suggest expandable textarea.
Start with 1 line and expand on enter or char limit
Start with 1 line and expand on enter or char limit
@longnt80 or maybe divs with contenteditable, but you will need to transform it before save
Hi all. Was wondering if I might get some help. Trying to pull a range of numbers from between two arguments given, and make them so they are in descending order. This is my code:
function smallestCommons(arr) {
var mult = [];
for (var x = arr[0]; x <= arr[1]; x++) {
mult.push(x);
}
mult.sort(function(a,b) {
return b-a;
});
return mult;
}
smallestCommons([2,6]);This works fine, and gives me [6,5,4,3,2].
If I use [6,2] though, or any argument where the first argument is larger than the second, it breaks and returns nothing. Any ideas?
you need to see if the - oporator (function) read from ltr or rtl
operator*
@EpicTriffid javascript doesnt always read your code from left to right
depending on the operator it sometimes read in revers i dont say that this is the problam here but you need to check this out
Okily doke
@EpicTriffid here is a link to the table https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
@EpicTriffid any way your function problam is when u give 6 as first argument the sort function excecuting b-a wich means 2 - 6 and it gets -4 and so with the other numbers so when all numbers are negetive no value is returned
can someone help me with the local weather app? I'm stuck with the json data.
@auricless - sure, what’s up?
it seem my $.getJSON function doesnt work, do you have time to check my codepen?
@auricless - sure, please post a link to it...
here @khaduch
@auricless - the problem is that you are checking the return from the
getWeatherAPI function, or rather trying to use the return value as the JSON data. That is not the correct place to read the data. Your function sends out a request in the $.getJSON call, but it takes time to get the results back. You have to try to use the data within the callback function for the $.getJSON call - that is the place where you know that it has returned.
I see. Can I use a variable with a larger scope and assign the jsondata to it so I can use the data elsewhere?
@auricless - for starters, if you change your getJSON call to look like this, you'll see some results
$.getJSON(data, function(json){
console.log(json);
var jsonData = {
weather : json['weather'][0]['main'],
iconSrc : json['weather'][0]['icon'],
temp : json['main']['temp']
}
$("#temp").html(jsonData.weather);
return jsonData;
});you can see the raw data using the console.log, and you have to use string values in your bracket notation access of the json object. Your code to set the temp property in your object is not correct, so I commented that out. EDIT: I updated the setting for temp
Hi guys, i am looking for a way to make form multiple if statment a switch - i need 3 values to be present in a given arr here is my if but i have no idea how to make it into switch
if (arr.indexOf("I") >= 0 && arr.indexOf("II") >= 0 && arr.indexOf("III") >= 0 ||
arr.indexOf("IV") >= 0 && arr.indexOf("V") >= 0 && arr.indexOf("VI") >= 0 ||
arr.indexOf("VII") >= 0 && arr.indexOf("VIII") >= 0 && arr.indexOf("IX") >= 0 ||
arr.indexOf("I") >= 0 && arr.indexOf("IV") >= 0 && arr.indexOf("VII") >= 0 ||
arr.indexOf("II") >= 0 && arr.indexOf("V") >= 0 && arr.indexOf("VIII") >= 0 ||
arr.indexOf("III") >= 0 && arr.indexOf("VI") >= 0 && arr.indexOf("IV") >= 0 ||
arr.indexOf("I") >= 0 && arr.indexOf("V") >= 0 && arr.indexOf("IX") >= 0 ||
arr.indexOf("VII") >= 0 && arr.indexOf("V") >= 0 && arr.indexOf("III") >= 0)
okay gonna try it out now @khaduch .
@auricless - change your
temp reference to temp : json['main']['temp'] You can also use dot notation to access those values - temp: json.main.temp would work. Either way is fine - just make sure that you are using string values in the bracket notation.
@krzysztofbogusz91 - what are you trying to parse with this code? What does the data that you are processing look like, there might be an easier way to do what you're trying to do.
It works! But I don't like how my code is written, I thought it's not really readable. I want to refactor it so it is divided into smaller, readable part. thanks @khaduch
auricless sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3340 | @khaduch |http://www.freecodecamp.com/khaduch
@auricless - there is a new concept in ES6 called "promises", but I don't have enough familiarity with it since I haven't used it. It is supposed to help untangle the process of getting async data. You can try to decipher it, here is the documentation on MDN. A detailed book chapter on it is here.
This topic looks intimidating. But thanks anyway! :D
@khaduch well i`m looking for maching arguments in an arr and have multiple options to chose from - im building a tic tac to game and looking for winning positons...
Hi guys, I am cloning the resume for the p1xt CS curriculum. I have trouble making the vertical box shadow https://creativemarket.com/ikonome/686585-Material-Resume-Blue/screenshots/#screenshot3
any suggestions?
Hey, anybody got a website I can use to add drum sounds to my project (for the drum machine project)?
@h1tag - I haven't done that - just googled for a couple links and found this one - they have links to a bunch of sites. Maybe you'll find one?
@khaduch I also found some websites that host free sounds/music, but when I try to copy the download link for the sound file to use as source link for my audio element, it doesn't work
your awesome @h1tag
@linkin-park ty but why?
h1tag sends brownie points to @linkin-park :sparkles: :thumbsup: :sparkles:
:cookie: 39 | @linkin-park |http://www.freecodecamp.com/linkin-park
thanks @h1tag
linkin-park sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 916 | @h1tag |http://www.freecodecamp.com/h1tag
thanks @h1tag
linkin-park sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
api offline
thanks @h1tag
linkin-park sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
api offline
thanks @h1tag
linkin-park sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
api offline
thanks @h1tag
linkin-park sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
api offline
lol, wt
front end state is different from server side state :P
@h1tag - this article looks like it would be interesting? Maybe not too simple, though...
@krzysztofbogusz91 - I think that I would make an array of the data combinations and then some code to just run through that to check for the combinations until you find a matching one?
@khaduch the idea looks awesome, I'll be sure to check it out. Thank you
h1tag sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3341 | @khaduch |http://www.freecodecamp.com/khaduch
Can somebody help me with my css?
My problem is that the large button down right destroys my layout.
@Gh05d try to put it in the bottom div
@kirbyedy It worked. Thx
gh05d sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 2125 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Hi, I was working through this recursion exercise:
// Eloquent solution:
function isEven(n) {
if (n == 0)
return true;
else if (n == 1)
return false;
else if (n < 0)
return isEven(-n);
else
return isEven(n - 2);
}
console.log(isEven(50));
// → true
console.log(isEven(75));
// → false
console.log(isEven(-1));
// → falseWhy does n in the 50 or 75 calls get evaluated or coerced to equaling 0 or 1?
@Feldbot There's definelty faster ways to do it, but I like the recursive implementation of this. If you keep subtracting 2 from a number and it eventually equals 0, then it must be even. If it equals 1 then it must be odd.
@jcolborn-dropdeadgames But before the recursive case why would say 50 == 0? I don't understand that.
@Feldbot It does not. It falls through that and then goes to the next else if. Since it doesn't match 1 it falls through that one, too. Finally it falls thorugh the < 0 since it is greater than 0. So, it then gets to the isEven(n-2). This passes the isEvent function 50 -2 = 48. it will continue this until it gets to 2-2=0
@Feldbot Also, because it uses a return event to pass the new isEven function, it doesn't create a new process each time it runs it. It ends the old process with return and then starts the new isEven function with the new value.
@jcolborn-dropdeadgames AHA! That now makes sense. I thought there was something about coercion that I was missing :-) And in the n < 0 case, does the -n just turn whatever negative number passed in into a positive number and it continues through recursively from there?
@Feldbot That's right!
@jcolborn-dropdeadgames Right on! Thanks Jacob. I really appreciate the help. Spent quite awhile last night googling but you can probably imagine how that was a dead end.
@jcolborn-dropdeadgames Thanks Jacob (gotta love the brownie points)
feldbot sends brownie points to @jcolborn-dropdeadgames :sparkles: :thumbsup: :sparkles:
:cookie: 220 | @jcolborn-dropdeadgames |http://www.freecodecamp.com/jcolborn-dropdeadgames
@Feldbot No problem. Glad to help. It's pretty difficult for me to google individual ideas or parts of a script. What I prefer to do is get an idea of what's going on then play around with the script on CodePen or w3schools TryItYourself.
@jcolborn-dropdeadgames I hear you, I am trying to do the same as much as possible, I just couldn't see the forest for the trees on this one.
@jcolborn-dropdeadgames On that note, this is an Eloquent JavaScript exercise. It's pretty neat, they have a really slick console editor built inline onto the site. I hadn't seen anything quite like that. I wish everyone did that with code examples!
Anyone know why my line break isn't showing up for the tooltip? https://codepen.io/kbaig/pen/rGYYrm?editors=0110
Found on line 111. Can see the tooltip by hovering on data
@Feldbot That's super nice. I'm bookmarking them for future reading. Thanks for the tip!
jcolborn-dropdeadgames sends brownie points to @feldbot :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @feldbot |http://www.freecodecamp.com/feldbot
@kbaig How that is constructed is beyond me, but this post seemed like might help.
@Feldbot Looks like using the html method instead the text method is indeed the only way to do it. Thanks for taking a look
kbaig sends brownie points to @feldbot :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @feldbot |http://www.freecodecamp.com/feldbot
@kbaig Glad that helped! Looks like a fun project, D3 is pretty awesome.
@Feldbot Just the first D3 project on fCC. Looking forward to the next few ones, though I have no idea how I would implement them
@kbaig Pretty much any data set can be made easier to understand with a good visualization.
@Feldbot :smile:
Here is a crazy question! I have been really focusing on coding since the spring. I get and understand for the most part HTML and CSS. I am having difficulty understanding JavaScript. Is it just me or is there something I am missing about JavaScript? I have been doing freecodecamp first. Now I am reading So You Think You Know JS. I just do not seem to know how to really implement JavaScript. Any Comments?
that's a pretty big question @fvdave2017
anything specific you're struggling with?
something you could do is take a look a look source code of some pages
see how other people use it
Well @moT01 I am having difficult with the use of JavaScript as an enhancement for websites. I am also having difficult in creating a viable website using JavaScript. I also am using codepen to work with some of the JavaScript examples in the So You Think You Know JS book but they do not seem to work. I do not understand why.
is it plain javascript?
yes
or are you using a library
well I am using plain JavaScript and then working with the promise ideas that they bring out in the book.
jquery is easier to understand and might be a better place to start if you're looking for interaction with your html and css
<script><script>
im trying to find a project of mine that's pretty easy to understand
OK.
@fvdave2017 book always help but now adays video trainings are more awesome , so trainings like lynda , pluralsight and udemy
well, i dunno if this will help https://s.codepen.io/moT01/pen/egOKqO?editors=0110 but you can take a look at my tic tac toe project if you want
I know one way to get 3 months pluralsight account for free
Also I have do some of the project to date on freecodecamp. I have received no feed back. I am wondering is I set up codepen and grithub incorrectly so no one else see the projects?
So far now pluralsight has one of best JS learning guides hope it may help
Thank you @moT01 for sharing your project. I will take a look at it.
fvdave2017 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 870 | @mot01 |http://www.freecodecamp.com/mot01
@fvdave2017 i can explain some things if you want
ok. Let me look at your project and I will send you some questions.
there's a lot goin on there that you probly wont get, but if you look at lines 7-11 - that's all jquery
since you know html and css, you should sort of be able to get what's going on there
ok thanks @moT01
fvdave2017 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
basically just targeting an html element and changing some properties
Ok @moT01 , is it better to implement html and css in JavaScript or to implement them in their own html and css areas?
for now, i would say in their own areas
ok then you are just calling the html and css in the JavaScript?
that's going to be project specific, some times there might just be one element or even none and everything is done in js. but overall and especially for now i would keep them separated
im not sure what you mean by calling, but yes
Sorry, I see that you have called the .btn that is in css in the JavaScript. Am i correct in my understanding?
yup, just like css
.btn = anything with that class
and then there's the .css(...) which changes the css property
of all .btn
So you create the classes in css as well Ids but you call them in JavaScript from the CSS area? That is correct?
If you create them in CSS then why call them in the JavaScript? Are they not just implemented from the CSS area?
you give the elements classes and/or id's in the html, use css target those classes/id's and style things, and javascript to target and change things
@fvdave2017 I'm struggling with learning JavaScript too. It is very difficult and takes a lot of time to get familiar with the concepts. You'll hear a lot of people say "just stick with it" which I think it true, although that is frustrating advice for beginners. I think the best thing to do is try not to get overly frustrated, and keep trying different approaches. Keep learning from the ones that work. Chatting with people here is a fantastic approach when you get stuck. Right now I'm really liking Eloquent JavaScript as a free resource that is at a beginner/intermediate level. It is very well written to teach programming basics.
Ok, why would I want to change things when I already set them up as I want them to be on the webpage with html and css?
you can also give elements id's and classes in javascript, but to start i would do that in the html
for interaction
html and css is pretty static
interaction and logic, data handling
all sorts of things
I understand what you are saying @moT01 .
did you guys go through the FCC challenges?
I have gone through the challenges to date but still seem confused.
I just got my Front End Certificate about a month ago. I started on the backend stuff and that's a whole other ball game.
Thank you for your imput @Feldbot . I also have Eloquent JavaScript. I have looked at it some.
fvdave2017 sends brownie points to @feldbot :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @feldbot |http://www.freecodecamp.com/feldbot
I'm working through the challenges. I got stuck on the the Roman Numeral conversion and decided I need much more foundational knowledge before trying to solve intermediate algorithms.
here's some super simple jquery that should be pretty easy https://s.codepen.io/moT01/pen/QqaaLj
so what I am hearing is to focus more on JavaScript and JQuery. Is that the correct understanding @moT01 ?
if you have a decent grasp on html and css then yes
but that stuff is important too
practice, practice, take others code a play with it
I hear what you are saying @moT01 .
OK. You mean to find other code and change it to do different things?
yes
you can take my little example there
add an element and change the background color with the jquery
Thank you
instead of the alert there, you could do something else on the click - like change the text of one of the other elements
Can a person do that with the challenges on freecodecamp to?
i dont see why not
one last question, Do you know if anyone from freecodecamp goes in and checks what you have done on the challenges?
one other thing - if you didn't know, those sections in codepen represent different files if you were building a project that would be linked together (codepen does that for you) - i would recommend getting a good code editor and making the projects locally on your own computer
not on the challenges
the things required for the certificates are marked with a *
I understand.
and im not sure if they check those either, but they might
thank you @moT01 for your input. I will follow your suggestions.
fvdave2017 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
@fvdave2017 code editors have predictive stuff - so if you're working with an html file and type
d
the elements that start with d will show up
div whatever else there is
so it's great for learning sort of what's out there
this is good to know.
also, if you're using jquery - it's a javascript library - and needs to be imported if you want to use it in a project (or you can add it in the settings in codepen)
feel free to take a look at any of my projects https://github.com/mot01
thanks @moT01
fvdave2017 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
@khaduch thanks so much for your detailed answer from 27/09 lol.. i come here not so often as i'd love to, but i will try what you recommended and see how i get on. i thought for bootstrap 4 you didnt need screen-size designations?
hifede sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3342 | @khaduch |http://www.freecodecamp.com/khaduch
I'm trying to get data for the twitch api challenge and am getting a 404 error when I use the workaround url... https://wind-bow.gomix.me/twitch-api. is it down?, should I just sign up for the twitch api key if so are there any limits to the umber of calls? Any advice is appreciated
@jsd540 What URL are you using? That's the base URL you've put in your message, but it should point at one of the endpoints, like streams, channels, or users, and then have a streaming account after that
To answer your question though - it is not down at the moment and the normal twitch API appears to have a very generous limit on the number of calls.
@jsd540 404
my code is:
var twitchURL = "https://wind-bow.gomix.me/twitch-api";
twitchURL += '?' + $.param({
'users':'user',
'channels':'channel',
'streams':'stream'
});
$.ajax({
url:twitchURL,
dataType:'jsonp',
success: function(data){
console.log(data);
}
});
@jsd540 try building the URL as a string instead of using $.param - I believe that's for adding query string parameters, like
?value1=foo&value2=bar
so the string s/b - ?value1=user&val2=channel...
@jsd540 No, it should not be like that
I can give you the string if you want - but not sure if you want to keep researching it
@piteto being a web dev and self learning is key, 404 means the resource can't be found, so the url probably needs to be looked at, it's a start based on the error
if you could point me to the right doc page that should be ok
@jsd540 For the channels endpoint: https://dev.twitch.tv/docs/v5/reference/channels
There are examples of valid URLs there - Replace the Twitch API base URL https://api.twitch.tv/kraken with https://wind-bow.gomix.me/twitch-api
ahhh so its a file tree like structure in the url... Is that a correct interpretation?
@jsd540 Try it out in your browser - you can paste the URL directly in your browser's address bar. It will show you JSON in plain text if you have the correct URL
@piteto @GitHub-Henry Thanks a lot guys I think I can figure this out. You guys are awesome.
jsd540 sends brownie points to @piteto and @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 203 | @piteto |http://www.freecodecamp.com/piteto
:cookie: 370 | @github-henry |http://www.freecodecamp.com/github-henry
@jsd540 good luck
‘code'
“code"
hello guys
:bulb: to format code use backticks! ``` more info
Hello @HowdyHero by the way
@piteto hey :), I have a small problem with my code but I will bypass it. Im not really sure how to explain it anyway
@HowdyHero Okay :) if you need to find that backtick, it's the right Alt key and 7. Press that twice.
On a romanian keyboard anyway
I have a british mac :D
okay, lol
Hello I believe I have a doozey here. I'm working on my twitch app. When you expand and shrink the width of the window the elements in the main div will decrease or increase in columns and rows. My question is, is there a way so that when you increase the size of the window the main div is only as wide as the edges of the content so there is no unecessary space and keeping the content in the div centered
I've been trying a lot of combos of inline-block, block display and whatnot
I'm talking about this kind of thing right here
hi! i'm still struggling with my personal portfolio. tried to put everything into fluid containers to make it mobile responsive, also reduced the size of my navbar.brand as it was 50px before. still no luck as it looks bad on mobile as ever. could anyone help me out? many thanks! https://codepen.io/arolf_flora/full/WEoYmd/
@hifede mobile responsiveness is not directly tied to containers .. definitely helpful, but it's best to use them along side other stuff.. either boostrap grid, flexbox or media queries
@amthomps11 This is where using the Bootstrap Grid will benefit you - it's designed exactly for doing what you want to do.
If you don't want to use bootstrap, you can accomplish a similar behavior with inline-blocks, media queries, and calc():
.twitchbox{
border:solid black 5px;
max-width:750px;
text-align: center;
margin-top: 20px;
padding: 0;
}
.twitchbox a {
display: inline-block;
border:solid black 1px;
min-width:150px;
width: calc(100% / 4 - 20px);
height:150px;
margin: 0px 10px 10px 10px;
background-color:white;
border-top:solid #4d4dff 5px;
}
@media (max-width: 720px) {
.twitchbox a {
width: calc(100% / 3 - 20px);
}
}
@media (max-width: 550px) {
.twitchbox a {
width: calc(100% / 2 - 20px);
}
}
@media (max-width: 395px) {
.twitchbox a {
width: calc(100% - 20px);
}
}
@piteto Thank you! how would you do it using bootstrap?
amthomps11 sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 204 | @piteto |http://www.freecodecamp.com/piteto
@amthomps11 It would look something like:
<div class="twitchbox container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
your twitch user card html goes here, add the class online or offline to the parent div for filtering
</div>
<!-- repeat the div above for each twitch streamer -->
</div>
</div>Since you're on the last intermediate front-end project, I wouldn't recommend moving forward to another project until you get comfortable with the grid system: https://getbootstrap.com/docs/3.3/css/#grid
whether it's bootstrap, foundation, materialize, or simply vanilla CSS grid, it's important to understand the basics of a grid on your path to becoming a certified front-end dev
Thanks a lot and yeah page layout in general is something I'm having a hard time with.
Hey Guys!
Anyone used ReactJS with .NET applications?
@amthomps11 it helps to physically draw it out first
And have some expertise to share?
Hi folks. Working on the twitch api app and can't seem to create a div with js, it's just putting everying in as a string
https://codepen.io/LiciniusRex/pen/GvewGp?editors=1111
https://codepen.io/LiciniusRex/pen/GvewGp?editors=1111
I know the json isn't in yet, but i didn't think it would matter for this bit
nm, fixed it
I've resolved that issue but now I have another. Should be getting a return on my api call, but all I'm getting is undefined.
https://codepen.io/LiciniusRex/pen/GvewGp?editors=0000
https://codepen.io/LiciniusRex/pen/GvewGp?editors=0000
why json[0] and not json ?
I was trying to get back just the first bit of data from the json rather than the whole thing
It's how I did my weather api, figured it would work here, but it doesn't
the object is not structured the same way
first you take a look at the full json, then you adapt your aim depending on your needs
That would explain the problems i've been having. Had a month off from this so having to work out what I've forgotten. Thank @Gersho
hashtagyolo1 sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 518 | @gersho |http://www.freecodecamp.com/gersho
use http://jsonprettyprint.com (copy the object you received there) it'll make it more human readable
Think I have it now. Thanks again @Gersho
hashtagyolo1 sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
api offline
what is going on with the precours work where it says there is a module up next for things and then when you click it it takes you to another lesson and there is no module....am I missing something?
nevermind
Problem number 3. Getting undefined on my channels names now. They work fine to get the JSON, but not to get their names to priont
https://codepen.io/LiciniusRex/pen/GvewGp
https://codepen.io/LiciniusRex/pen/GvewGp
and they work when done as channel[0], or whichever I pick
try console.log(i) inside the getJson
just the number 7 over and over again. Which is the length of my array. SO it's showing undefined because there is nothing at number 7. hmm
for(var i = 0; i <= 10; i++) {
console.log(i); // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
setTimeout(function() {
console.log(i); // 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11
});
}
json is asynchronous, meaning that it has to wait for the twitch api to answer, during that time it went through all of the itterations of the loop
I see.
try replacing your for i with a forEach, it should do the trick
I'll look into it. Not used forEach yet.
it's almost the same you shouldn't have too much trouble implementing it
@Gersho . Got it. Thanks.
hashtagyolo1 sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
api offline
Hey everyone! I needed some help with my tic-tac-toe challenge. The onclick function is affecting the computer to take its turn automatically after player. https://codepen.io/mers89/pen/oGGzZv
Sidenote you cant select if you want to be x or o yet but Ill worry about that later on
whats the problem? @mers89
Hey @moT01 basically I have to click twice: once for player and another for the computer.
@mers89 Because you have all the login in onclick handler
is there a something built to make the computer go?
@mers89 At the top of the function you have condition if(player === 1)
and computer's turn is in else branch
and computer's turn is in else branch
@mers89 so you have to click square again to run this function in else branch
so it sounds like what she should do is make a function for the computers turn and call it at the end of the players turn
that's how i would probly do it anyway
@moT01 that's what I was thinking
@moT01 and @korzo thanks Ill work on that :)
mers89 sends brownie points to @mot01 and @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 871 | @mot01 |http://www.freecodecamp.com/mot01
:cookie: 586 | @korzo |http://www.freecodecamp.com/korzo
hey guys I was wondering if anyone could help me with a bootstrap question?
gotta just ask
DATAJA