These are chat archives for FreeCodeCamp/HelpFrontEnd

8th
Oct 2017
Gersho
@Gersho
Oct 08 2017 00:00

You need to use both of those depending on the streamer's online status, that's one of the challenges for this project

that is inexact :3 you can go with a single one depending on your needs (and still meet the user stories of course)

Ismail Hozain
@ismailhozain
Oct 08 2017 00:02
yeah i just got really confused there so i dont think i want to use it
Gersho
@Gersho
Oct 08 2017 00:03
well anyway, once you've made you choice, you can access everything with object notation
Ismail Hozain
@ismailhozain
Oct 08 2017 00:03
ok cool thanks guys
Ismail Hozain
@ismailhozain
Oct 08 2017 00:20
i'm back, more confused than before on what i was doing meanwhile was switching from the stream to the channel but that did not work either and then just made it a normal function outside of the calls but that did not work either-so my question is how do i retrieve information from both the stream and channel calls and from there use that info to output my results.
Jerzz
@2cool4school
Oct 08 2017 00:22
Does anyone develop with asp.net core?
Eric Weiss
@eweiss17
Oct 08 2017 00:29
@ismailhozain hmm..... information gained from ajax calls can only be accessed within the function
within the call
Ismail Hozain
@ismailhozain
Oct 08 2017 00:30
yeah but i need the information from two different calls
Moisés Man
@moigithub
Oct 08 2017 00:33
$.getJSON('', function(data1){
   $.getJSON('', function(data2){
         //do stuff with data1 and data2
    })
})
Ismail Hozain
@ismailhozain
Oct 08 2017 00:33
oh thank you @moigithub
CamperBot
@camperbot
Oct 08 2017 00:33
ismailhozain sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3657 | @moigithub |http://www.freecodecamp.com/moigithub
Moisés Man
@moigithub
Oct 08 2017 00:36

or use promises https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/all

p1= $.getJSON('')  //<< jquery getJSON return a promise
p2= $.getJSON('')
Promise.all( [ p1,p2 ] ).then( function( allValues ){
    //allvalues is an array with [data1, data2]
})

using jquery $.when

$.when( p1, p2 ).done(function ( data1, data2 ) {
    console.log( data1 ); 
    console.log( data2 ); 
});
Jerzz
@2cool4school
Oct 08 2017 00:37
question, I have an image grid:
<div class="col-md-4">
  <img src="ex/src/path.png" />
</div>

im sorry let me correct that -

<div class="col-md-4">
  <img class="img-responsive" src="ex/src/path.png" />
</div>

thats what my image grid looks like. a few of the images are slightly larger in size (height-wise) and its throwing off my grid, is there a css trick I can use to make the div's/img's uniform in size? I've tried setting height of these certain images to a % lower than 100 but it doesn't affect the image size at all.

Eric Weiss
@eweiss17
Oct 08 2017 00:40
you working off a code pen?
just post it, will be easier
Jerzz
@2cool4school
Oct 08 2017 00:40
@eweiss17 I'm not but I will. One moment
Moisés Man
@moigithub
Oct 08 2017 00:41
bootstrap 3 or 4 ?
Jerzz
@2cool4school
Oct 08 2017 00:41
3
Adam
@Adnosk
Oct 08 2017 01:53
Hi, any recommendation for a good Javascript tutorial? I am working on my weather app already, implemented the API etc. but i think i need some deeper knowledge than just googling parts of code etc. MDN? Eloquent JS? etc. Any recommendation?
Gersho
@Gersho
Oct 08 2017 01:54
try w3schools
the ajax chapter
or you could try the site of a big api (like google, twitch, etc...) they'll walk you through using their API
Adam
@Adnosk
Oct 08 2017 01:55
@Gersho thanks. Sorry for the confusion, I meant JS overall. I have some knowledge about ajax, api etc. and how ho to implement it, but still i feel not very good with JS overall. I would like some deeper overall knowledge
CamperBot
@camperbot
Oct 08 2017 01:55
adnosk sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 529 | @gersho |http://www.freecodecamp.com/gersho
Amit Patel
@AmitP88
Oct 08 2017 01:56
hey guys, I feel dumb for this, but I need some help getting my match 3 game to render onscreen. There's no errors in console and I can't figure out what i'm missing/doing wrong. :worried:
https://codepen.io/AmitP88/pen/pWyaNY?editors=1010
Gersho
@Gersho
Oct 08 2017 01:57
in that case start by installing https://zealdocs.org and load the JS doc, then you keep coding more and more ambitious stuff
you learn to forge by forging or whatever the idiom is in your country
Adam
@Adnosk
Oct 08 2017 01:59
@Gersho thanks! I will look into it for sure, looks interesting.
CamperBot
@camperbot
Oct 08 2017 01:59
adnosk sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
api offline
Gersho
@Gersho
Oct 08 2017 02:01
you can try the advanced algo challenges or try a site like codewars too
@AmitP88 try moving the onload to the body, also onload function should be called with ()
<body onload="foo()">
Adam
@Adnosk
Oct 08 2017 02:06
Codewars - already there :-). But I am not sure... is this the right way to learn JS? I mean - mostly I encounter some challenge (FCC or Codewars etc. doesnt matter) where I dont have a clue what to do, then I google everything for the task and then I am mostly able to complete the task. But somehow I have the feeling its very chaotic to learn like this?
Gersho
@Gersho
Oct 08 2017 02:07
i see what you mean, i think that's how it is unless you have an actual teacher ? every guide online has it's own way of doing things so it's hard to say what to learn first (exept fundamontals)
also depends what you aim for (mostly frontend JS, a bit of everything, specific uses, etc...)
Adam
@Adnosk
Oct 08 2017 02:14
Currently doing just front-end stuff, but yeah, I would like to learn the whole deal and be a full-stack developer.
btw. i just downloaded Zeal and the JS docset for it. Its from the MDN website, which i am currently looking into as a possible source of info/tutorial :)
Gersho
@Gersho
Oct 08 2017 02:14
ye
yes but the advantage of zeal is that for exemple you search for javascript:array. (with the dot at the end) and you'll see a list of all the Array. and Array.prototype. methods
alteducation
@alteducation
Oct 08 2017 02:37

hi i only know vanilla js and doesnt understand jquery well. can someone convert this to vanilla js so i can understand this

$.each($('.card-title'), function(i, el) {
var card = $(el).closest('.car-card-grid-item');
$(el).text() == filter ? card.show() : card.hide();
});
}

Ken Haduch
@khaduch
Oct 08 2017 03:11

@alteducation - I don't know if I can fully convert to vanilla JS - if you need that you'll have to get it from someone else. A verbal description of this, from what I can understand without seeing the HTML code, is this:

  • $.each is essentially going to be like .forEach in processing a list of elements
  • The list of elements to be processed is going to be the list found by the selector .card-title, which is a class, so jQuery would use the Document.getElementsByClassName() method to get the list of elements with that class.
  • the function(i, el) is the function that will be executed for each of those elements. It first is going to take the reference to the elements el and find the .closest element - traversing the parents of the element in the DOM tree to find one with the class .car-card-grid-item. That element will be set in the variable card.
  • (This one's a little fuzzy) - the element el has text contents that are compared to filter (that's what I don't know - what filter actually is - perhaps a variable that is set prior to this code block?) and a ternary operator selects that the card will with be displayed with .show() which the documentation states is roughly equivalent to setting display: block in CSS. Or it will be hidden with .hide(), essentially display:none (using the appropriate javascript methods to set the CSS values)

It is probably a little more involved to explain it thoroughly as far as complete vanilla JS, but you might be able to understand it from there? You can visit the documentation for jquery and read the details - for example, the .show() documentation gives the gory details and examples for that method. There is a search box at the top of the documentation page where you can look at all of the other methods that are used.

alteducation
@alteducation
Oct 08 2017 03:15
@khaduch thank a tonn
CamperBot
@camperbot
Oct 08 2017 03:15
alteducation sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3349 | @khaduch |http://www.freecodecamp.com/khaduch
alteducation
@alteducation
Oct 08 2017 03:16
@khaduch i have inserted that code to this page https://www.alternativeeducation.in/alternative-learning-spaces
@ but i have a problem when i click in a dropdown filter the cards dont rearrange the cards that dont match the filter just disappers leaving a blank in bw how to fix that
Ken Haduch
@khaduch
Oct 08 2017 03:18
@alteducation - ah, so taking a quick look there, you probably get a value into filter that represents something like for example "Delhi" ends up showing three boxes -
alteducation
@alteducation
Oct 08 2017 03:18
yeah
Ken Haduch
@khaduch
Oct 08 2017 03:19
@alteducation - can you give an example of a filter selection that doesn't work - if it's multiple steps, what to do first and then second as far as selection?
alteducation
@alteducation
Oct 08 2017 03:19
@khaduch does $('.card') is this similar to querySelectorAll('.card')
@khaduch only the code for the first filter is written the second filter doesnt work now. dont know how to pass both values to the function
Ken Haduch
@khaduch
Oct 08 2017 03:21
@alteducation - I'm just trying to understand how the HTML is structured... - that link might help!
piteto
@piteto
Oct 08 2017 03:27
@alteducation Here's that pen I gave you earlier with the vanilla JS equivalent instead: https://s.codepen.io/anon/pen/PJQLKR?editors=0011
Ken Haduch
@khaduch
Oct 08 2017 03:27

@alteducation - your question

does $('.card') is this similar to querySelectorAll('.card')

I think that the answer is yes - although I'm not sure if jQuery is sophisticated in the way it forms the selection code - recognizing that it is a class it might use a getElementsByClassName, for example, if that was more efficient?

piteto
@piteto
Oct 08 2017 03:27
.closest() is a real convenient jQuery method, though maybe you could use .find() in vanilla JS to avoid the use of .parentNode.parentNode.parentNode
alteducation
@alteducation
Oct 08 2017 03:29
@piteto could you tell me how i can use the code on two dropdowns like in this page https://www.alternativeeducation.in/alternative-learning-spaces by passing both select menus into the function
piteto
@piteto
Oct 08 2017 03:30
@alteducation The second select menu is another value you can query - the code would be nearly the same, just more if/else statements
alteducation
@alteducation
Oct 08 2017 03:33
@could you please explain. Do i need to write another function for it or can i use the same function
@piteto also when the filter is applied the cards leave a blank space in between them and doesnt rearrange. what could be a possible solution for this
@piteto you please explain. Do i need to write another function for it or can i use the same function
piteto
@piteto
Oct 08 2017 03:34
@alteducation You can use the same function - I'm guessing you get a blank space because you may need to target one more parent level up
console.log your target to make sure you're hiding the full column/grid item
alteducation
@alteducation
Oct 08 2017 03:38
the .card class is inside a <li> element i tired refering the li elements directly but it doesnt solve the issue
Daniel Velez
@veleda3
Oct 08 2017 03:39
any react native developers around?
piteto
@piteto
Oct 08 2017 03:40
@alteducation You should be using the material grid for that layout - not <li> elements
Either way, I'm not sure...hiding the <li> should work too
alteducation
@alteducation
Oct 08 2017 03:41
@piteto hiding the li works!! sorry the code i wrote was incorrect
piteto
@piteto
Oct 08 2017 03:42
Congrats! :p
alteducation
@alteducation
Oct 08 2017 03:43
@piteto could you explain how to do two select filters?
piteto
@piteto
Oct 08 2017 03:44
@alteducation It's going to get more complicated with another filter - can they select them in any order?
alteducation
@alteducation
Oct 08 2017 03:45
@piteto yeah in any order. they just need to be mutually exclusive as in if select delhi and montessori it should elements of both delhi and montessori
piteto
@piteto
Oct 08 2017 03:46
Either way - it's going to be very similar logic to the code I showed you for filtering. You'll just be looking at a different dropdown menu and filtering based on different values and class names
linkin-park
@linkin-park
Oct 08 2017 03:47
veloooooooo
piteto
@piteto
Oct 08 2017 03:48
:bicyclist:
linkin-park
@linkin-park
Oct 08 2017 04:09
whats up @piteto
alteducation
@alteducation
Oct 08 2017 04:15

@piteto in this code

var states = document.querySelector('#state');
states.addEventListener('change', filterCards);

function filterCards() {
  var filter = states.value;

}

how does js know which value to select
shouldn't we mention like states[index].value
??

linkin-park
@linkin-park
Oct 08 2017 04:19
@lydatech hi
Gersho
@Gersho
Oct 08 2017 04:23
@alteducation if that's an id (#) like the exemple you provided, there can only be one since ids are unique in an html document
alteducation
@alteducation
Oct 08 2017 04:23
@Gersho states is a node list. its an html element with multiple select options
<select>

<select id="state">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

like this

Gersho
@Gersho
Oct 08 2017 04:36
oh ok
linkin-park
@linkin-park
Oct 08 2017 04:36
vello @Gersho .... busy again ?
Gersho
@Gersho
Oct 08 2017 04:37
not really, been unproductive all day and was about to go play some videogames
korzo
@korzo
Oct 08 2017 04:57
@Gersho Better make some game ;)
linkin-park
@linkin-park
Oct 08 2017 05:02
you can play elevator saga
Gersho
@Gersho
Oct 08 2017 05:07
seems fun and annoying at the same time (hope the doc isn't too long)
linkin-park
@linkin-park
Oct 08 2017 05:10
well docs are docs :)
change to 55X for speedy speed
Gersho
@Gersho
Oct 08 2017 05:11
yeah but it's just a game don't want to spend too much time getting started
linkin-park
@linkin-park
Oct 08 2017 05:14
its not just a game , "hey dude ! you need the controls! just use the keypad
W = up , S = down , D=stop"
what are you upto @korzo
the thing that bothered me is the error @Gersho
Gersho
@Gersho
Oct 08 2017 05:18
for me it's more like i feel like i'm learning an api when i could be working something else, i'm not really a big fan of gamified stuff like that (it could be of use if i went to the higher challenges, but i probably won't spend that much time so i don't really see the point)
linkin-park
@linkin-park
Oct 08 2017 05:19
i understand!
Gersho
@Gersho
Oct 08 2017 05:19
anyway i'm off for today, cya everyone
linkin-park
@linkin-park
Oct 08 2017 05:19
:+1:
korzo
@korzo
Oct 08 2017 05:21
@linkin-park 7am here, so maybe it's time to sleep :)
Amit Patel
@AmitP88
Oct 08 2017 06:10
@Gersho hey, sorry for the late reply. I tried your suggestion (moving onload onto body and including () in the onload call), but it still didn't work
Dan Schapira
@dsschapira
Oct 08 2017 06:20
@AmitP88, I just scrolled up to your previous post... It looks like you're never actually rendering anything - just populating some stuff and console.logging it. If you want to post something to the screen, you'll need to do something like document.getElementById("root").innerHTML=<stuff here> (if plain JS) or $("#root").html(<stuff here>) if using JQuery.
@AmitP88 It also looks like your grid isn't populating how you expect either, though. It looks like you're mixing class syntax (new Tile) with syntax for calling a function (just saying 'Tile()' ). In this case, Tile is a function, not an object, so you're not making a "new Tile", you're invoking Tile again.
CXmanager
@CXmanager
Oct 08 2017 10:17
Can someone help me to fix the grids? https://codepen.io/CXmanager/pen/mwwxYq?editors=1100
alteducation
@alteducation
Oct 08 2017 10:58
@CXmanager there is an extra . before your flex container class
@CXmanager also your margins are messing up the layout
@CXmanager what is the layout you are trying to achieve

@CXmanager

.flex-container {
display: -webkit-flex;
display: flex;
width: 800px;
height: 250px;
background-color: lightgrey;
}

.flex-item {

width: 250px;
height: 250px;
margin:0 7px;

}

if you were aiming for this

alteducation
@alteducation
Oct 08 2017 11:05

@CXmanager please use this instead of the previous code. this one is better

.flex-container {
display: -webkit-flex;
display: flex;
justify-content:space-around;
width: 800px;
height: 250px;
background-color: lightgrey;
}

.flex-item {

width: 250px;
height: 250px;

}

SL0TR
@SL0TR
Oct 08 2017 11:48
Can anyone help me with a transition effect ?
It's blurring my text
Tom
@moT01
Oct 08 2017 12:29
@SL0TR i think that's just kinda what happens when you want to transition text like that
Omar Tan
@wheelhot
Oct 08 2017 12:32
Im essentially lost and don't know where to start :(
Tom
@moT01
Oct 08 2017 12:34
i would probly start by getting some data from the wikipedia api to log to the console
Kevin
@Kevsterking
Oct 08 2017 12:35
Hi! I need help to get the true browser innerWidth without counting with zoom. The size of the inner browser relative to the screen pixels i guess? Please help! :/
Tom
@moT01
Oct 08 2017 12:35
put in a url that's giving you some data, and make sure it comes through
Martialis39
@Martialis39
Oct 08 2017 12:35
HEllo all!
Has anyone done the nodeschool React tutorial lately?
I am stuck on Isomorphic and cant make it pass
Tom
@moT01
Oct 08 2017 12:36
window.innerWidth i think
Martialis39
@Martialis39
Oct 08 2017 12:36
was wondering maybe something was changed that broke the tutorial
Kevin
@Kevsterking
Oct 08 2017 12:37
that is with zoom. I wan't it to stay the exact pixels it was att 100% zoom. window.innerWidth changes as you zoom
Omar Tan
@wheelhot
Oct 08 2017 12:37
Thanks @moT01 , I'll look into using the console
CamperBot
@camperbot
Oct 08 2017 12:37
wheelhot sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 872 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Oct 08 2017 12:38
zoom how
with the browsers zoom option?
or is it built in to the page
or part of a library you're using or something
Kevin
@Kevsterking
Oct 08 2017 12:39
eg. if my window size is 1050 x 974 and then I zoom the value changes relative to the zoom. I need it to stay the same
you can soom in a browser. ctrl+scrl?
Tom
@moT01
Oct 08 2017 12:40
i use ctrl + +/-
yes
Kevin
@Kevsterking
Oct 08 2017 12:41
yeah ok that's what I mean atelas
t
and I wan't the true value of the window size on the screen. not the width of what it is showing itself
Tom
@moT01
Oct 08 2017 12:43
you need to be more clear if you want me to try and help, im not sure what the problem is - do you have an example of what you are working on, how are you zooming
Kevin
@Kevsterking
Oct 08 2017 12:44
I want the absolute zoom value => var zoomVal = number I want / window.innerWidth;
when I have a window it takes a dimenion on the screen eg. 1920 x 1080 but when you zoom window.innerWidth scales with the zoom and becomes bigger or smaller
I wan't my number to always be the width and height relative to the pixels on the screen
window.innerWidth but without the zoom scaling
Tom
@moT01
Oct 08 2017 12:48
how are you zooming
Kevin
@Kevsterking
Oct 08 2017 12:48
ctrl+scrl
Tom
@moT01
Oct 08 2017 12:50
doesn't sound easy
so you need to get the zoom level of the browser itself somehow
Kevin
@Kevsterking
Oct 08 2017 12:50
if you are in chrom console and rezise how much place the console takes you can see a window deminsion eg. 800px x 900px thats the number I want
but the zoom level is what i want
Tom
@moT01
Oct 08 2017 12:51
so you want both numbers?
Kevin
@Kevsterking
Oct 08 2017 12:52
No I am trying to get the zoom by counting my number / window.innerWidth
Kevin
@Kevsterking
Oct 08 2017 12:52
That returns 300% as fast as you are on a mobile device
I want the relation between the browser width and the window.innerWIdth
There must be a variable somewhere since the browser itself dispalys the value when you resize the window with console open
Kevin
@Kevsterking
Oct 08 2017 13:01
they all scale
Tom
@moT01
Oct 08 2017 13:03
what if you just stored the starting value of innerWidth as a variable
Kevin
@Kevsterking
Oct 08 2017 13:04
if you refresh a page then the page will start in wrong scale
Tom
@moT01
Oct 08 2017 13:04
you dont have a pen i can see?
Kevin
@Kevsterking
Oct 08 2017 13:05
no pen, you wan't the code I have?? it's ony a header this fat
far*
Tom
@moT01
Oct 08 2017 13:08
i want to see what you're seeing
so when you zoom, the header goes off screen. is that what you're trying to fix
?
Kevin
@Kevsterking
Oct 08 2017 13:09
kind of, on mobile devices it sometimes goes off screen
Tom
@moT01
Oct 08 2017 13:11
kind of
Kevin
@Kevsterking
Oct 08 2017 13:11
ohh since I changed around a bit it isnät like this now but I wan't the header content to only be 70% of the page width in the begiining
well. I wan't to be able to refresh the page and not have the page change. for that I need to know the zoomLevel for that I need the number
I wanna be able to zoom refresh rezise without it bugging out and getting out of vision
Tom
@moT01
Oct 08 2017 13:14
well, i dont want to read it, but i think there might be an answer in that first link i sent
now it crashes
i just can't finish creating this
the minimax algorithm... i understand it and I understand how it works, but for some reason it doesn't work. I'm so sick of this project...
Right now I'm thinking of deleting the whole code and just start from scratch...
korzo
@korzo
Oct 08 2017 14:21
@palingheorghe I think you have infinite loop there as my tab with your codepen crashed
Tom
@moT01
Oct 08 2017 14:21
yea, i crashed too
Petru Alin Gheorghe
@palingheorghe
Oct 08 2017 14:23
I just discovered they crash because od the "console.log"s
When i removed those lines the algorithm didn't crash
But now for some reason everytime i click a square the whole layout is changing
Thid is by far the worst challenge because I have no idea what is going on. -.-
korzo
@korzo
Oct 08 2017 14:37
@palingheorghe You have infinite loop at line 91
You recursively call minmax
Petru Alin Gheorghe
@palingheorghe
Oct 08 2017 14:38
Yeah but it ends when the number of cases to check ends
korzo
@korzo
Oct 08 2017 14:38
As far as I can tell. It becomes unresponsive very fast
Petru Alin Gheorghe
@palingheorghe
Oct 08 2017 14:38
And yes immediately after clickin on one button its getting destroyed
But that doesn't happen it has something to do sith the js file
korzo
@korzo
Oct 08 2017 14:43
@palingheorghe Also codepen whined about Infinite loop
There is second and third table shown before I had to kill tab manually, but those tables are deformed.
also some gibberish is at the bottom, but I was unable to scroll
@palingheorghe I would suggest separate UI from logic. It will make code more testable.
then you can setup some test cases manually or using Mocha
Petru Alin Gheorghe
@palingheorghe
Oct 08 2017 14:46
never used Mocha
I guess I'll be coding this locally with Sublime and try to learn Mocha as well
I feel stuck because of this "minimax" algorithm thing.
korzo
@korzo
Oct 08 2017 14:48
@palingheorghe You will learn mocha in 10 minutes. Its literally 2 functions(+ 4 more function for setup/terdown if needed) and it has good documentation.
You can run it also in browser.
@palingheorghe You can also debug it on codepen using breakpoints.
Add debugger; at the first line of minmax and open devtools before clicking field.
Then you can check current state and step line by line
Petru Alin Gheorghe
@palingheorghe
Oct 08 2017 14:52
@korzo I'll do it locally with Mocha. At least I'll feel like I'm progressing somehow instead of being at the same level all the time. This project is very frustrating and it makes me question my ability to write code.
korzo
@korzo
Oct 08 2017 15:01
@palingheorghe try to read something about TDD. It will help you progress in smaller steps and better understand the code.
Also your code will be better structured.
It's good specially in complicated code as minmax
Petru Alin Gheorghe
@palingheorghe
Oct 08 2017 15:04
@korzo thanks for your tips and help!
CamperBot
@camperbot
Oct 08 2017 15:04
palingheorghe sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 602 | @korzo |http://www.freecodecamp.com/korzo
korzo
@korzo
Oct 08 2017 15:05
@palingheorghe Glad to help and good luck
piteto
@piteto
Oct 08 2017 15:23

@alteducation Sorry, logged off before your question. With this code:

var states = document.querySelector('#state');
states.addEventListener('change', filterCards);

function filterCards() {
  var filter = states.value;

}

when the #state element changes, the value of that element changes. There can only be one value for that element at a time, so no need to loop through it.

ideally, though, replace states.value with this.value so you aren't relying on a variable outside of the function
and, document.getElementById is a better choice for selecting elements by ID
alteducation
@alteducation
Oct 08 2017 15:25
@piteto could you tell me why that is
piteto
@piteto
Oct 08 2017 15:26
@alteducation The <option> elements are just values for the #state element
when you manually click on that drop down and select one of the values, the change event fires and you get the new value
alteducation
@alteducation
Oct 08 2017 15:27

@piteto I tried to incorporate the other select option by repeating the code but it has become a mess. I tried looking online for tutorials but cannot find anything similar.

var states = document.querySelector('#state');
states.addEventListener('change', filterCards);
var approach = document.querySelector('#approach');
approach.addEventListener('change', filterCards);
function filterCards() {
  var filterstate = states.value;
  var filterapproach = approach.value;



  // show all the cards if "Show All" is selected

  if(filterstate == "All States" && filterapproach == "All Learning Methods") {
    $('.card-parent').show();
    return;
  }

  // use $.each to look at the title/h4 element in each card
  // if it matches the filter value selected show it else hide it

  $.each($('.space-state'), function(i, el) {
    var card = $(el).closest('.card-parent');
    $(el).text().includes(filterstate) ? card.show() : card.hide();
  });
  $.each($('.space-approach'), function(i, el) {
    var card = $(el).closest('.card-parent');
    $(el).text().includes(filterapproach) ? card.show() : card.hide();
  });
}

could please take a look

@piteto no. i was asking about why getElementsbyID is better than querySelector]
piteto
@piteto
Oct 08 2017 15:29
@alteducation getElementById doesn't need to rely on css selector functionality to target the element - it's specifically looking for an ID. The querySelector methods will have slightly worse performance
@alteducation Another answer to that question with some jsperf results to show the difference in performance: https://stackoverflow.com/a/26848416
image.png
alteducation
@alteducation
Oct 08 2017 15:32
@piteto Thanks for mentioning that. Now I can write faster Code :fire:
CamperBot
@camperbot
Oct 08 2017 15:32
alteducation sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 221 | @piteto |http://www.freecodecamp.com/piteto
piteto
@piteto
Oct 08 2017 15:34
From looking at your JS, it seems the only issue would be here:
  if(filterstate == "All States" && filterapproach == "All Learning Methods") {
    $('.card-parent').show();
    return;
  }
piteto
@piteto
Oct 08 2017 15:41
just as a guess without having live code to debug, you might want to try something more like this:
var states = document.getElementById('state');
var approach = document.getElementById('approach');
[states, approach].forEach(el => el.addEventListener('change', filterCards));

function filterCards() {
  var filter = this.value;
  var selector = this.id == "approach" ? '.space-approach' : '.space-state';

  $.each($(selector), function(i, el) {
    var card = $(el).closest('.card-parent');
    $(el).text().includes(filter) ? card.show() : card.hide();
    if (filter == "All Learning Methods") card.show();
    if (filter == "All States") card.show();
  });
}
aRtoo
@artoodeeto
Oct 08 2017 15:53
hey guys on my calculator challenge when i click the button and push the value itll just replace the not add in my array.
heres the pen.https://codepen.io/artoo/pen/gGvvER thanks in advanced
alteducation
@alteducation
Oct 08 2017 15:53
@piteto only one filter works they dont work in a combined way. Please hep
piteto
@piteto
Oct 08 2017 15:54
@alteducation Put your code in a codepen so I can debug it live. I will try to help
alteducation
@alteducation
Oct 08 2017 16:03
@piteto https://codepen.io/siliconpen/pen/bovwzV please use this link.
piteto
@piteto
Oct 08 2017 16:12
@alteducation Your code is getting close - but I'm finding myself writing it all for you, which is kind of against the philosophy of this coding school.
At this point, you need to determine what the values are for each select menu and then determine what cards to show based on that
you have the correct code for determining the values and the correct code for filtering them - the part to figure out now is how to combine both filters so they work together
I'm happy to help you figure this out if you want to try writing some of your own code - I'm just not sure how to provide more help at this point without writing more code for you
alteducation
@alteducation
Oct 08 2017 16:14
@piteto I know i too feel the same but i dont know how to combine them. i have searched a lot online on how to do this. Could you guide me where to look and what to learn to do this
@piteto I agree with you the modal in this page i was able to write by my own after a lot of trying over and i really felt like i learned something
piteto
@piteto
Oct 08 2017 16:16
@alteducation I don't think you'll find a tutorial for this that will help you modify your code any better than you have. There are no additional methods in jQuery or javascript that will help out beyond what you have already
Sometimes the algorithm part is just a matter of walking through the steps / logic
Your function needs to look at both select values - hide cards that don't have those values and show the ones that do
alteducation
@alteducation
Oct 08 2017 16:19
@piteto woudnt i need to remember the state of the other to do this?
piteto
@piteto
Oct 08 2017 16:20
@alteducation No, you can check for that in your for loop
  var stateFilter = document.getElementById("state").value;
  var learningFilter = document.getElementById("approach").value;
if the text matches stateFilter and the text matches learning filter - show it, else hide it
if the state filter is "All States", only pay attention to the learning filter and vice versa
it's a mini algorithm
alteducation
@alteducation
Oct 08 2017 16:22
@piteto so i just use && operator?
piteto
@piteto
Oct 08 2017 16:22
@alteducation That is definitely one way to do it
Start with what you are comfortable with, then optimize after that
alteducation
@alteducation
Oct 08 2017 16:23
@piteto if the state filter is "All States", only pay attention to the learning filter dont know how to do this. but i agree with your point. I will try really hard to write the code. spend few hours on it and get back to you
piteto
@piteto
Oct 08 2017 16:23
maybe practice with some simpler code to get the core algortihm down first
alteducation
@alteducation
Oct 08 2017 16:26
@piteto i had just learned the javascript filter method and that is when i ventured into making this. Could you tell me why the filter method cannot be used here
@piteto I am loading this data from a json file but once the html is rendered i dont know how to run array methods on it
piteto
@piteto
Oct 08 2017 16:27
@alteducation .filter() could be used for this as well, but it returns an array that you will then need to process. With .forEach(), you skip returning the array and simply process each item as you loop through it
.map(), .filter(), .reduce(), .forEach() are all loops, you could also use a standard for loop
alteducation
@alteducation
Oct 08 2017 16:33
@piteto can i ask you a different question. I'm just reading more about blockchain technology and the idea of decentralisation and bringing control back to people fascinates me. do you think that web/blockchain hybrid apps are the future or current http web is going to get replaces with blockchain ipfs. Maybe this is a very stupid question. Could you share your views on this.
piteto
@piteto
Oct 08 2017 16:34
@alteducation I haven't thought much about that to be honest :)
Progressive web apps seem to be the trend - at least as far as Google is concerned
alteducation
@alteducation
Oct 08 2017 16:37
@piteto Blockchain books predict the death of Centralised Services like Google and People getting to own their own identity and data with them and as for search well i dont know. I hope more decentralisation will kick in and people to get to have power over their data and how the services they use are designed
@piteto why do google push progressive webapps over native android apps. Isnt that where they get to make money?
piteto
@piteto
Oct 08 2017 16:42
@alteducation I don't know, but I'm guessing they want to make money on chromebooks too
Progressive web apps will run on any OS and then they can start charging for their apps that will run on any device
alteducation
@alteducation
Oct 08 2017 16:46
@piteto woudln't services like google assistant replace a lot of apps and become a behemoth of an app that can do pretty much anything that you want. but that will give google all the power in the world
piteto
@piteto
Oct 08 2017 16:47
@alteducation Probably, yes, the definition of "app" and "service" is likely going to change a lot in the next decade or two
alteducation
@alteducation
Oct 08 2017 16:50
@piteto decade :sparkles: is a long time in today's standard. do you think things will stay similar that long?
piteto
@piteto
Oct 08 2017 16:51
@alteducation I wish it would move faster to be honest - we haven't really progressed all that much since 2007 :)
alteducation
@alteducation
Oct 08 2017 16:51
@piteto I am fascinated af with blockchain, i think its going to bring a paradigm shift in how our society works
@piteto progress is exponential and we always underestimate the curve. If we take 30 steps forward in a linear fashion we will reach maybe the next block and this is how we often predict the future but if we take 30 steps exponentially we reach beyond the moon.
alteducation
@alteducation
Oct 08 2017 16:57
@piteto it may take a long time to reach 4% but then it goes 16% and then 256% that is nuts
piteto
@piteto
Oct 08 2017 17:08
lol, yes @alteducation just a matter of making the right technology accessible to everyone!
I have to head out....but hopefully you get your filtering fixed! Have a good rest of your day/evening
alteducation
@alteducation
Oct 08 2017 17:10
@piteto yeah going to work hard on it and focus my brain power :fire: . Wish me luck brother :+1:
@piteto Thanks for all the awesome help
CamperBot
@camperbot
Oct 08 2017 17:10
alteducation sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 222 | @piteto |http://www.freecodecamp.com/piteto
linkin-park
@linkin-park
Oct 08 2017 17:10
f! these thing sucks
i feel framework are suicidal
want to have anti-framework channel
alteducation
@alteducation
Oct 08 2017 17:13
@linkin-park dont know anything about javascript frameworks but my advice is take a cold shower bro. everything will get chilled out :sparkles:
Dan Schapira
@dsschapira
Oct 08 2017 17:14
@linkin-park what's your issue with frameworks? Which ones have you tried?
linkin-park
@linkin-park
Oct 08 2017 17:15
my point is want a vanilla channel @dsschapira
Jerzz
@2cool4school
Oct 08 2017 20:03
Hey whats up room, I'm having an issue. I have an image grid as part of a bigger application, and some of the images are creating issues (due to being different in size) so i deleted them from my content folder, forced a non-cache refresh of the browser (ctrl + refresh), but my images are still showing up
Busola
@cypher12
Oct 08 2017 20:32
$(document).ready(function() {

    $('#exampleModal').on('show.bs.modal', function (e) {
        var selectedStudentId = e.relatedTarget.getAttribute("data-id");
        $('#delete-btn').on('click', function() {

       //The code below keeps giving error
        //studentsresource.js:7 Uncaught TypeError: $.ajax is not a function

        //                at HTMLButtonElement.<anonymous> (studentsresource.js:7)

        //                at HTMLButtonElement.dispatch (jquery-3.2.1.slim.min.js:3)

        //                at HTMLButtonElement.q.handle (jquery-3.2.1.slim.min.js:3)
            $.ajax({
              type: 'DELETE',
              url: '/studentview/' + selectedStudentId,
              success: function(data){
              //do something with the data via front-end framework
              location.reload();
              }
          });
    //The code above

          selectedStudentId = -1; //To make sure selected students doesn't hold that index deleted
        });
      });

    });
});
Please help....someone's life depends on this code
Hafiz Mughees siddiqui
@Mughees605
Oct 08 2017 20:41
@cypher12 can you share your codepen
Busola
@cypher12
Oct 08 2017 20:45
uhmmm....it's not on codepen....i'm working locally
@Mughees605
but i can put it on my git so you can take a look @Mughees605
Hafiz Mughees siddiqui
@Mughees605
Oct 08 2017 20:47
@cypher12 url must be in string
url: "/api/rooms",
Maria Theresa Arruda
@arrudamt
Oct 08 2017 20:48
how can i send a code in this format above?
Hafiz Mughees siddiqui
@Mughees605
Oct 08 2017 20:49
@cypher12 use this /studentview/${selectedStuentId},
Busola
@cypher12
Oct 08 2017 20:50

@arrudamt use

```
//Your code

```

@Mughees605 i'd try that
(Your code)
@Mughees605 thanks
CamperBot
@camperbot
Oct 08 2017 20:51
cypher12 sends brownie points to @mughees605 :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @mughees605 |http://www.freecodecamp.com/mughees605
Hafiz Mughees siddiqui
@Mughees605
Oct 08 2017 20:52
@cypher12 its work?
Maria Theresa Arruda
@arrudamt
Oct 08 2017 20:53
@cypher12 thanks!!! =D
CamperBot
@camperbot
Oct 08 2017 20:53
arrudamt sends brownie points to @cypher12 :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @cypher12 |http://www.freecodecamp.com/cypher12
Busola
@cypher12
Oct 08 2017 20:54
@Mughees605 one minute please
Hafiz Mughees siddiqui
@Mughees605
Oct 08 2017 20:55
@cypher12 ok
Busola
@cypher12
Oct 08 2017 20:58
@Mughees605 still giving the same err
$('#exampleModal').on('show.bs.modal', function (e) {
        var selectedStudentId = e.relatedTarget.getAttribute("data-id");
        $('#delete-btn').on('click', function() {
          console.log(selectedStudentId);
            $.ajax({
              type: 'DELETE',
              url: `/studentview/${selectedStudentId}`,
              success: function(data){
              //do something with the data via front-end framework
              location.reload();
              }
          });
          selectedStudentId = -1; //To make sure selected students doesn't hold that index deleted
        });
      });
alteducation
@alteducation
Oct 08 2017 21:00
@piteto

@piteto

    var states = document.getElementById('state');
    var approach = document.getElementById('approach');
    [states, approach].forEach(el => el.addEventListener('change', filterCards));

    function filterCards() {





      var filterState = states.value;
      var filterApproach = approach.value;
      /*var selector = this.id == "approach" ? '.space-approach' : '.space-state'; */

      var card = $(el).closest('.card-parent');
      var titleState = document.getElementsByClassName('space-state');
      var titleApproach = document.getElementsByClassName('space-approach');
      for (i = 0; i < card.length; i += 1) {
          if(titleState[i].includes(filterState) && titleApproach[i].includes(titleApproach)){
            card.show();
          } else{
            card.hide();
          }
      }

am i getting any close. or do i need to change the logic?

Busola
@cypher12
Oct 08 2017 22:09
@Mughees605
Okay i got it to work.....i used
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
piteto
@piteto
Oct 08 2017 22:39
@alteducation Looks right, now you'll just need to account for the "All" functionality in those two menus
Amit Patel
@AmitP88
Oct 08 2017 22:48

hey guys, I'm trying to create an 8 x 8 grid for a match 3 game and I think I almost have it rendered, except that my grid won't populate with the images. I've console.logged my variables and functions to check the outputs along the way. What am I missing?

https://codepen.io/AmitP88/pen/pWyaNY

StrategyIsKey23
@23beyblade
Oct 08 2017 23:12
anyone here know what the form attribute "form-control" does? Thanks?
thanks*
Miguel T Rivera
@mtrivera
Oct 08 2017 23:18
anyone use brunch and sass together?
Rada
@Radascript
Oct 08 2017 23:18
@AmitP88 what exactly are you trying to do? On lines 55-56 you should be accessing innter properties of the Tile otherwise you are trying to jam entire objects into the HTML
like
var img_src = new Tile(); row[x] = img_src["tile"];
will display image sources
Amit Patel
@AmitP88
Oct 08 2017 23:23
@Radascript ah I see. I just did that and the image urls rendered on the grid. Now I just gotta get the urls to show the actual images
Rada
@Radascript
Oct 08 2017 23:24
@AmitP88 here you go:
(ish) haha
Wisdom Peters
@blackcytographer
Oct 08 2017 23:26
Pls I need help on how
Rada
@Radascript
Oct 08 2017 23:27
@blackcytographer you are going to have to be more specific
Amit Patel
@AmitP88
Oct 08 2017 23:28
@Radascript lol thanks. I guess this will work for now. I'm actually trying to make a match 3 game on an 8 x 8 grid. I was using Canvas + JS before, but I had to scrap my code because I was having a hard time trying to create a function that could swap two adjacent tiles and Canvas was making it tricky, so I decided to scrap my code and try a new approach using only JS
CamperBot
@camperbot
Oct 08 2017 23:28
amitp88 sends brownie points to @radascript :sparkles: :thumbsup: :sparkles:
Wisdom Peters
@blackcytographer
Oct 08 2017 23:28
Sorry dear need help on my random quote
CamperBot
@camperbot
Oct 08 2017 23:28
:cookie: 399 | @radascript |http://www.freecodecamp.com/radascript
Wisdom Peters
@blackcytographer
Oct 08 2017 23:28
Machine having problem initiating the click function
Rada
@Radascript
Oct 08 2017 23:28
@AmitP88 oh yeah canvas can be a pain in the butt
@blackcytographer do you have a pen of it?