These are chat archives for FreeCodeCamp/HelpFrontEnd

19th
Feb 2017
Bigyan Karki
@bigyankarki
Feb 19 2017 00:11
@TylerMoeller
var userName = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
userName.push("brunoFin", "comster404")

for (var i= 0; i < userName[i].length; i++){
  var url = 'https://wind-bow.gomix.me/twitch-api/streams/' + userName[i];
console.log(url);
  $.getJSON(url, function(user) {
    if (user.stream === null) {
      console.log(userName[i]);

    }
  });

}
whats wrong in this code
Tyler Moeller
@TylerMoeller
Feb 19 2017 00:12
@bigyankarki I haven't tried running it, but you are trying to make an async call inside a for loop. That won't work.
Jean Marco Romero
@volkranium
Feb 19 2017 00:13
Is <br> bad practice?
Bigyan Karki
@bigyankarki
Feb 19 2017 00:13
what does async call mean @TylerMoeller
Tyler Moeller
@TylerMoeller
Feb 19 2017 00:13
It's a call that takes some time to complete, like getJSON, setTimeout, etc
Bigyan Karki
@bigyankarki
Feb 19 2017 00:14
@TylerMoeller can I solve that problem with setting async false in ajax?
Tyler Moeller
@TylerMoeller
Feb 19 2017 00:15
@bigyankarki Maybe to understand it better, what do you get with this code?
var arr = [0,1,2,3,4,5,6,7,8,9,10];

for (var i = arr[0]; i < arr.length; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}
Compare that with:
var arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(i) {
  setTimeout(function() {
    console.log(i);
  }, 100);
});
And see that link that @SkyCoder01 gave you earlier :point_up: February 18, 2017 3:29 PM
@volkranium The <br> tag is obsolete in HTML5 and should not be used: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
Tyler Moeller
@TylerMoeller
Feb 19 2017 00:24
@bigyankarki Updated the samples above to be more similar in case that helps
Bigyan Karki
@bigyankarki
Feb 19 2017 00:27
userName.forEacah(function(i){
   var url = 'https://wind-bow.gomix.me/twitch-api/streams/' + userName[i];
console.log(url);
  $.getJSON(url, function(user) {
    if (user.stream === null) {

    }
  });

});
how does forEach method works?
Jean Marco Romero
@volkranium
Feb 19 2017 00:28
How can i just border width to text width???
Tyler Moeller
@TylerMoeller
Feb 19 2017 00:30
@bigyankarki I think it will help you more if you try to read about it first, practice using it, and then let us know what specific questions you have. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Bigyan Karki
@bigyankarki
Feb 19 2017 00:31
okay :)
aRtoo
@artoodeeto
Feb 19 2017 00:48
hey guys. i need help. i made a scrolling one page on portfolio page and i just want to ask how can i make the scrolling stop on the start of the div. because right now when i clicked the nav buttons it will end at the top edge of the photo?? heres my code pen. http://codepen.io/artoo/pen/ggJNNv\
aRtoo
@artoodeeto
Feb 19 2017 00:55
hey guys. i need help. i made a scrolling one page on portfolio page and i just want to ask how can i make the scrolling stop on the start of the div. because right now when i clicked the nav buttons it will end at the top edge of the photo?? heres my code pen. http://codepen.io/artoo/pen/ggJNNv
Michael Grienauer
@mgrienauer
Feb 19 2017 01:09
http://codepen.io/mike93og/pen/pRmmrP hey guys im just wondering how would i make my button row show under the author but still be in the div?
as in, how would i make the button row show under the author on a new line?
Josh
@joshfilippi
Feb 19 2017 01:10
Can anyone suggest a good site for uploading and hosting audio files? I want to use audio for the alarm clock project
Michael Grienauer
@mgrienauer
Feb 19 2017 01:10
nvm i figured it out
aRtoo
@artoodeeto
Feb 19 2017 01:11
hey guys. i need help. i made a scrolling one page on portfolio page and i just want to ask how can i make the scrolling stop on the start of the div. because right now when i clicked the nav buttons it will end at the top edge of the photo?? heres my code pen. http://codepen.io/artoo/pen/ggJNNv
Ralph Nahra
@Rallph
Feb 19 2017 01:13
Hey can someone show me how I can get an HTML form to submit the value of the text box without having a submit button? Thanks
<form>
    <input id = "box" type = "text" value = "text">
   <input type = "button" value = "Submit" onclick = "func()">
  </form>
function func() {
  var input = document.getElementById("box").value;
  console.log(input);
}
Gulsvi
@gulsvi
Feb 19 2017 01:38
@Rallph Either hook up a submit() event handler in your javascript or do:
<form onsubmit="func()">
  <input id="box" type="text" value="text">
  <input type="button" value="Submit" onclick="func()">
</form>
@joshfilippi Github works great - I used it for a video background recently
dpstrijker
@dpstrijker
Feb 19 2017 02:02
Hi Im building this tribute page. Most of it makes sense but how to I get this grey row like this https://codepen.io/freeCodeCamp/full/NNvBQW
Gulsvi
@gulsvi
Feb 19 2017 02:07
@dpstrijker That's called a jumbotron: http://getbootstrap.com/components/#jumbotron
dpstrijker
@dpstrijker
Feb 19 2017 02:09
@SkyCoder01 thx. Looks pretty cool but also advanced. Do you know where I can check any other tribute pages from other users. So i can see At what level I should be know.
CamperBot
@camperbot
Feb 19 2017 02:09
dpstrijker sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 243 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 19 2017 02:11
@dpstrijker You can search for tribute pages in codepen: http://codepen.io/search/pens?q=tribute+page
Lots of different examples out there
dpstrijker
@dpstrijker
Feb 19 2017 02:17
@SkyCoder01 thx. Allready felt shit about my design... :( when i suck at this should i digg deeper into bootstrap?
CamperBot
@camperbot
Feb 19 2017 02:17
dpstrijker sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: dpstrijker already gave skycoder01 points
Bigyan Karki
@bigyankarki
Feb 19 2017 02:17
var userName = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
userName.push("brunoFin", "comster404")

userName.forEach(function(letter, i){
   var url = 'https://wind-bow.gomix.me/twitch-api/streams/' + userName[i];

  $.ajax({
    url: url,
    type: 'GET',
    dataType: 'json',
    success: function(user) {
      if (user.stream === null){
        $("#allUsers #logo").html("<img src= 'http://www.freeiconspng.com/uploads/error-icon-4.png'>")
        $('#allUsers #name').text(userName[i]);
        $('#allUsers #status').text(user.stream);
      }

    },
    error: function(user){


  }
  })

  });
@SkyCoder01 do i need another loop inside ajax too?
Gulsvi
@gulsvi
Feb 19 2017 02:22
@bigyankarki I don't think so
unless you want to loop through the JSON? but it looks like you are getting each user individually. The letter variable is confusing
Gulsvi
@gulsvi
Feb 19 2017 02:28

@bigyankarki Your code is doing this:
if the user stream is null, update the logo, the name, and the status here:

    <tr>
      <td id="logo"></td>
      <td id="name"></td>
      <td id="status"></td>
    </tr>

The values between those <td> tags gets overwritten for every user that has their stream === null.

I saw this a couple of days ago here too - don't use tables for layout: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html
Bigyan Karki
@bigyankarki
Feb 19 2017 02:30
umm so do I have to take make divs?
Daniel Aguila
@MxLooney
Feb 19 2017 02:36
hey guys sorry I am new here but
Bigyan Karki
@bigyankarki
Feb 19 2017 02:36
welcome Daniel
:)
Daniel Aguila
@MxLooney
Feb 19 2017 02:36
what would be the difference between the html and css on creating my tribute page?
I tried to put color to my text on css and it didnt work but if I do it on html it works...just more confuse on what events I should use what commands
Bigyan Karki
@bigyankarki
Feb 19 2017 02:37
can you send the code @MxLooney
Daniel Aguila
@MxLooney
Feb 19 2017 02:38

<style>
.red-text {
color: green;
}
</style>

<h1 class="text-center red-text">Hello World</h1>

is simple but I tried doing the <style>-</style> on the css section of "A Pen" and it didnt work
so I would love it if someone can clear it up to me what is the difference of html and css sections on "A Pen"
Bigyan Karki
@bigyankarki
Feb 19 2017 02:39
style tag is not needed in css section
Daniel Aguila
@MxLooney
Feb 19 2017 02:39
so I would simply start with ".red-text"?
Bigyan Karki
@bigyankarki
Feb 19 2017 02:39
yup
Daniel Aguila
@MxLooney
Feb 19 2017 02:39
or I mean with the class/id ect?
okay
and just real quick
Bigyan Karki
@bigyankarki
Feb 19 2017 02:40
.red-text { color: red}
Daniel Aguila
@MxLooney
Feb 19 2017 02:40
does it really matter where I put it? as in html or css?
Bigyan Karki
@bigyankarki
Feb 19 2017 02:40
well CSS is for designing..so it would be better if you style in CSS
Daniel Aguila
@MxLooney
Feb 19 2017 02:40
ok
thanks man
Bigyan Karki
@bigyankarki
Feb 19 2017 02:41
also, when the file s large, it would be cumbersome to dd style in HTML
@MxLooney :)
goodluck coding :)
Daniel Aguila
@MxLooney
Feb 19 2017 02:41
thanks :) @bigyankarki
CamperBot
@camperbot
Feb 19 2017 02:41
mxlooney sends brownie points to @bigyankarki :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @bigyankarki |http://www.freecodecamp.com/bigyankarki
Bigyan Karki
@bigyankarki
Feb 19 2017 02:41
:)
also (``` and hold shift and press enter) in between write code and press alt+enter
this is how you send the code
well its ctrl+enter in both
Abhijeet Singh
@abhijeetps
Feb 19 2017 02:47
Check out my weather app. And suggestions are warmly welcomed. :smile:
http://codepen.io/aps120797/full/BQXRZr/
Brian
@bbowen90
Feb 19 2017 02:50
That's pretty awesome
@aps120797 very nice!!
Abhijeet Singh
@abhijeetps
Feb 19 2017 02:53
@bbowen90 Thanks. :smile:
CamperBot
@camperbot
Feb 19 2017 02:53
aps120797 sends brownie points to @bbowen90 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @bbowen90 |http://www.freecodecamp.com/bbowen90
Brian
@bbowen90
Feb 19 2017 02:55
@aps120797 You're welcome!! I'm a noob & first time posting anything
Abhijeet Singh
@abhijeetps
Feb 19 2017 02:57
@bbowen90 It doesn't matter if you are a noob or not. Anyone can give feedbacks and suggestion. Thanks.
CamperBot
@camperbot
Feb 19 2017 02:57
aps120797 sends brownie points to @bbowen90 :sparkles: :thumbsup: :sparkles:
:warning: aps120797 already gave bbowen90 points
Gulsvi
@gulsvi
Feb 19 2017 02:58
@aps120797 I just see a white page, not sure if you changed something just now. I'm using Firefox.
Abhijeet Singh
@abhijeetps
Feb 19 2017 02:59
@SkyCoder01 Hey Sky, its working fine here on Edge, Chrome and Firefox?
Might be that the internet connection is slow.
Try again and provide your valuable feedbacks.
Gulsvi
@gulsvi
Feb 19 2017 03:00
@aps120797 It's my adblocker, just figured it out. Adblock Plus blocks ip-api.com
And this is why I don't see a background image:
body{
  background-color: url("http://maxpixel.freegreatpicture.com/static/photo/1x/Wind-Fog-Clouds-Photo-Texture-Sky-Storm-Weather-699682.jpg");
Brian
@bbowen90
Feb 19 2017 03:01
@aps120797 I'm using Firefox & it worked fine
Sdcopeland
@Sdcopeland
Feb 19 2017 03:01
I'm working on the first coding project and something isn't working correctly. the bootstrap img-responsive class doesn't seem to be actually setting max-width:100% because the images extends beyond the div. The only way I can actually get the image to center is by writing specific css setting img max-width to 100% any thoughts on what's going on?
Gulsvi
@gulsvi
Feb 19 2017 03:01
I think you want background-image instead of background-color
@Sdcopeland Make sure you're using bootstrap 3.3 and not bootstrap 4.0 -- the codepen quick add menu is adding bootstrap 4.0
Sdcopeland
@Sdcopeland
Feb 19 2017 03:02
@SkyCoder01 that would do it. Doh, thanks. I imagine bootstrap 4.0 has a different tag?
CamperBot
@camperbot
Feb 19 2017 03:02
sdcopeland sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 244 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 19 2017 03:03
@Sdcopeland I think it's img-fluid in bootstrap 4? I haven't tried it yet to be honest
Abhijeet Singh
@abhijeetps
Feb 19 2017 03:04
@SkyCoder01: Ahh, the background image and the weather icon depends on the OpenWeatherAPI. In short, every content of the App depends on the JSON reply. So, temporarily, pause your adblock and check it again.
Sdcopeland
@Sdcopeland
Feb 19 2017 03:05
@SkyCoder01 yup just looked at the documentation. It looks to be img-fluid. Thanks though, I would have never even thought to look at which version of boostrap they were using because like you I haven't dove into 4.0 yet.
CamperBot
@camperbot
Feb 19 2017 03:05
sdcopeland sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: sdcopeland already gave skycoder01 points
Abhijeet Singh
@abhijeetps
Feb 19 2017 03:05
@bbowen90 : Yeah, I have checked it already. Sky has installed AdBlock, that's why he's unable to see my app.
Gulsvi
@gulsvi
Feb 19 2017 03:07
@aps120797 Yes location works fine without adblock enabled. The CSS background-color property though should be background-image that's why I just see a white page when the location is blocked. You can add a .fail() method to your .getJSON if you want to tell the user to disable adblock.
Abhijeet Singh
@abhijeetps
Feb 19 2017 03:09
@SkyCoder01 Ahh, didn't noticed that background-color blunt. Fixed that. Thanks!
CamperBot
@camperbot
Feb 19 2017 03:09
aps120797 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 245 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 19 2017 03:11
blunder, not blunt lol ;) :four_leaf_clover: :four_leaf_clover:
Brian
@bbowen90
Feb 19 2017 03:14
@aps120797 Idk if my Page is done or not. It won't let me move on. I think it's because I don't have a link to my CodePen.
David Meyers
@davmey
Feb 19 2017 03:18
Is there a way to test out of portions of the course if you're already experienced in HTML CSS and JavaScript?
Bgene
@Bgene
Feb 19 2017 03:20
can someone look at my pen? I don't know how to put two objects in one line
help?
I want the photo to align with my bio
Abhijeet Singh
@abhijeetps
Feb 19 2017 03:21
@SkyCoder01 : LOL! Learning English. Still not an expert. :laughing:
Dalton
@DaltonBell
Feb 19 2017 03:22
How do you make a page to access the responses on a form element?
Mihai Veronica
@VeronicaM
Feb 19 2017 03:23
@Bgene you can make them stand by each other like you did for the navbar with the two col-md-6 classes
from bootstrap
David Meyers
@davmey
Feb 19 2017 03:24
Yeah, wrap the <p> and <img> in <div> and assign those widths
@Bgene does that make sense?
Bgene
@Bgene
Feb 19 2017 03:25
@VeronicaM @davmey I'll try them out
Mihai Veronica
@VeronicaM
Feb 19 2017 03:26
@DaltonBell you want to access them on the client side ? You can query the input's and get their value with jquery $("#inputId"),val() or by using the query selector with plain javascript
Bgene
@Bgene
Feb 19 2017 03:27
@VeronicaM @davmey They worked!!! Thanks guys!
CamperBot
@camperbot
Feb 19 2017 03:27
:cookie: 9 | @davmey |http://www.freecodecamp.com/davmey
:cookie: 320 | @veronicam |http://www.freecodecamp.com/veronicam
bgene sends brownie points to @veronicam and @davmey :sparkles: :thumbsup: :sparkles:
Dalton
@DaltonBell
Feb 19 2017 03:30
If i wanted people to send me a message and i wanted to be able to privately access it? Is that what I would use? Or could I get it to export to a google sheet?
Mihai Veronica
@VeronicaM
Feb 19 2017 03:32
@DaltonBell you would normally send it to a server side where you decide what you want to do with it, like sending that input value to someone,
what are you using on the server side ?
Dalton
@DaltonBell
Feb 19 2017 03:33
I'm sorry, I am brand new to this and I'm not quite sure what that is.
Walter V. Santos
@theunmanifested
Feb 19 2017 03:34
Help, please: On CodePen, how do we upload (or can we) an image so that I can use it on the FCC Build a Personal Portfolio challenge? Can I just use the img address to my FB profile photo?
Mihai Veronica
@VeronicaM
Feb 19 2017 03:34
@DaltonBell if you are using php the input values are send directly to the php page when you submit the form and you can access them from the SET variables array
Dalton
@DaltonBell
Feb 19 2017 03:34
Ok thank you
Mihai Veronica
@VeronicaM
Feb 19 2017 03:35
@theunmanifested you need to have premium account on codepen to upload images, you best option is to host your image somewhere and link to it
Walter V. Santos
@theunmanifested
Feb 19 2017 03:36
@VeronicaM Like Imgur?
Mihai Veronica
@VeronicaM
Feb 19 2017 03:37
@theunmanifested yeah or flicker, picassa
Walter V. Santos
@theunmanifested
Feb 19 2017 03:37
@VeronicaM Thanks!!
CamperBot
@camperbot
Feb 19 2017 03:37
theunmanifested sends brownie points to @veronicam :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @veronicam |http://www.freecodecamp.com/veronicam
Mihai Veronica
@VeronicaM
Feb 19 2017 03:37
maybe even dropbox
or google drive
Bigyan Karki
@bigyankarki
Feb 19 2017 03:37
what would be the best option to replace table?
should I replace table with div?
Mihai Veronica
@VeronicaM
Feb 19 2017 03:39
@bigyankarki why do you want to replace it ? Flexbox is a good option if you want to easily rearrange the elements
Bigyan Karki
@bigyankarki
Feb 19 2017 03:39
well @VeronicaM can you go through this?
Bgene
@Bgene
Feb 19 2017 03:43
how do I make my navigation bar follow me when I scroll down?
Bigyan Karki
@bigyankarki
Feb 19 2017 03:44
@BEBEDYDY fix it
you can do it by using class navbar-fixed-top
@Bgene
tagged the wrong person
Mihai Veronica
@VeronicaM
Feb 19 2017 03:46
@bigyankarki what do you mean if I can go through it ?
Daniel Aguila
@MxLooney
Feb 19 2017 03:47
how can I write a paragraph horizontally to the image
as in having the image on the left and a paragraph on the right but on the same horizontal level
Bigyan Karki
@bigyankarki
Feb 19 2017 03:47
i mean i used a loop to fill the table..but its not working :D
i think its because of table
Bgene
@Bgene
Feb 19 2017 03:49
@bigyankarki it's not working
Bigyan Karki
@bigyankarki
Feb 19 2017 03:50
class should be navbar navbar-default navbar-fixed-top
mamun
@fsdmamun
Feb 19 2017 03:50
hi
Mihai Veronica
@VeronicaM
Feb 19 2017 03:52
@bigyankarki you need to add rows to the table to have them displayed, you are updating just a single row in the table by using the id
Bgene
@Bgene
Feb 19 2017 03:52
@bigyankarki still not working... wanna see my pen?
Mihai Veronica
@VeronicaM
Feb 19 2017 03:52
here
$("#allUsers #logo").html("<img src= 'http://www.freeiconspng.com/uploads/error-icon-4.png'>")
mamun
@fsdmamun
Feb 19 2017 03:52
i need a backspace function for js calculator
Mihai Veronica
@VeronicaM
Feb 19 2017 03:53
@bigyankarki and your ids should be unique, i.e you can't have the same id for more than one thing like one td
Neous1
@Neous1
Feb 19 2017 03:54
Hello campers I'm working on the Title Case Sentence challenge of the of the basic algorithm and i worked it out to the point where i can get each word capitalize and then ..... blank. Please check out my code on codepen , and would appreciate any suggestions. http://codepen.io/Enyjay/pen/ZLNqMx?editors=0012
Aftab Parvez
@aftabparvez
Feb 19 2017 03:54
Hi everyone! How can I calculate the Device Pixel Ratio.. I’m having a hard time wrapping my head around Device Indipendent Pixels and CSS pixels..
mamun
@fsdmamun
Feb 19 2017 03:55
help me to fix the 'del' button of my js calculator pls
Gulsvi
@gulsvi
Feb 19 2017 04:00
@aftabparvez window.devicePixelRatio seems to work in all modern browsers http://caniuse.com/#search=window.devicePixelRatio
Aftab Parvez
@aftabparvez
Feb 19 2017 04:04
Screen Shot 2017-02-19 at 9.32.42 AM.png
Bigyan Karki
@bigyankarki
Feb 19 2017 04:04
@Bgene sure
Aftab Parvez
@aftabparvez
Feb 19 2017 04:05
Screen Shot 2017-02-19 at 9.32.42 AM.png
@SkyCoder01 Thank you so much. I’m not able to understand why for my screen it shows a CSS pixel ratio of 2.
CamperBot
@camperbot
Feb 19 2017 04:05
aftabparvez sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 246 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Bigyan Karki
@bigyankarki
Feb 19 2017 04:05
@VeronicaM so do you mean I need to add rows in the JS?
Aftab Parvez
@aftabparvez
Feb 19 2017 04:07
If I open dev tools and check the viewport size, it shows that the width is 2560 px.. Does that mean the DPR for my screen is 2 and it is scaling it up from 1280px?
Gulsvi
@gulsvi
Feb 19 2017 04:07
@aftabparvez I'm not sure why it would report 2 unexpectedly, maybe you can compare here: http://mydevice.io/devices/ ?
@aftabparvez Yes, that is my understanding. 2560 scaled up from 1280px, but it is complicated...
Bigyan Karki
@bigyankarki
Feb 19 2017 04:09
@SkyCoder01
can you go through this code?
Gulsvi
@gulsvi
Feb 19 2017 04:10
@bigyankarki Yes, you're still doing the same thing as earlier. Using a table for layout, which should be avoided, and overwriting your HTML every time you get new user data.
For example, this HTML is written to the same place every time you process a user:
      if (user.stream === null){
        $("#allUsers #logo").html("<img src= 'http://www.freeiconspng.com/uploads/error-icon-4.png'>")
        $('#allUsers #name').text(userName[i]);
        $('#offlineUsers #status').text("null");

        $("#offlineUsers #logo").html("<img src= 'http://www.freeiconspng.com/uploads/error-icon-4.png'>")
        $('#offlineUsers #name').text(userName[i]);
        $('#allUsers #status').text("null");
      }
Bigyan Karki
@bigyankarki
Feb 19 2017 04:11
@SkyCoder01 so should I use div instead of table? :)
Gulsvi
@gulsvi
Feb 19 2017 04:12
@bigyankarki What other alternative would there be?
Bigyan Karki
@bigyankarki
Feb 19 2017 04:12
hmm maybe divs? @SkyCoder01
Gulsvi
@gulsvi
Feb 19 2017 04:12
I think <div> is definitely an option - like using bootstrap grid for every row: <div class="row"></div>
with columns inside - one for the logo, another for the user, and a third for their status
Bigyan Karki
@bigyankarki
Feb 19 2017 04:14
can we divide columns inside col-md-4 class?
Gulsvi
@gulsvi
Feb 19 2017 04:14
When I did the twitch project, I came up with the HTML first and then worked on the javascript
I designed the user display first - then it was just a matter of using .append() for each user
image.png
All the HTML was created manually first, but everyone has a different approach on how they build their apps
Bigyan Karki
@bigyankarki
Feb 19 2017 04:17
:)
@SkyCoder01 can we divide column inside col-ms-4 too?
like col-md-1
?\
Gulsvi
@gulsvi
Feb 19 2017 04:19
Like nesting columns?
Bigyan Karki
@bigyankarki
Feb 19 2017 04:20
ya
You should know the bootstrap docs pretty well by now :)
I mean, according to https://www.freecodecamp.com/map, you should be close to 150 hours of front-end development by now
That's a lot of time to go through the bootstrap docs, play with the grid, understand how to make rows and columns
Bigyan Karki
@bigyankarki
Feb 19 2017 04:21
:D @SkyCoder01 i know bootstrap pretty well but was just making sure if there is anything as col-md-2 :D
Gulsvi
@gulsvi
Feb 19 2017 04:22
@bigyankarki One big help for me was studying this file: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css
You can search for col-md-2 and see what the CSS programming is for it
Start at the top and if you see a CSS property you don't recognize, look it up
95% of it though is just margin, padding, float, display, border - common stuff
Bigyan Karki
@bigyankarki
Feb 19 2017 04:26
:) thank you @SkyCoder01
CamperBot
@camperbot
Feb 19 2017 04:26
:cookie: 247 | @skycoder01 |http://www.freecodecamp.com/skycoder01
bigyankarki sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Gulsvi
@gulsvi
Feb 19 2017 04:27
No problem, good luck :+1: :)
Bigyan Karki
@bigyankarki
Feb 19 2017 04:29
:) where are you from @SkyCoder01
Darlene Tate
@Darlene1
Feb 19 2017 04:31
Would like some feedback for my tribute page please: http://codepen.io/D-Pens/pen/vgVgYP
the screen is quite small so yeah
Ken Haduch
@khaduch
Feb 19 2017 04:56
@Darlene1 - hi Darlene - the page looks pretty good. On a wide screen, though, the caption beneath the picture ( or the header level 6) is not centered. Also, if I narrow the browser window preety heavily, there are signs that you used some fixed-width margins - the text columns. get very narrow. You could investigate the bootstrap grid, which could be used to resolve some of those problems. Buut it is looking like a good start, and well on the way!
Jack Lyons
@JackEdwardLyons
Feb 19 2017 05:07
hey guys im having truble with the comparison function in my simon game
wondering if anyone could help... when I run my comparison I get a callStack error
here is my code
function compareClicks() {
  let computerSequence = gameConfig.moves.computer,
      humanSequence    = gameConfig.moves.human;

  if (computerSequence.length === humanSequence.length) {
    const comparison = computerSequence.every((tile, index) => {
      return tile === humanSequence[index];
    });

    if (comparison) {
      setMessage('message-box', 'Nice work!');
      addToSequence();
      playSequence();
      console.log(gameConfig.moves);
    }
  } else {
    compareClicks();
//    setMessage('message-box', 'You Lose!');
//    restartGame();
  }
}
i get this error when comparing Maximum call stack size exceeded
Ken Haduch
@khaduch
Feb 19 2017 05:10
@JackEdwardLyons - are you using this as a callback function or something? Actually, it looks like you are using it recursively, since you are calling it again within the function. That is probably recursion that doesn't have a stop condition, I would bet?
Jack Lyons
@JackEdwardLyons
Feb 19 2017 05:10
yeah, i am calling it again... but how else should i do it
cause i want to compare each item
@khaduch I'm not sure, beacuse it works for one item, but after that it breaks
should i do a while loop or something?
Ken Haduch
@khaduch
Feb 19 2017 05:16
@JackEdwardLyons - it's hard to make a quick guess about what you are trying to do there. It seems that a plausible sequence for this to go into infinite recursion is that the function gets called, and if the first if test that you have doesn't match, then you fall through to the last else (well, the only else) and call it again, with probably teh same result?
Jack Lyons
@JackEdwardLyons
Feb 19 2017 05:17
well... yeah, i thought, because the computer array, for example, sets 2 moves...
then the human goes, but the comparison needs to run only AFTER the human has made their two moves... hence the checking for the array length of each...
does that make sense? @khaduch
i need some sort of "waiting" function, to wait until the human moves length is the same as the computers length
or maybe im thinking about it the wrong way
because it's not so much about the length initially... because if the first click is wrong then it should alert and error straight away
something more along these lines @khaduch
function compareClicks() {
  let computerSequence = gameConfig.moves.computer,
      humanSequence    = gameConfig.moves.human;

    // if (computerSequence.length === humanSequence.length) {
    const comparison = computerSequence.every((tile, index) => {
      return tile === humanSequence[index];
    });

    if (humanSequence.length !== computerSequence.length) {
      // allow human to catch up
    }

    if (comparison) {
      setMessage('message-box', 'Nice work!');
      addToSequence();
      playSequence();
      console.log(gameConfig.moves);
    } else {
      alert('you lose');
    }
}
Ken Haduch
@khaduch
Feb 19 2017 05:22
@JackEdwardLyons - it might make sense, because you have to wait for the human to make the moves, but you also have to detect when an incorrect move is made. It's just that you cannot call the same function again and expect different results? So, really, you have to compare as the player is clicking along, in case they made an incorrect move, right? You just cannot have a recursive call that will run ad infinitum
Jack Lyons
@JackEdwardLyons
Feb 19 2017 05:22
yeah... how do i make a function to allow the human to "catch up"?
Ken Haduch
@khaduch
Feb 19 2017 05:23
that looks like it might be more reasonable - but I'm saying that without any in-depth analysis...
Jack Lyons
@JackEdwardLyons
Feb 19 2017 05:23
yeah... that's fine, but at leas you kinda get an idea
this currently gets fired after every human click
function humanClick(e) {
  const clickedTile = e.target.offsetParent
  buzz(clickedTile);
  // push the human move into the human array
  gameConfig.moves.human.push(clickedTile);

  console.log("game moves", gameConfig.moves);
  compareClicks();
}
Ken Haduch
@khaduch
Feb 19 2017 05:28
@JackEdwardLyons - well, just thinking about it for a minute, you don't really need to have a sequence that runs through all of the human clicks and compares to the computer - that should happen with each human click? Compare each one to determine if a false move was made. You need a function to play all of the computer-generated sequence at some times, but the human clicks should be handled one at a time?
Jack Lyons
@JackEdwardLyons
Feb 19 2017 05:29
so, like, on each human click, compare the computer array at the first index, then remove it, then compare again?
so something in pseudo code
if ( humanClick[0] === computerClick[0]) {

  compareResult();
  computerClick.shift();
}
@khaduch -- im not exactly sure...
ill try with a while loop
Jack Lyons
@JackEdwardLyons
Feb 19 2017 05:38

still, not exactly...but do you think I'm on the right track?

function compareClicks(e) {
  let computerSequence = gameConfig.moves.computer,
      humanSequence    = gameConfig.moves.human;


  while (computerSequence.length) {
    const comparison = computerSequence.every((tile, index) => {
      return tile === humanSequence[index];
    });

    if (comparison) {
      setMessage('message-box', 'Nice work, keep going!');

    } else {
      alert('you lose');
    }

    computerSequence.shift();
  }

  addToSequence();
  playSequence();
  console.log(gameConfig.moves);
}

@khaduch

Ken Haduch
@khaduch
Feb 19 2017 05:38
@JackEdwardLyons - you don't really want to remove it, as you might need to play the entire sequence again, doesn't it work that way in some scenario? Oh, wait, the human player has to run through the entire sequence each time, huh? (I haven't done this one yet, BTW). So I think that it has to be event-driven by the human clicking, and keeping an index or count of which move is the current one, and when the human clicks, it triggers a check to the current move in the computer's list, and when you get to the end of the computer's list, then you add a new one and play the entire list again and include the new one? So there is a "play everything" mode, and then a click-at-a-time mode...
Jack Lyons
@JackEdwardLyons
Feb 19 2017 05:39
hmm yeah
ok
ivanivan1996
@ivanivan1996
Feb 19 2017 05:41
Why my weather app works in Microsoft Edge only but not other browser?
Can anyone help?
http://codepen.io/ivanivan1996/pen/wgZLJm
Ken Haduch
@khaduch
Feb 19 2017 05:41
@JackEdwardLyons - well, I have to get off the computer now - I hope I helped a bit? Good luck with it, don't get too frustrated - step away from it now and then!
@ivanivan1996 - I'll take a quick look at it, runnign in firefox
Jack Lyons
@JackEdwardLyons
Feb 19 2017 05:42
thanks mate @khaduch , i'm so damn close to finishing!!
CamperBot
@camperbot
Feb 19 2017 05:42
jackedwardlyons sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2497 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Feb 19 2017 05:48

@ivanivan1996 - I got some output to the screen in firefox? It looks like this:

43
-72
http://api.openweathermap.org/data/2.5/weather?lat=43&lon=-72&APPID=0f8aa09f1898474caa0d93a31ace5e84
success
Clouds
Sok Kwu Wan
19
66
HK

It looksl ike you have a fixed lat and longitude? So that might be correct?

khaduch @khaduch - going off the computer for now... happy coding to everyone!
ivanivan1996
@ivanivan1996
Feb 19 2017 05:52
yes i fixed it for testing. But when i use other browser like chrome and safari, i cannot get the weather condition with the fixed lat and lon
@khaduch
Ken Haduch
@khaduch
Feb 19 2017 06:04
@ivanivan1996 - I saw your note and came back to try it in Chrome - you're right, it is not working there... Let me look at it.
Johnny
@jtan3
Feb 19 2017 06:06
@ivanivan1996 navigator.geolocation doesn't work over http, but you could use https://ipinfo.io/json or a similar service
Ken Haduch
@khaduch
Feb 19 2017 06:07

@ivanivan1996 - oh, in Chrome, you cannot use the geolocation on an http:// connection. It just doesn't work anymore. In the devtools console, I see this error: getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details. With the link https://goo.gl/rStTGz to explain why.

There is discussion in the freecodecamp forum about ways to change the project to make it work: freeCodeCamp/freeCodeCamp#7853 and maybe this one, too: freeCodeCamp/freeCodeCamp#9145 - you can scan through those, if you haven't seen them, and see if they have any insight to offer?

khaduch @khaduch - now going offline again for real this time... :)
artjia
@artjia
Feb 19 2017 06:17
hi guys, do you mind to take a look at this calculator example. https://jsbin.com/tokeco/edit?html,css,output
I've try to use vertical-align for text inside button but it didn't work also how to make zero and . properly shown below 1,2,3 button?
Erik Moore
@averagebeard
Feb 19 2017 06:21
Can someone please help me with a loop in my Twitch.tv project? I'm struggling to get it to run through each element in my array. It just picks one element and runs it 12 times. http://codepen.io/Averagebeard/pen/bgPGer
artjia
@artjia
Feb 19 2017 06:37
@averagebeard your code seems ok. it did iterate all element. however you seems only connect to twitch server once..
Erik Moore
@averagebeard
Feb 19 2017 06:46
So how do I get it to connect for each element?
I thought my for loop would handle that for each separate time.
Guillaume
@gbarthere
Feb 19 2017 06:51
Which ressource would you suggest to learn enough about bootstrap for the "Built a tribute page" project?
Erik Moore
@averagebeard
Feb 19 2017 06:59
@artjia for your calculator, what you need to do is reorder your buttons and give a negative margin to your equals button. Put your equals sign as your last button and then give it a negative margin-top: of -58px. That fixes it.
badalsaibo
@heyDante
Feb 19 2017 07:00
@gbarthere Quentin Watt on Youtube
artjia
@artjia
Feb 19 2017 07:00
@averagebeard awesome I'll try later on. I've have fork your code. and just check it all and your code did connect to server 12 time
@averagebeard so the issue must be on display routine, but dunno I'm checking again
Erik Moore
@averagebeard
Feb 19 2017 07:04
@artjia Thanks a lot. Appreciate it. Let me know if you find anything.
Guillaume
@gbarthere
Feb 19 2017 07:16
@heyDante Thanks
CamperBot
@camperbot
Feb 19 2017 07:16
gbarthere sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 450 | @heydante |http://www.freecodecamp.com/heydante
artjia
@artjia
Feb 19 2017 07:35
@averagebeard hey you still there?
Neous1
@Neous1
Feb 19 2017 07:36
@bbowen90 yes you can i skipped jQuery initially
Erik Moore
@averagebeard
Feb 19 2017 07:36
@artjia yessir
bleka
@bleka
Feb 19 2017 07:44
Hi, I'm trying to make my user story and am just trying to get the layout ready. I have this: https://codepen.io/bleka/full/MJRNMm/ . My problem is that a bit where the image goes out of it's container when being resized. How would I fix this?
Chris Jantzen
@XXiphias
Feb 19 2017 07:50
@bleka Set md to 8 for the left hand column. and maybe add lg-9 in
eh.. nvm :/
bleka
@bleka
Feb 19 2017 07:52
yeah @XXiphias haha
Chris Jantzen
@XXiphias
Feb 19 2017 07:57
alright, I have a better fix for you @bleka
Give your <p> that is to the left of the image a class
and give that classs display: inline-block;
then give it width: calc(100% - 360px);
and give .img { float: right; }
its a bit hackish but it works
Chris Jantzen
@XXiphias
Feb 19 2017 08:02
oh, and make the outerdivs column -12 of course
bleka
@bleka
Feb 19 2017 08:06
@XXiphias that working for you? for me the image is just overlapping the text.
Chris Jantzen
@XXiphias
Feb 19 2017 08:08
@bleka sorry, move the img into the save div that the intro p is in
and you forgot to add width: calc(100% - 360px); to the p
bleka
@bleka
Feb 19 2017 08:09
move the img into col-md-8?
Chris Jantzen
@XXiphias
Feb 19 2017 08:09
@HindochaPro use the % symbol in place of /. Aka 6 % 5
ya @bleka . And make col-md-8 into md-12
and delete the div you dont need
you're just putting the p and img side by side in 1 div
and using plain css to align them rather than bootstrap
Rishi Hindocha
@HindochaPro
Feb 19 2017 08:09
ok thanks @XXiphias
CamperBot
@camperbot
Feb 19 2017 08:09
hindochapro sends brownie points to @xxiphias :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @xxiphias |http://www.freecodecamp.com/xxiphias
Chris Jantzen
@XXiphias
Feb 19 2017 08:09
im not sure how to do it better in bootstrap im afraid
Mac
@itchick85
Feb 19 2017 08:14
working on page two of my protfolio page I put the url in for my second image it doesn't show and I can't scroll
Chris Jantzen
@XXiphias
Feb 19 2017 08:14
if you want to get a little bit fancier and make the text flow around the image so you can utilize more screen space while keeping it looking nice, check out the top answer in this stack overflow @bleka: http://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using-html-css
that said what I gave you earlier will work as well, this just might be nicer
bleka
@bleka
Feb 19 2017 08:17
thanks for your help @XXiphias :D
CamperBot
@camperbot
Feb 19 2017 08:17
bleka sends brownie points to @xxiphias :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @xxiphias |http://www.freecodecamp.com/xxiphias
Dany Din
@danydin
Feb 19 2017 08:20
Hello guys,
Few questions regarding my code:
http://plnkr.co/edit/KDjzNtEIwjOrySZgotb5?
  1. Why if I write the ul.textContent = ''; outside the eventListener it won't reset the ul element?
  2. How I make the li to update just last li row and not all the li elements
  3. How I bind the eventListener to run before the function as right now it starts to listen from the second submit-button click .
  4. How I make it to work inside an object
    Thanks!!
Johnny
@jtan3
Feb 19 2017 08:24
@itchick85 add height to pagetwo and I don't think you want to an background-image in your entire body tag.
Mac
@itchick85
Feb 19 2017 08:28
I just tried it and it scrolled but covered my first image
Johnny
@jtan3
Feb 19 2017 08:29
@itchick85 body means the entire page
@itchick85 try putting the first background in pageOne.
Mac
@itchick85
Feb 19 2017 08:42
@jtan3 thanks for the tip now I can finish the last two pages tomorrow goodnight
CamperBot
@camperbot
Feb 19 2017 08:42
itchick85 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @jtan3 |http://www.freecodecamp.com/jtan3
ESLMiguel
@ESLMiguel
Feb 19 2017 08:56
Hello campers! First time in the front end room :fireworks: working on my random quote generator and its quite difficult
Erik Moore
@averagebeard
Feb 19 2017 08:58
What are you having trouble with?
ESLMiguel
@ESLMiguel
Feb 19 2017 08:59
@averagebeard nothing specific, its just taking quite a while
@averagebeard heres my pen if you wanna take a look
considering this is only the second webpage i have ever made (first being the tribute page) i think im doing ok. it was fun learning some of the css animation stuff. the json/ajax is whats racking my brain a bit
Erik Moore
@averagebeard
Feb 19 2017 09:03
@ESLMiguel I totally understand that. I had/still have trouble getting the APIs to work properly. After you complete that one it gets a lot easier.
ESLMiguel
@ESLMiguel
Feb 19 2017 09:04
thats what i was hoping to hear. although some people said the apis for the weather one were really confusing/difficult
i wanted to do my with education quotes, and the best thing i found was a raw .json file
Erik Moore
@averagebeard
Feb 19 2017 09:05
Setting up the weather API is a little tricky. I found the quote machine more difficult as it was the first time working with JSON.
There are a lot of APIs out there.
The one I found made things really simple for me.
Feel free to take a look.
The data is a lot more simple and helped me out while I tried to figure out how and what to pull.
ESLMiguel
@ESLMiguel
Feb 19 2017 09:07
you used the forismatic one?
Erik Moore
@averagebeard
Feb 19 2017 09:07
I did.
I found it a lot simpler.
And it has a really large supply.
ESLMiguel
@ESLMiguel
Feb 19 2017 09:08
cool. i found a reddit post about it. i really wanted an education one, so i didnt have a large selection
i just gotta keep at it
yours came out really well
Erik Moore
@averagebeard
Feb 19 2017 09:09
That's cool that you're trying to make it more specific and unique. It's really rewarding once you finally figure it out.
Good luck.
Feel free to message if you have any troubles. Might be able to give you a hand.
Adrian Warholm
@adrianwarholm
Feb 19 2017 09:10
Is anybody online currently?
ESLMiguel
@ESLMiguel
Feb 19 2017 09:10
thanks so much @averagebeard :smiley_cat:
CamperBot
@camperbot
Feb 19 2017 09:10
eslmiguel sends brownie points to @averagebeard :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @averagebeard |http://www.freecodecamp.com/averagebeard
Mohamed Osama Khan
@Assaonator
Feb 19 2017 09:11
@averagebeard nice...
Adrian Warholm
@adrianwarholm
Feb 19 2017 09:11
Is anyone here a developer/freelancer or was once a developer/freelancer?
Erik Moore
@averagebeard
Feb 19 2017 09:14
@Assaonator you're the guy who built the demo! I tried to model mine after yours. Couldn't quite get it exactly though.
Dany Din
@danydin
Feb 19 2017 09:19
Hello guys,
Few questions regarding my code:
http://plnkr.co/edit/KDjzNtEIwjOrySZgotb5?
  1. Why if I write the ul.textContent = ''; outside the eventListener it won't reset the ul element?
  2. How I make the li to update just last li row and not all the li elements
  3. How I bind the eventListener to run before the function as right now it starts to listen from the second submit-button click .
  4. How I make it to work inside an object
    Thanks!!
achudoz
@achudoz
Feb 19 2017 09:30
Hi, would anyone happen to know how to make my (pretty cool!) spinning dice animated button finish the animation even when cursor-hover is no longer the case? It is a very simple animation and would look better if it always finished.
http://codepen.io/achudoz/pen/wgLBBE?editors=1100#0
I have ran into a js solution but I don't want to pollute my js with style-related stuff. Hoping for a css solution
yfreifer
@yfreifer
Feb 19 2017 09:39
anyone on the tribute page? I can't seem to insert wells on my page
Erik Moore
@averagebeard
Feb 19 2017 09:39
@achudoz what would you think about having the dice rotate back if they don't hover for long enough?
yfreifer
@yfreifer
Feb 19 2017 09:41
blob
i'm trying to add wells to make my page look similar to quincy's but its not uploading it.
Guillaume
@gbarthere
Feb 19 2017 09:52
I'm having issue with the tribute page as well. Even if I copy paste Quincy code, the result is totally different
Dany Din
@danydin
Feb 19 2017 09:54
Hello guys,
Few questions regarding my code:
http://plnkr.co/edit/KDjzNtEIwjOrySZgotb5?
  1. Why if I write the ul.textContent = ''; outside the eventListener it won't reset the ul element?
  2. How I make the li to update just last li row and not all the li elements
  3. How I bind the eventListener to run before the function as right now it starts to listen from the second submit-button click .
  4. How I make it to work inside an object
    Thanks!!
Guillaume
@gbarthere
Feb 19 2017 10:00
Don't even understand how to embed my CodePen code xD...
Neous1
@Neous1
Feb 19 2017 10:02
this one took me days to figure it out , so here is my badge of persistence
blob
Guillaume
@gbarthere
Feb 19 2017 10:03
Screen Shot 2017-02-19 at 6.02.28 PM.png
Why H1 isn't centered?
Neous1
@Neous1
Feb 19 2017 10:04
@gbarthere paste the url of your pen
@gbarthere GuiLou c'est toi?
Guillaume
@gbarthere
Feb 19 2017 10:06
@Neous1 ? Pas la bonne personne je pense
Neous1
@Neous1
Feb 19 2017 10:12
@gbarthere je plaisantes , tous les Guillaume son des Guillou (presque)
Guillaume
@gbarthere
Feb 19 2017 10:15
@Neous1 Une idée pour mon problème? Je ne comprends pas pourquoi le titre ne se centre pas.
Neous1
@Neous1
Feb 19 2017 10:18
have you tried aligning it horizontally?
Philipp Scholz
@philipp32
Feb 19 2017 10:19
Hey, is there a way to bind my delete icon to my search bar so it moves with it together in responsive design? http://codepen.io/philipp32/full/QdrgYR/
Guillaume
@gbarthere
Feb 19 2017 10:20
@Neous1 I don't get your meaning. Following tuto or even the beginning of Quincy code, the title should be centered. But it doesn't. I don't understand why
alpox
@alpox
Feb 19 2017 10:24
@philipp32 Sure there is
Philipp Scholz
@philipp32
Feb 19 2017 10:24
@alpox And what would it be? Someone suggested Bootstrap form control classes.
alpox
@alpox
Feb 19 2017 10:24
@philipp32 Where exactly do you want your button to be?
jamiebutt16
@jamiebutt16
Feb 19 2017 10:25
hey guys im trying to do my bootstrap personal portfolio page and cant seem to get my nav-links next to each other rather than one below the other.. can any one help please https://codepen.io/jamiebutt16/pen/VPVKEK?editors=1010
alpox
@alpox
Feb 19 2017 10:25
@philipp32 Should it be there out in nowhere? :D
Philipp Scholz
@philipp32
Feb 19 2017 10:25
@alpox In the right side of the search bar. And yes. I can do the appearing part but not the positioning part. :/
@jamiebutt16 You have href=# in there.
You need to add the link to which you want it to be referred.
ESLMiguel
@ESLMiguel
Feb 19 2017 10:26
alpox
@alpox
Feb 19 2017 10:27
@philipp32
#delete {
    cursor: pointer;
    position: relative;
    right: 35px;
    top: 5px;
}
jamiebutt16
@jamiebutt16
Feb 19 2017 10:29
@philipp32 but i dont want to link it to anything just yet.. i just want the home, features, about etc to be positioned next to each other in the navbar rather than below each other..
Philipp Scholz
@philipp32
Feb 19 2017 10:30
@jamiebutt16 then you can take the float:left or the display: inline;
jamiebutt16
@jamiebutt16
Feb 19 2017 10:30
in the css section?
Philipp Scholz
@philipp32
Feb 19 2017 10:31
@alpox thanks a lot. Could you explain to me why that works and not margin?
CamperBot
@camperbot
Feb 19 2017 10:31
philipp32 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 787 | @alpox |http://www.freecodecamp.com/alpox
Philipp Scholz
@philipp32
Feb 19 2017 10:31
@jamiebutt16 Yes.
alpox
@alpox
Feb 19 2017 10:33
@jamiebutt16 Replace navbar-fixed-top with navbar-toggleable-md
Guillaume
@gbarthere
Feb 19 2017 10:33
Is something wrong with my setting of Code-Pen? Copy/pasting Quincy code and the effect is different:
http://codepen.io/GuillaumeB/pen/ZLdzZo/
alpox
@alpox
Feb 19 2017 10:34
@philipp32 I think margin works too - relative is made for relative positioning though like this one :D
Philipp Scholz
@philipp32
Feb 19 2017 10:34
Oh, thanks a lot. :)
jamiebutt16
@jamiebutt16
Feb 19 2017 10:34
:( @alpox thankyou you bloody legend!
CamperBot
@camperbot
Feb 19 2017 10:34
jamiebutt16 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 788 | @alpox |http://www.freecodecamp.com/alpox
jamiebutt16
@jamiebutt16
Feb 19 2017 10:34
thanks for your help too @philipp32
CamperBot
@camperbot
Feb 19 2017 10:34
jamiebutt16 sends brownie points to @philipp32 :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @philipp32 |http://www.freecodecamp.com/philipp32
Philipp Scholz
@philipp32
Feb 19 2017 10:35
@jamiebutt16 You're welcome. :)
alpox
@alpox
Feb 19 2017 10:36
@philipp32 Well actually the margin-top does not what it should in this case because it moves the whole thing - thats because the whole container takes more space with that while with position: relative; and left - top, you don't change anything about the elements boundaries
Philipp Scholz
@philipp32
Feb 19 2017 10:37
@alpox Thanks a lot. Just another question: My function gets triggered by pressing the ENTER-button. I want it to quit after I've pressed the button once. How can I accomplish that?
CamperBot
@camperbot
Feb 19 2017 10:37
philipp32 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: philipp32 already gave alpox points
alpox
@alpox
Feb 19 2017 10:37
@jamiebutt16 The problem you were having was that navbar-fixed-top comes from Bootstrap version 3 - while codepen switched to bootstrap version 4 so you have to use the new docs:
https://v4-alpha.getbootstrap.com/components/navbar/
@philipp32 Can you clarify? After which button press - what has to be quit?
jamiebutt16
@jamiebutt16
Feb 19 2017 10:39
i thought it might have been something like that thanks @alpox
CamperBot
@camperbot
Feb 19 2017 10:39
:warning: jamiebutt16 already gave alpox points
jamiebutt16 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
Philipp Scholz
@philipp32
Feb 19 2017 10:40
http://codepen.io/philipp32/full/QdrgYR/
@alpox You're insight in all of this is amazing. :)
If you press ENTER once everything works fine. If you press ENTER for a second time it repeats the function which is the thing I don't want
alpox
@alpox
Feb 19 2017 10:40
@alicankaralar That question belongs to the HelpJavascript channel
alican karalar
@alicankaralar
Feb 19 2017 10:41
@alpox alright
alpox
@alpox
Feb 19 2017 10:42
@philipp32 Well i would think that its okay that it repeats the function - but you would have to clear the content of the html before adding new one.
Otherwise you could search only once
Philipp Scholz
@philipp32
Feb 19 2017 10:43
I want to use the delete button to reset everything.
So once you press my delete button everything resets and you can start from the beginning.
alpox
@alpox
Feb 19 2017 10:44
@philipp32 Aha so no search possible until the reset button gets pressed?
Philipp Scholz
@philipp32
Feb 19 2017 10:44
That was my idea. You search once. Then you press the delete button. Then you search again.
Basic setup uf that.
What you mainly use is the jquery function .one which registers an event handler for only one execution and throws it away after that
So when one presses the reset button, the event handler has to be set up again
Philipp Scholz
@philipp32
Feb 19 2017 10:49
I've stumbled upon the .one() thing as well.
@alpox Thank you again. Seems a clever way of doing it. :)
CamperBot
@camperbot
Feb 19 2017 10:49
philipp32 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: philipp32 already gave alpox points
Dany Din
@danydin
Feb 19 2017 10:53
Hello guys,
Few questions regarding my code:
http://plnkr.co/edit/KDjzNtEIwjOrySZgotb5?
  1. Why if I write the ul.textContent = ''; outside the eventListener it won't reset the ul element?
  2. How I make the li to update just last li row and not all the li elements
  3. How I bind the eventListener to run before the function as right now it starts to listen from the second submit-button click .
  4. How I make it to work inside an object
    Thanks!!
alpox
@alpox
Feb 19 2017 10:56
@danydin
function displayItems(){
  var button = document.getElementById('submit');
  var labelCat1 = document.getElementById('labelCat1');
  var labelCat2 = document.getElementById('labelCat2');
  var description1 = document.getElementById('textInput1');
  var ul = document.querySelector('ul');
  var li = document.createElement('li');
  ul.textContent = '';
  li.textContent = labelCat1.value + labelCat2.value + description1.value;
  ul.appendChild(li);
  console.log(labelCat1);
  console.log(labelCat2.value);
  console.log(description1.value);
}
Should work like this
Dany Din
@danydin
Feb 19 2017 10:57
sec mate let me check @alpox
alpox
@alpox
Feb 19 2017 10:57
For point 1.
I didn't quite understand point 2. :-) where do you have such an update?
Dany Din
@danydin
Feb 19 2017 10:57
ah yes thats i've figured but i just watned to undersatnd why when its outside the eventListener it wont remove it
alpox
@alpox
Feb 19 2017 10:58
Its outside of the eventlistener now, and it removes it @danydin
Dany Din
@danydin
Feb 19 2017 10:58
i dont have cuz i forgot how to add it
i tried to include a new var
but then it change all the li elemetns
brcause you've removed the event listener ;)
but if u add the eventlistener it doesnt remove it for some reasons just wanted to understand it for knowlege purposes
alpox
@alpox
Feb 19 2017 10:59
@danydin it does remove it even then - it just removes it and adds a new li element as many times as you pressed the submit button before ;-)
If you add an eventlistener once and then click on a button - the function added gets executed on each click.
If you add an eventlistener twice - this function gets executed twice on one click
Dany Din
@danydin
Feb 19 2017 11:00
ah true :smile:
alpox
@alpox
Feb 19 2017 11:01
And now, everytime you click on the button, you add a new eventlistener
Dany Din
@danydin
Feb 19 2017 11:01
yes because it doesnt run the whole function just the event listener
alpox
@alpox
Feb 19 2017 11:01
So you add as many elements as you clicked on the button
It does run the whole function
But also as many eventlisteners as you added before
So if you clicked the button 3 times before and you click again, what happens is:
displayItems --> event --> event --> event
Dany Din
@danydin
Feb 19 2017 11:04
its adding eventlistener to the background every click on the button?
alpox
@alpox
Feb 19 2017 11:06
@danydin yes
Dany Din
@danydin
Feb 19 2017 11:06
oh i didn't know that.. thats why if i clicked 4 times it show it multiple times
interesting!
alpox
@alpox
Feb 19 2017 11:06
Because thats what you do when you do window.addEventListener
Dany Din
@danydin
Feb 19 2017 11:07
i thought it keeps just 1 as the functions doesnt duplicate itself
alpox
@alpox
Feb 19 2017 11:07
eventlisteners always stack
Dany Din
@danydin
Feb 19 2017 11:07
i see i see @alpox thanks!! what about my other questions
CamperBot
@camperbot
Feb 19 2017 11:07
danydin sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 789 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Feb 19 2017 11:07
You would have to remove the old one and add a new one if you want the other behaviour ^^
var lastLi = document.querySelector("li:last-child");
  lastLi.textContent = "Test";
This is about your 2. question
it selects the last li element
Dany Din
@danydin
Feb 19 2017 11:08
oh and then it will update just it
cool :D
alpox
@alpox
Feb 19 2017 11:09
For your 3. question - well just get rid of the eventlistener
4. -- what object?
Dany Din
@danydin
Feb 19 2017 11:09
you can also use it parent element to update the last li through target prop right?
alpox
@alpox
Feb 19 2017 11:09
target prop? I don't think so
Dany Din
@danydin
Feb 19 2017 11:09
i want to make it looks nicer so i want put it all inside an object just for orgainsation purposes
alpox
@alpox
Feb 19 2017 11:10
You could do parent.children[parent.children.length - 1] to get the last child
What kind of object.
Dany Din
@danydin
Feb 19 2017 11:10
ah ok cool !
just a random one so ill have it all inside object
and not like that in my code
alpox
@alpox
Feb 19 2017 11:10
Hmm well i distinguish normal javascript objects and classes
Dany Din
@danydin
Feb 19 2017 11:11
i guess it called mvc?
alpox
@alpox
Feb 19 2017 11:11
(ES6)
Dany Din
@danydin
Feb 19 2017 11:11
yes
not necssary es6
alpox
@alpox
Feb 19 2017 11:11
Oh wait mvc is way out on that scale
MVC is a pattern used for UI abstractions with several layers
Model-View-Controller.
There you have the model component (Your data), the view which shows the data from the model and the controller which defines actions and communicates between the model and the view
Unless you have a big application its not worth it to hold to that structure
Dany Din
@danydin
Feb 19 2017 11:12
oh really
i thoughts its the best practice which makes it pretty orgainised
alpox
@alpox
Feb 19 2017 11:13
Be careful with best
best is what best fits your case.
There is something like overengineering out there :-)
Dany Din
@danydin
Feb 19 2017 11:13
ya but writing it inside object is always good isnt it
alpox
@alpox
Feb 19 2017 11:14
Also, to achieve proper MVC you usually need a proper framework which makes you be able to use it in a streight forward manner
Dany Din
@danydin
Feb 19 2017 11:14
i see well im not yet into frameworks
btw what do you suggest angular 2 or react :p
for the future
alpox
@alpox
Feb 19 2017 11:15
@danydin Also in that case there are quite different opinions there. OOP languages hold everything in objects ofc. because they are organized like that.
Objects can also do bad things to your organisation in some cases though.
Atm i as example work with ELM on the frontend - a functional language which compiles to javascript and uses a fully functional approach.
No objects or anything - just pure functions
And its still one of the best approaches i've seen
Hmm Angular 2 and React fulfill 2 quite different things
Dany Din
@danydin
Feb 19 2017 11:16
oh really :x
alpox
@alpox
Feb 19 2017 11:16
Angular 2 is a fully-fledged framework with everything around (attention: vendor-lock-in)
React on the other hand is a simple tool to handle self-updating components
And it does nothing more
Dany Din
@danydin
Feb 19 2017 11:17
ah more like jquery in a bit advanced waY?
alpox
@alpox
Feb 19 2017 11:17
You usually use react together with other toolings
Nope jquery is again another thing. Jquery is just a library for simplifying DOM access
And some few other simplifications like simple ajax calls
But its nowadays bit outdated - i myself don't use it anymore
Dany Din
@danydin
Feb 19 2017 11:18
yes but how it helps can be seen as similar to what jquery does just for more advanced manipulation
oh really, so vanilla or other tools
also i would like to see how elm code looks as it sound confusing that it all just functions
alpox
@alpox
Feb 19 2017 11:19
Well with react you don't use any DOM manipulations yourself anymore
Dany Din
@danydin
Feb 19 2017 11:19
i guess lots of promises , callbacks etc is being used there right (in elm)
alpox
@alpox
Feb 19 2017 11:20
React uses a virtual-DOM, means you define the html in javascript - which composes a virtual DOM, no real browser DOM.
React then takes the state of your application (Your data) and injects it to the virtual DOM to create the exact representation.
Then it diffs the virtual-dom with the real DOM and makes updates where needed
Dany Din
@danydin
Feb 19 2017 11:20
oh the js code interpert to html code interseting
alpox
@alpox
Feb 19 2017 11:20
This leads to the fact that its even bad design to do DOM-manipulations yourself
ELM works the same way. Actually react and an often used state manager for react are designed after elm
ELM is no javascript anymore - so no promises and no callbacks etc. :-) A functional language like this works in quite different ways than javascript since it allows no state manipulations except in one specific place
Dany Din
@danydin
Feb 19 2017 11:23
how it works with no manipulation then
Basic example
Of an elm app
in elm, the only place where a state change can happen is in the update function
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1
And you don't update the state yourself - the elm runtime does. You just return a new value
Dany Din
@danydin
Feb 19 2017 11:25
oh it looks really abstract way but lots to remmber because there is no really a specifc rules to follow or im wrong?
alpox
@alpox
Feb 19 2017 11:25
Since in elm there are nothing than pure functions. This means: Using a function, to the same input you give, there will always be exactly the same output.
There surely are rules to follow :D
Quite more than javascript
But well - i don't think you will need elm sometime, so i just wanted to tell that there are other architectures which work as well
Dany Din
@danydin
Feb 19 2017 11:26
oh haha, and what is the best uses for elm - what kind of web-apps
alpox
@alpox
Feb 19 2017 11:26
Without objects
You can do all kinds of apps with elm
ESLMiguel
@ESLMiguel
Feb 19 2017 11:27
Finished my quote generator. Any feedback would be appreciated
http://codepen.io/nthd3gr33/pen/dNEKLb
Dany Din
@danydin
Feb 19 2017 11:27
ya but its not really js anymore
alpox
@alpox
Feb 19 2017 11:27
@ESLMiguel Looks good :-) you could adjust the background though
@danydin Well no :D it compiles to javascript though
ESLMiguel
@ESLMiguel
Feb 19 2017 11:28
@alpox you mean the background image?
Dany Din
@danydin
Feb 19 2017 11:28
very nice that u didnt used jquery
alpox
@alpox
Feb 19 2017 11:28
The advantage you get from that its not javascript is that you'll never see a runtime error or really strange behaviour with it since it has totally good type-checks. It just wont build your application until you thought about everything :D
ESLMiguel
@ESLMiguel
Feb 19 2017 11:28
@danydin i pushed myself
alpox
@alpox
Feb 19 2017 11:28
@ESLMiguel Well it repeats itself when you change the size of the screen
ESLMiguel
@ESLMiguel
Feb 19 2017 11:28
:smiley_cat:
@alpox ohhhh
@alpox hadnt checked it on a small screen
i just need to set it to fixed position, correct?
Dany Din
@danydin
Feb 19 2017 11:29
oh thats sound great @alpox
alpox
@alpox
Feb 19 2017 11:30
html, body {
  background-image: url('http://wall.rimbuz.com/wp-content/uploads/Black-Texture-Cool-Backgrounds.jpg');
    background-size: cover;
  color: white;
  font-family: 'Oleo Script', cursive;
  height: 100%;
}
@ESLMiguel You were going right, but the body didn't stretch to full height.
So here i added height: 100%; and html
ESLMiguel
@ESLMiguel
Feb 19 2017 11:31
html...so ingenious (im still very new)
i was thinking about making a slide in menu on the top left. maybe will save it for later when i get stuck on another project. i have loved learning about css animations. really fun stuff
i will make your suggested changes now
alpox
@alpox
Feb 19 2017 11:33
A slide menu like? :D
Dany Din
@danydin
Feb 19 2017 11:33
btn2.addEventListener("click", function() {
  window.open('https://twitter.com/intent/tweet?hashtags=education&related=quotes&text=' + '"' + shownQuote + '" ' + shownAuthor)
});  //opens new window to tweet

you don't have to call it to get it run as its not inside a function righT?

`

ESLMiguel
@ESLMiguel
Feb 19 2017 11:33
@alpox like i hide it off the screen and slide it in using transitions
it would take a few hours to add it, and i am ready to move on to the next project tbh
I dont like the blue border around button 2 and 3 after they are clicked
probably should google that
@alpox thanks so much for the feedback
CamperBot
@camperbot
Feb 19 2017 11:35
eslmiguel sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 790 | @alpox |http://www.freecodecamp.com/alpox
Dany Din
@danydin
Feb 19 2017 11:42
why you learn mguel
alpox
@alpox
Feb 19 2017 11:45
@ESLMiguel
:focus {
  outline: none !important;
}
This will remove it from all elements of the page
Dany Din
@danydin
Feb 19 2017 11:45
@alpox
http://plnkr.co/edit/fgULtyIr8D7ERB15jrPA?p=preview
  1. another question i've forgot how can i display the catgory name that been chosen and not its value number
  2. if i want it to be displayed on my site that everyone which adds something will see one another where can i learn how to do it? (i guess it requires some backend knowledge)
ESLMiguel
@ESLMiguel
Feb 19 2017 11:47
@danydin I dont understand your question
@alpox remove what?
alpox
@alpox
Feb 19 2017 11:48
@danydin 1. labelCat1.options[labelCat1.selectedIndex].text
@danydin Yeah if you need it persistent you need a database. If not, you can keep it in-memory as long as its not too much.
This both requires backend logic as you say.
@danydin FCC teaches some nodejs - you might want to take a look there
@ESLMiguel Well the blue border :D
Dany Din
@danydin
Feb 19 2017 11:51
i've tried thier node js tutorial but its not teaching any pratical knowledge for my needs just some basic coding which i don't know what its useful for :panda_face:
and thanks again for the first one :clap:
alpox
@alpox
Feb 19 2017 11:51
@danydin There are useful things for that case. https://www.freecodecamp.com/challenges/start-a-nodejs-server
ESLMiguel
@ESLMiguel
Feb 19 2017 11:52
@alpox oh duh
General question: now that I have made my first intermediate front dev project, should I start using my own editor and copy/pasting to codepen once I am done?
alpox
@alpox
Feb 19 2017 11:53
@ESLMiguel You don't have to. You can simply go on in codepen - since its easier for people to help you with it then.
Ofc. when the projects are bigger you might want to go native
Dany Din
@danydin
Feb 19 2017 11:53
thanks again will deff do those now since i've a goal ;)
alpox
@alpox
Feb 19 2017 11:54
Or, what sometimes is quite a good thing, cloud 9 -- c9.io @ESLMiguel
Dany Din
@danydin
Feb 19 2017 11:54
ya c9 is great its include backend as well :+1:
that save in memory idea sound great it remoes the need for db no? it just for testing its more like memory cache but on the server side?
ESLMiguel
@ESLMiguel
Feb 19 2017 11:56
@alpox the reason why I ask, is that I read a long post that said to not use stuff like cloud 9 and codepen
Dany Din
@danydin
Feb 19 2017 11:56
whats the name of the frontend cache btw? (that if one watns to create a code that saves itself on the cs there is an option to do it)
ESLMiguel
@ESLMiguel
Feb 19 2017 11:56
just didnt know the right time to go native, as you say
alpox
@alpox
Feb 19 2017 11:57
@danydin cs?
Dany Din
@danydin
Feb 19 2017 11:57
clientside
i tihnk it called stoarge something
alpox
@alpox
Feb 19 2017 11:57
Ah yes you can save things clientside. Localstorage is what you are looking for
But that doesn't help for sharing ofc.
Dany Din
@danydin
Feb 19 2017 11:57
yes but i dont really know how to use it yet
yes but its similar to that just on the backend side with the memroy thing you've told me as the second option:?
alpox
@alpox
Feb 19 2017 11:58
@danydin Thats quite simple... localStorage.setItem("foo", "bar");
localStorage.getItem("foo");
Hmm the memory thing would be more like a global variable or something :D
For really simple stuff you can also just go with a textfile as persistent storage
Dany Din
@danydin
Feb 19 2017 11:59
so in my case(so it wil lget all the li list)?
localStorage.setItem(li);
localStorage.getItem(li);
alpox
@alpox
Feb 19 2017 11:59
well you can store whatever you want there in json format
But not html elements actually.. you can store their values
Dany Din
@danydin
Feb 19 2017 12:00
so ill do li.textContent?
alpox
@alpox
Feb 19 2017 12:00
Depends on what exactly you need to store
What values
Dany Din
@danydin
Feb 19 2017 12:03
all my li
Ghulam Shabir
@ghulamshabir
Feb 19 2017 12:08
hello dear campers, does anyone know why this git clone https://github.com/FreeCodeCamp/fcc-expressworks.git && chmod 744 fcc-expressworks/setup.sh && fcc-expressworks/setup.sh && source ~/.profile is not working. I am on fcc node challenges Build Web Apps using ExpressJS
I am using codeanywhere cloud based editor
I am running the above git command in the codeanywhere editor
Dany Din
@danydin
Feb 19 2017 12:09
try on the backend you're on the frontend
Ghulam Shabir
@ghulamshabir
Feb 19 2017 12:10
Oh yeah could you share the link ?
Ghulam Shabir
@ghulamshabir
Feb 19 2017 12:16
@danydin thanks
CamperBot
@camperbot
Feb 19 2017 12:16
ghulamshabir sends brownie points to @danydin :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @danydin |http://www.freecodecamp.com/danydin
Dany Din
@danydin
Feb 19 2017 12:17
@alpox
labelCat1.options[labelCat1.selectedIndex].text
how the labelCat1.selectedIndex works acutally
iWriteSins
@iWriteSins
Feb 19 2017 12:17
<div id="navbar" class="row">
    <div class="col-md-4">
        <h1 id="logo">iWriteSins</h1>
        <h5 id="logo-text">Click clack - CODE !</h5>
    </div>

    <div class="col-md-8">
        <ul id="nav">
              <li>About</li>
              <li>Portfolio</li>
              <li>Contact</li>
        </ul>  
    </div>
</div>
Columns don't stack horizontal. What am I doing wrong?
Lidia Wisniewska
@lidiawisniewska
Feb 19 2017 12:17
Hi Everyone! Could someone have a look at my local weather app?
not sure whats wrong
Dany Din
@danydin
Feb 19 2017 12:18
@iWriteSins try css the ul #nav { display:inline-block;}
iWriteSins
@iWriteSins
Feb 19 2017 12:19
@danydin This is my CSS:
body{
  margin:0;
  padding:0;
  font-size: 18px;
}

#navbar {
    background-color: ;
}

#logo {
    font-family: helvetica;
    color: #29D9C2;
}

#logo-text {
    font-family: helvetica;
    color: #01A2A6;
    margin-top: -25px;
}

#nav {
    list-style-type: none;
    text-decoration: none;
    font-family: helvetica;
    display: inline-flex;
}
Dany Din
@danydin
Feb 19 2017 12:19
share the codepen
iWriteSins
@iWriteSins
Feb 19 2017 12:20
@danydin The menu is horizontal, but the bootstrap columns aren't. The second row shows underneath the first. http://codepen.io/iWriteSins/pen/MJMwLQ
Dany Din
@danydin
Feb 19 2017 12:20
whats the first row?
you talk about the logo?
iWriteSins
@iWriteSins
Feb 19 2017 12:21
Yeah..
I'm trying to do it like this: Logo Menu1 Menu2 Menu3
Ghulam Shabir
@ghulamshabir
Feb 19 2017 12:27
@lidiawisniewska use https://cors-anywhere.herokuapp.com/ instead of crossorigin.me
achudoz
@achudoz
Feb 19 2017 12:27
@averagebeard sorry didn't see your response before. that is actually a pretty decent idea. Thank you!
CamperBot
@camperbot
Feb 19 2017 12:27
achudoz sends brownie points to @averagebeard :sparkles: :thumbsup: :sparkles:
:cookie: 315 | @averagebeard |http://www.freecodecamp.com/averagebeard
Dany Din
@danydin
Feb 19 2017 12:28
it has to do something with the html deafult interept is block i forgot how to change it wait for someone else that more experinced one line of code will solve it dw @iWriteSins
Lidia Wisniewska
@lidiawisniewska
Feb 19 2017 12:34
@ghulamshabir thanks! do you know why crossorigin.me wouldnt work?
CamperBot
@camperbot
Feb 19 2017 12:34
lidiawisniewska sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
:star2: 1866 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
alpox
@alpox
Feb 19 2017 12:36
@danydin Is this a question? :D
@danydin labelCat1 is the select input. It has a property options which is a list of all the option tags. labelCat1.selectedIndex gives you the index of the options which is currently selected (Through choosing one).
So you just take the index which is selected and choose the right option out of the list of options - and access its text
Ghulam Shabir
@ghulamshabir
Feb 19 2017 12:39
@lidiawisniewska I don't know exactly, I just changed the proxy and it worked
Lidia Wisniewska
@lidiawisniewska
Feb 19 2017 12:40
@ghulamshabir ok
Abhijeet Singh
@abhijeetps
Feb 19 2017 12:44
Hey Everyone! Check out my Wikipedia Viewer!
Suggestions and Feedback are warmly welcomed.
http://codepen.io/aps120797/full/ZLdzbK
Lidia Wisniewska
@lidiawisniewska
Feb 19 2017 12:49
@aps120797 looks good!
Abhijeet Singh
@abhijeetps
Feb 19 2017 12:49
@lidiawisniewska Yeah! Thanks. :smile:
CamperBot
@camperbot
Feb 19 2017 12:49
aps120797 sends brownie points to @lidiawisniewska :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @lidiawisniewska |http://www.freecodecamp.com/lidiawisniewska
Ghulam Shabir
@ghulamshabir
Feb 19 2017 12:49
@aps120797 pressing enter does not work and when I resized my browser the search field and buttons stacked one another and you should removed left and right margins for mob small screens
Lidia Wisniewska
@lidiawisniewska
Feb 19 2017 12:50
@aps120797 it's not obvious that the little lighting icon is for random article
Abhijeet Singh
@abhijeetps
Feb 19 2017 12:50
@lidiawisniewska I can't figure out which icon should I use instead.
Lidia Wisniewska
@lidiawisniewska
Feb 19 2017 12:50
so maybe it's worth considering doing something different
it doesnt need to be icon i believe; it can say e.g. "random article"
Abhijeet Singh
@abhijeetps
Feb 19 2017 12:51
@lidiawisniewska After clicking on search button. It displays a tip.
iWriteSins
@iWriteSins
Feb 19 2017 12:51
Can someone tell me why Bootstrap's columns don't work?
https://codepen.io/iWriteSins/pen/MJMwLQ
Ghulam Shabir
@ghulamshabir
Feb 19 2017 12:51
@aps120797 I used a link button named it Random
Lidia Wisniewska
@lidiawisniewska
Feb 19 2017 12:53
and also as @ghulamshabir said pressing the enter button does not work, so you could work on that :)
Ghulam Shabir
@ghulamshabir
Feb 19 2017 12:54
@aps120797 if you are curious then you can add image for each link as thumbnail
achudoz
@achudoz
Feb 19 2017 12:55
@aps120797 check out my cool random article button - try hover!
It is one of the smoothest looking things I made so far.
http://codepen.io/achudoz/pen/wgLBBE?editors=1100
Ghulam Shabir
@ghulamshabir
Feb 19 2017 12:58
@achudoz your project is not functional ?
achudoz
@achudoz
Feb 19 2017 13:00
@ghulamshabir No, I just did the searchbox and button CSS/HTML so far. Started the project not long ago
Abhijeet Singh
@abhijeetps
Feb 19 2017 13:00
@achudoz : If you don't mind, I am gonna copy that dice style. :smile:
Ghulam Shabir
@ghulamshabir
Feb 19 2017 13:01
ok I tried searching it did not work that's asking. good luck :+1:
achudoz
@achudoz
Feb 19 2017 13:01
@aps120797 I would be honored lol
iWriteSins
@iWriteSins
Feb 19 2017 13:14

Anyone knows why

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

doesn't work in CodePen?
https://codepen.io/iWriteSins/pen/MJMwLQ

alpox
@alpox
Feb 19 2017 13:16
@iWriteSins You gotta add bootstrap in the settings -> css
Philipp_Lypniakov
@RAYDENFilipp
Feb 19 2017 13:16
Hello, everyone! What am I doing wrong so my navigation bar isn't working correctly?
http://codepen.io/RAYDENFilipp/pen/mRZyvQ.html
Coded
@Ajayhar
Feb 19 2017 13:18
Hey guys, I have nothing good to put in my "Build a Personal Portfolio Webpage" challenge. What do i do?
hello! anyone?
iWriteSins
@iWriteSins
Feb 19 2017 13:21
@alpox Oh. Thank you. I thought I had it already in use from the Settings.
CamperBot
@camperbot
Feb 19 2017 13:21
iwritesins sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 791 | @alpox |http://www.freecodecamp.com/alpox
achudoz
@achudoz
Feb 19 2017 13:23
@Ajayhar put placeholders. It even says so in the challenge description
Philipp_Lypniakov
@RAYDENFilipp
Feb 19 2017 13:24
seems I found a bug
AlejoFCC
@AlejoFCC
Feb 19 2017 13:25
Hello! I am at Wiki Challenge just trying to get some data from the object by ... var data=$.getJSON(url) ... but when I try access to some info, it is impossible. Could someone send me some link where the data from Wiki API is clear described, I have checked many codes and the link in the challenge but it is still getting me stuck. Thank you.
Philipp Scholz
@philipp32
Feb 19 2017 13:29
Hey :) What does this error mean? Refused to display 'https://api.twitch.tv/kraken/channels/staiy' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Can't find it on google. :/
Metaphyzist
@Metaphyzist
Feb 19 2017 13:31
I'm having issues understanding controls and functions in javascript. That's why I decided to join this room.
alpox
@alpox
Feb 19 2017 13:32
@philipp32 That means you are not allowed to show that thing in an iframe :D
Osman Kale
@osmankale
Feb 19 2017 13:33
Hello everyone! I have build "random quote machine". My tweet button don't work. What is my wrong?
http://codepen.io/raspiduino/pen/qREpgy
Dany Din
@danydin
Feb 19 2017 13:33
yes i know but i didnt understood how labelCat1.selectedIndex acutally works that was my question ;) @alpox
alpox
@alpox
Feb 19 2017 13:33
@Metaphyzist You probably want to join HelpJavascript instead
@danydin Thats just a property delivering you the index which is selected
Metaphyzist
@Metaphyzist
Feb 19 2017 13:33
Okay, thanks
Philipp Scholz
@philipp32
Feb 19 2017 13:34
@osmankale You are reloading the whole thing.
Dany Din
@danydin
Feb 19 2017 13:34
@alpox so on every option element you can use selectedIndex to figure it's position?
Philipp Scholz
@philipp32
Feb 19 2017 13:34
You shouldn't do that.
alpox
@alpox
Feb 19 2017 13:34
@danydin No other way round. On any select element there is a property named selectedIndex which determines which of its options is selected
Osman Kale
@osmankale
Feb 19 2017 13:35
@philipp32 Yes but Why?
Philipp Scholz
@philipp32
Feb 19 2017 13:35
function tweet(){

  $.getScript('http://platform.twitter.com/widgets.js');
  window.open("http://twitter.com/home/?status=" + "\"" + quotes[x].quote + "\"" + " - " + quotes[x].author, '_blank');
};
@osmankale take this code instead
and replace the quotes[x].quote with your stuff
Osman Kale
@osmankale
Feb 19 2017 13:35
ok. I will try
Philipp Scholz
@philipp32
Feb 19 2017 13:35
@osmankale You are calling a whole new API. All this does is reload the apge.
alpox
@alpox
Feb 19 2017 13:35
@osmankale @philipp32 Why not just use a simple link and set its href to the twitter tweet link?
Philipp Scholz
@philipp32
Feb 19 2017 13:36
Don't know. :D
This works for me.
Osman Kale
@osmankale
Feb 19 2017 13:36
@alpox how? :)
Philipp Scholz
@philipp32
Feb 19 2017 13:37
@alpox Hey :) I was playing around with the code you've written for me. I haven't changed anything. But it doesn't call after pressing the delete button again. The link gets called butt he html elements stay empty. :/
Dany Din
@danydin
Feb 19 2017 13:37
@alpox ok thats what i wanted to figure thanks and i target it by the id of the select element and then selectedIndex?
CamperBot
@camperbot
Feb 19 2017 13:37
danydin sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 792 | @alpox |http://www.freecodecamp.com/alpox
Philipp Scholz
@philipp32
Feb 19 2017 13:37
@danydin yes
Dany Din
@danydin
Feb 19 2017 13:38
danke @philipp32
CamperBot
@camperbot
Feb 19 2017 13:38
danydin sends brownie points to @philipp32 :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @philipp32 |http://www.freecodecamp.com/philipp32
Philipp Scholz
@philipp32
Feb 19 2017 13:38
@danydin gerne
@danydin @philipp32 Och deutsche hier? :D
Philipp Scholz
@philipp32
Feb 19 2017 13:39
Ja moin.
Dany Din
@danydin
Feb 19 2017 13:39
stimmt
Philipp Scholz
@philipp32
Feb 19 2017 13:39
Dem och nach zu schließen bist du aus dem Osten?
FL8Liew
@FL8Liew
Feb 19 2017 13:40
```
$.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
    $(".box").html();
  });
hey guys, i am doing random quote machine, what should i add in the bracket in html???
Philipp Scholz
@philipp32
Feb 19 2017 13:41
@FL8Liew Use this formatting:
.html("<div><img id = 'channel_logo' src='" + profileBannerLink + "'><span id='channel_name'>" + profileName + "</span><div id ='online_symbol'</div></div>")
So put your html in quotes and add the rest with plus signs.
FL8Liew
@FL8Liew
Feb 19 2017 13:41
just copy and paste? lol?
cause i dont reallyunderstand what does it mean...
Philipp Scholz
@philipp32
Feb 19 2017 13:41
@FL8Liew No.
Okay
I will explain
FL8Liew
@FL8Liew
Feb 19 2017 13:42
thanks :D
alpox
@alpox
Feb 19 2017 13:42
@philipp32 Dein channel link ist falsch - https://api.twitch.tv/kraken/channels/staiy steht in deinem link ^^
@philipp32 Ich bin schweizer :-)
Osman Kale
@osmankale
Feb 19 2017 13:42
@alpox how to insert api text to twitter url ? i can't solve that
Philipp Scholz
@philipp32
Feb 19 2017 13:42
.html("your html code" + yourVariable + "your html code"
@osmankale I can help you with that aw.
so you JSON data gets into the function
open up your API link
and there you see something like this: https://wind-bow.gomix.me/twitch-api/streams/staiy?callback=?
Now, lets say I want to access name of the channel: jsonData.stream.channel.display_name
alpox
@alpox
Feb 19 2017 13:43
@osmankale var url = "http://twitter.com/intent/tweet?text=\"" + quote + "\" - " + author;
Philipp Scholz
@philipp32
Feb 19 2017 13:43
Insert that into your stuff
Osman Kale
@osmankale
Feb 19 2017 13:44
@philipp32 where i put the this function in my code
Philipp Scholz
@philipp32
Feb 19 2017 13:44
@alpox Schick Schickt. Now the question is why is the link wrong after the second time?
alpox
@alpox
Feb 19 2017 13:44
@osmankale $("#yourlink").attr("href", url);
FL8Liew
@FL8Liew
Feb 19 2017 13:44
<body>
  <h1 class="text-center">Random Quote Machine</h1>
  <div class="box text-center">

  </div>
</body>
this is my current html code

so i just add <div class="box text-center">

</div>

?
Philipp Scholz
@philipp32
Feb 19 2017 13:45
@FL8Liew What do you want to do?
FL8Liew
@FL8Liew
Feb 19 2017 13:45
link the JSON link to html?
Philipp Scholz
@philipp32
Feb 19 2017 13:45
Can you send me the link of your project?
alpox
@alpox
Feb 19 2017 13:46
@philipp32 Try it with jsonData.stream.channel.url
@philipp32 Und dein reset stimmt noch nicht ganz
Philipp Scholz
@philipp32
Feb 19 2017 13:48
wieso?
@FL8Liew give me a sec. :)
FL8Liew
@FL8Liew
Feb 19 2017 13:50
yea sure
alpox
@alpox
Feb 19 2017 13:51
@philipp32 Ich hab da mal was falsches eingegeben - du hast es kopiert bevor ichs korrigiert hab:
$("#link_to_channel_div").empty(); ---> $("#link_to_channel_div").unwrap();
Philipp Scholz
@philipp32
Feb 19 2017 13:52
Thanks
@alpox
Have a problem here with helping @FL8Liew . Why can't i open the title of the quote with json.title? http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
i got it from here...
Philipp Scholz
@philipp32
Feb 19 2017 13:54
The link is okay. I am struggling with the json notation.
Probably just something small.
FL8Liew
@FL8Liew
Feb 19 2017 13:54
oh
alpox
@alpox
Feb 19 2017 13:54
@philipp32 Open it where?
Philipp Scholz
@philipp32
Feb 19 2017 13:55
Put it into his div.
It doesn't appear in the console.
alpox
@alpox
Feb 19 2017 13:55
Well yeah because he uses the variable html which is not defined... logging json instead should do it
Jesse
@lookinahead13
Feb 19 2017 13:56
could someone tell me how to "hard-reload" the challenges in the beta version? I have my code right but it won't pass the challenge. I heard someone mention that the "hard-reload" could resolve this issue.
Philipp Scholz
@philipp32
Feb 19 2017 13:57
@lookinahead13 Just refresh the page
Save your code before.
@alpox Did that. Didn't work.
$(document).ready(function() {

  $.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
    console.log(json);
    $(".box").html(json.title + json.content);
 console.log(json.title);
  });
});
alpox
@alpox
Feb 19 2017 13:57
$(".box").html(json[0].title);
json is an array
Philipp Scholz
@philipp32
Feb 19 2017 13:58
$(document).ready(function() {

  $.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
    console.log(json);
    $(".box").html(json[0].title + json[0].content);

  });
});
That is your code. @FL8Liew Thanks. @alpox
CamperBot
@camperbot
Feb 19 2017 13:58
philipp32 sends brownie points to @fl8liew and @alpox :sparkles: :thumbsup: :sparkles:
:warning: @fl8liew's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
:cookie: 793 | @alpox |http://www.freecodecamp.com/alpox
Jesse
@lookinahead13
Feb 19 2017 13:59
@philipp32 Thanks. Ive been staring at the screen for sometime now working between another project and FCC. Maybe a break is in order since I spaced off the refesh button! :-)
CamperBot
@camperbot
Feb 19 2017 13:59
lookinahead13 sends brownie points to @philipp32 :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @philipp32 |http://www.freecodecamp.com/philipp32
FL8Liew
@FL8Liew
Feb 19 2017 13:59
haha, obviously i am lost
mind explaining?? ;D
Philipp Scholz
@philipp32
Feb 19 2017 13:59
@FL8Liew Just copy paste that.
FL8Liew
@FL8Liew
Feb 19 2017 13:59
json[0].title + json[0].content
Philipp Scholz
@philipp32
Feb 19 2017 13:59
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
-> This gets the information from the server.
This is the response:
FL8Liew
@FL8Liew
Feb 19 2017 13:59
what is the purpose of this??
Philipp Scholz
@philipp32
Feb 19 2017 13:59
[{"ID":1517,"title":"Edward Tufte","content":"<p>Good design is a lot like clear thinking made visual.<\/p>\n","link":"https:\/\/quotesondesign.com\/edward-tufte-2\/"}]
So, json[0] accesses the whole object.
json[0].title accesses the title.
You might need a refresher on that. So did I btw. ;)
FL8Liew
@FL8Liew
Feb 19 2017 14:03
.... i am still lost...
alpox
@alpox
Feb 19 2017 14:06
@FL8Liew From the call to the url you get the variable json back.
The variable json is an array of quotes.
Since you specified that you want only one quote, there will be always only one quote in the array (json[0])
Gulsvi
@gulsvi
Feb 19 2017 14:06
var json = ['hello', 'world']
@FL8Liew In the above, how would you access the word 'hello'?
alpox
@alpox
Feb 19 2017 14:06
One quote is an object, and the object has 3 properties. ID, title and link. @FL8Liew
So you can access them by json[0].title as example. Or json[0].content
FL8Liew
@FL8Liew
Feb 19 2017 14:07
@SkyCoder01 json[0]
Gulsvi
@gulsvi
Feb 19 2017 14:07
@FL8Liew Correct. Now, how would you access the ID in this:
var json = {
  "ID": 1517,
  "title": "Edward Tufte",
};
FL8Liew
@FL8Liew
Feb 19 2017 14:08
json.ID
Gulsvi
@gulsvi
Feb 19 2017 14:09
@FL8Liew Yes, that's also correct, so the final step, how to access the ID after we put it in brackets?
var json = [{
  "ID": 1517,
  "title": "Edward Tufte",
}];
FL8Liew
@FL8Liew
Feb 19 2017 14:10
json[0].ID??
Gulsvi
@gulsvi
Feb 19 2017 14:10
@FL8Liew Yes, exactly. It's the first element of the array and it's a JSON object.
So we have to combine both of those techniques
FL8Liew
@FL8Liew
Feb 19 2017 14:12
so which means as @alpox said, there are 3 objects in each json link?
we need to mention .title to get the title?
Gulsvi
@gulsvi
Feb 19 2017 14:13
Yes, the nicely formatted version of that is:
var json = [{
  "ID": 1517,
  "title": "Edward Tufte",
  "content": "<p>Good design is a lot like clear thinking made visual.<\/p>\n",
  "link": "https:\/\/quotesondesign.com\/edward-tufte-2\/"
}]
FL8Liew
@FL8Liew
Feb 19 2017 14:13
oh okay, i understand now
Gulsvi
@gulsvi
Feb 19 2017 14:13
json[0].title would give us the title "Edward Tufte"
alpox
@alpox
Feb 19 2017 14:13
Sry... 4 properties :D
Gulsvi
@gulsvi
Feb 19 2017 14:13
Close enough ;)
FL8Liew
@FL8Liew
Feb 19 2017 14:14
it seems i still need to study and understand a lot more...
@SkyCoder01 @alpox thanks :D
CamperBot
@camperbot
Feb 19 2017 14:14
fl8liew sends brownie points to @skycoder01 and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 248 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 794 | @alpox |http://www.freecodecamp.com/alpox
Gulsvi
@gulsvi
Feb 19 2017 14:15
It gets easier with more practice. I struggled with this at first...we all do
You can also use your browser's console to help with the more complicated ones
image.png
iWriteSins
@iWriteSins
Feb 19 2017 14:30
How can I pull my "jumbotron" box down, so a small part doesn't hide behind the navigation bar?
http://codepen.io/iWriteSins/pen/xgowBw
Moisés Man
@moigithub
Feb 19 2017 14:37
try with margin-top or padding-top @iWriteSins
Dany Din
@danydin
Feb 19 2017 14:45
@iWriteSins have you succeed to make all logos horizontal in the end?
@alpox how do i make the second select-category be dependent on the first select-category so when the user choose option in the first category it will then show specific options in the second category?
alpox
@alpox
Feb 19 2017 14:52
@danydin You would have to setup the options of the second category through javascript - newly on every change of the first one
Dany Din
@danydin
Feb 19 2017 14:54
can i've example of 1 item so ill get how its done maybe? :clap:
Abhijeet Singh
@abhijeetps
Feb 19 2017 15:02
Hey Guys, check out my Wikipedia Viewer:
Your suggestions and feedbacks are warmly welcomed.
http://codepen.io/aps120797/pen/ZLdzbK
alpox
@alpox
Feb 19 2017 15:06
@danydin
select.innerHTML = "";
var opt1 = document.createElement("option"):
opt1.value = "1";
opt1.text = "Some value";
select.add(opt1, null);
Dany Din
@danydin
Feb 19 2017 15:13
@alpox
thanks! so i use if statement first to match the category option that the user chose and then run accordingly the js code to load it proper options with the example you provided?
CamperBot
@camperbot
Feb 19 2017 15:13
danydin sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 795 | @alpox |http://www.freecodecamp.com/alpox
Spyrantis Theodoros
@thodorisanta
Feb 19 2017 15:23
whats the difference between making the calculators buttons with button than making them with input . also whats earier, what you suggest i should use and why? :P
Dany Din
@danydin
Feb 19 2017 15:24
input is not for button but to enter input and button is a button @thodorisanta
Adam
@GoingAllTheWayUp
Feb 19 2017 15:24
Does anyone else feel like the JSON APIs and Ajax section of the front-end course leaves much to be desired?
Jesse
@lookinahead13
Feb 19 2017 15:29
Good morning everyone!
I am having issues with the ( Applied Visual Design: Create Movement Using CSS Animation ) challenge. Any tips with the keyframes?
Gulsvi
@gulsvi
Feb 19 2017 15:33
@thodorisanta <button> and <input> are form elements - for submitting data from a page. Neither one should be used for a calculator app, IMO :)
Elaine
@girlboss558
Feb 19 2017 15:50
Hey I'm working on the portfolio. How do I create a thumbnail image of a project?
Tony
@FreakishLancer
Feb 19 2017 16:10
@GoingAllTheWayUp Yeah, it's a little incomplete. The beta FCC goes into it a little deeper, but you are going to have to google a lot with it.
h1tag
@h1tag
Feb 19 2017 16:12
@girlboss558 you use a screenshot of your project or the embed feature on Codepen
Yousuf Ejazi
@yousafe007
Feb 19 2017 16:12
Screen Shot 2017-02-19 at 16.44.33.png
How can I bring the text “Here a short..” to where it is with bootstrap? since what I am doing is not good coding.
Here’s the HTML and CSS for that:
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1 class="text-center bold">
  Johann Sebastian Bach
  </h1>
      <div class="text-center"><img src="https://geoffbilbrough.files.wordpress.com/2008/03/picture_5.png" alt="Bach's Logo"></div>
      <h2 id="quote" class="text-center"><em>"The beginning and end of all Music"</em></h2>
      <h3 id="max" class="text-center"><footer>Max Reger</footer></h3>
      <div id="portrait" class="text-center"><img src="https://static1.squarespace.com/static/50b526b5e4b05a1c3507313b/t/50b70d0de4b055c1d63b9e6a/1354173709273/bach1+copy.jpg" alt="Bach Portrait"/>
        </div>
      <h3 style="padding-left:140px">Below is a short timeline of his life:</h3>
    </div>
  </div>
</div>
body {
  margin-top: 60px;
}
em {
  font-weight: lighter;
}
#max {
    font-weight: lighter;
    text-allignment: left;
    text-allignment: center;
  text-
}
Vered Rekanati
@veredrec
Feb 19 2017 16:14
@thodorisanta I used buttons for mine. I get what @SkyCoder01 is saying, but for me it was easier because I see it as a collection of buttons. like in real life calculator...
MSaif
@msaiff
Feb 19 2017 16:16
Morning @lookinahead13
A_A
@Otto-AA
Feb 19 2017 16:19
grafik.png
achudoz
@achudoz
Feb 19 2017 16:19
Hi, can anyone see why I am getting no data from my .getJSON ?
When I input the url in browser, I can see the desired data, but it does not work in my codepen.
http://codepen.io/achudoz/pen/wgLBBE?editors=1011
A_A
@Otto-AA
Feb 19 2017 16:19
Hey there,
I am creating a background with ' background: radial-gradient(circle, #000000, #042a20 25%, #000000), black;' but it appears that chrome doesn't render it properly.
h1tag
@h1tag
Feb 19 2017 16:19
@yousafe007 can you post your Codepen
Jesse
@lookinahead13
Feb 19 2017 16:19
@msaiff Have you passed the challenge --- Applied Visual Design: Create Movement Using CSS Animation --- can't seem to figure out what I'm doing wrong.
A_A
@Otto-AA
Feb 19 2017 16:20
achudoz
@achudoz
Feb 19 2017 16:21
@Otto-AA in what way? you mean that it is not a totally smooth transition? That always happens with my firefox too. I assume that is the way it works.
A_A
@Otto-AA
Feb 19 2017 16:22
@achudoz Yeah, but let me post the chrome picture in contrast. Imo it's really bad :/
grafik.png
So I don't know if it's a mistake by me or just chrom
oop
Muhammad Hasham
@MohammadHasham
Feb 19 2017 16:23
i am having a real hard time understanding control flow of a code snippet.Can anyone help me.Please PM.
A_A
@Otto-AA
Feb 19 2017 16:24
wait what, the picture looks smooth but in chrome it doesn't? O.o @achudoz
achudoz
@achudoz
Feb 19 2017 16:26
@Otto-AA I know what you mean and I get the same thing and apparently it is completely normal. However there seem to be some workarounds:
http://stackoverflow.com/questions/13151331/smooth-css-gradients
@Otto-AA just google smooth css gradients and you are bound to find a solution that works for you
A_A
@Otto-AA
Feb 19 2017 16:27
@achudoz ok, thank you :)
CamperBot
@camperbot
Feb 19 2017 16:27
otto-aa sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @achudoz |http://www.freecodecamp.com/achudoz
achudoz
@achudoz
Feb 19 2017 16:29
@Otto-AA :thumbsup:
Yousuf Ejazi
@yousafe007
Feb 19 2017 16:29
@fortMaximus I want it to lie somewhere like in this pin:
https://codepen.io/freeCodeCamp/pen/NNvBQW
h1tag
@h1tag
Feb 19 2017 16:31
@yousafe007 why not use text-center like you did above with the <h1> and <img> elements
Jesse
@lookinahead13
Feb 19 2017 16:34
Would someone be able to help me with a challenge and explain what I am doing wron? It would be greatly appreciated!
Spyrantis Theodoros
@thodorisanta
Feb 19 2017 16:34
@SkyCoder01 what should i use then?
@veredrec what should i use then
h1tag
@h1tag
Feb 19 2017 16:37
@lookinahead13 for help with challenges you can ask here help and if it's js related ask here helpJavascript
Yousuf Ejazi
@yousafe007
Feb 19 2017 16:37
@fortMaximus Centered text wouldn’t look bad but i would rather like it somwhat to the left. Like a bit, you see?
Vered Rekanati
@veredrec
Feb 19 2017 16:38
@thodorisanta I would still use buttons :)
Jesse
@lookinahead13
Feb 19 2017 16:39
@fortMaximus Thanks.
CamperBot
@camperbot
Feb 19 2017 16:39
lookinahead13 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 430 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Gulsvi
@gulsvi
Feb 19 2017 16:39
@achudoz a <form>'s default action is to submit the page. You'll need to prevent that from happening.
$("#searchButton").on("click", function(e) {
  e.preventDefault();
@thodorisanta A <div> with role="button" for assistive technologies
Spyrantis Theodoros
@thodorisanta
Feb 19 2017 16:41
@SkyCoder01 and why is that better>? is it easier though? :P
Adrian Warholm
@adrianwarholm
Feb 19 2017 16:41
Morning everyone!
Gulsvi
@gulsvi
Feb 19 2017 16:42
@thodorisanta Easier for you or the people using your website?
Adrian Warholm
@adrianwarholm
Feb 19 2017 16:42
I'm a 16 year old developer and I was wondering if there are any jobs/internships open for teenagers.
Spyrantis Theodoros
@thodorisanta
Feb 19 2017 16:42
@SkyCoder01 for me to make it...actually both
Gulsvi
@gulsvi
Feb 19 2017 16:42
@thodorisanta Use a <div> and style it like a button. Follow the HTML5 spec and use elements as they were designed to be used.
h1tag
@h1tag
Feb 19 2017 16:43
@SkyCoder01 can you check Yousof's problem :point_up: February 19, 2017 6:12 PM. Thanks in advance :)
CamperBot
@camperbot
Feb 19 2017 16:43
fortmaximus sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 249 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Spyrantis Theodoros
@thodorisanta
Feb 19 2017 16:44
@SkyCoder01 you didnt answer if its easier than use a button or an input though :P
Elaine
@girlboss558
Feb 19 2017 16:44
@fortMaximus thank you!
CamperBot
@camperbot
Feb 19 2017 16:44
girlboss558 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 431 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Gulsvi
@gulsvi
Feb 19 2017 16:44
@thodorisanta Okay, now you're trolling... good luck with your project :+1:
@fortMaximus I'd say the bootstrap grid is a good option
achudoz
@achudoz
Feb 19 2017 16:50
@SkyCoder01 adding preventDefault() unfortunately did not work, but thanks for drawing the attention to that. This is something I didn't even know is a thing. :thumbsup:
CamperBot
@camperbot
Feb 19 2017 16:50
achudoz sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 250 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 19 2017 16:51
@achudoz Hmm, I was getting JSON from wikipedia when I did that with your pen. Now your .ajax is gone
@achudoz You'll need to add the callback=? back to your URL like you had with your Ajax because now you're getting a cross origin issue
h1tag
@h1tag
Feb 19 2017 16:54
@yousafe007 i believe you can also divide your row into columns and try to align where you want it to be
Yousuf Ejazi
@yousafe007
Feb 19 2017 16:56
@fortMaximus DO you have a link to a good turotial on that. Google devastates you with so many search results
achudoz
@achudoz
Feb 19 2017 16:58

@SkyCoder01 Oh yeah, I was fiddling with it and must have removed it in one of my CTRL+Rs. works like a charm now.
https://media.tenor.co/images/7ae292be880bae8ca8a16e39e4a024ef/raw

Thanks again, you're the man!

CamperBot
@camperbot
Feb 19 2017 16:58
achudoz sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: achudoz already gave skycoder01 points
h1tag
@h1tag
Feb 19 2017 16:58
@yousafe007 the columns?
Yousuf Ejazi
@yousafe007
Feb 19 2017 16:59
@fortMaximus yup
I am a newbie into web dev so I am still struggling a bit
Gulsvi
@gulsvi
Feb 19 2017 16:59
@achudoz :clap: I like the search box design, have fun with the rest :)
h1tag
@h1tag
Feb 19 2017 17:01
If you search google, you can find tutorials about it. Try this one Grid Template of Bootstrap Example @yousafe007
Moisés Man
@moigithub
Feb 19 2017 17:03
@SkyCoder01 @achudoz u can also use origin="*" wiki api parameter to tell server "add the proper headers to allow cross origin requests"
Gulsvi
@gulsvi
Feb 19 2017 17:06
@moigithub That's what I did in my project
Halloween edition :jack_o_lantern:
Matthew Bailin
@mdbailin
Feb 19 2017 17:07
Hey all, I've written a miniMax algorithm for my ticTacToe project. For some odd reason, the algo isn't updating the variable "bestMove". Would anyone be able to explain why?
Gulsvi
@gulsvi
Feb 19 2017 17:07
Need to change the colors some day...
Moisés Man
@moigithub
Feb 19 2017 17:07
:D
Matthew Bailin
@mdbailin
Feb 19 2017 17:07
function miniMax(depth,seed){


  if (seed == "player"){
     bestScore = -10000000000000000;
   } else{
     bestScore = 10000000000000000;
   }
   if(moveRecord.every(isNotZero) || depth == 0){
    bestScore = evaluate();
    console.log("board is evaluated");
  }else{
    for(var k=0; k<moveRecord.length; k++){
      if(moveRecord[k] == 0){
        var m = k;
        console.log("open move found");
        moveRecord[m] = -1;
        if(seed == "player"){
          currentScore = miniMax(depth-1,"computer")[0];
          if(currentScore > bestScore){
            bestScore = currentScore;
            bestMove = m;
            console.log(bestMove + " is the best move now.")
          }
        }else{
          currentScore = miniMax(depth-1,"player")[0];
          if(currentScore < bestScore){
            bestScore = currentScore;
            bestMove = m;
            console.log(bestMove + " is the best move now.")
          }
        }
       moveRecord[m] = 0;
      }
    }
  }
  return [bestScore,bestMove];
}
Jasmin Parent
@charlesdarkwind
Feb 19 2017 17:11

Hi, I have a problem, im trying to get a sentence from my simple wiki api request but I keep getting "Cannot read property 'pages' of undefined" if i try to use the code

function firstSentence(queryName) {  

 var queryUrl = "https://en.wikipedia.org/w/api.php?action=query&format=jsonfm&prop=extracts&exsentences=1&titles="+queryName+"&callback=?&origin=*";

  $.ajax( {
    url: queryUrl,
    datatype: 'json',
    success: function(data) {
      //console.log(phrase);
      var result = data.query.pages.extract;
    }
  });
}

heres an url example: https://en.wikipedia.org/w/api.php?action=query&format=jsonfm&prop=extracts&exsentences=1&titles=hello&callback=?&origin=*

Gulsvi
@gulsvi
Feb 19 2017 17:12
@charlesdarkwind Maybe try this URL instead: https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exsentences=1&titles=hello&origin=*
format=json instead of jsonfm
Jasmin Parent
@charlesdarkwind
Feb 19 2017 17:12
yea just tried jasonfm but was using json before
Amit Patel
@AmitP88
Feb 19 2017 17:14

hey guys, I've just started freelancing a few months ago in order to get experience to get a job as a front end developer. My initial goal was to create 5 custom websites for small businesses (already working on the 1st one), but in order to improve my chances of getting an interview someday, should I shift my focus to developing web applications over websites? or should I just try to reach my initial goal first before switching over to developing web apps?

also, the website i'm building is for a restaurant that my client has. He wants to implement online ordering in the future. As a developer, is it better to try to implement this online ordering system on my own or should I just rely on services that offer to integrate it into the website?

Gulsvi
@gulsvi
Feb 19 2017 17:15
JSON is the right format to use @charlesdarkwind maybe you can share your pen, something else might be going on
Jasmin Parent
@charlesdarkwind
Feb 19 2017 17:15
ok 1 sec ill just try something
yfreifer
@yfreifer
Feb 19 2017 17:16
@AmitP88 this is just my opinion, but for businesses who want a functional website such as the restaurant or shop , you will need both front end developmenet (to make the website appealing) and back (PHP for shopping baskets, inventory, calculations)
Tyler Moeller
@TylerMoeller
Feb 19 2017 17:16
@AmitP88 Depends on the job you want to apply for and what technologies your web applications would use compared to your websites. For someone new to development, I would always recommend integrating online ordering with an existing service. Security is important and hard to get right when you're just starting out.
Amit Patel
@AmitP88
Feb 19 2017 17:18
@yfreifer yeah, I don't really have much knowledge of PHP yet. my skills are mostly HTML, CSS, JS, jquery, bootstrap, Sass (still learning)
@TylerMoeller that's what I was thinking too. however, when I look up services that do online ordering for restaurants like this https://www.menufy.com/sales?gclid=CIjj3LvSnNICFRu1wAodZmYKUw they tend to also do custom websites, etc, which as a developer, is disheartening to see
Tyler Moeller
@TylerMoeller
Feb 19 2017 17:20
@AmitP88 Send them your resume :)
Amit Patel
@AmitP88
Feb 19 2017 17:21
@TylerMoeller lol I wish, but I still have a long way to go
plus, I need to improve/modernize my design sense
I just hope I'm not wasting my time developing custom websites if I should be creating web apps instead
Jasmin Parent
@charlesdarkwind
Feb 19 2017 17:22
@SkyCoder01 how would I extract my sentence out of that url? its not really ordered
query.pages.extracts?
always getting undefined
Gulsvi
@gulsvi
Feb 19 2017 17:24
@charlesdarkwind Since it's returning a random object number, you'd have to do something like:
var json = {
  "batchcomplete": "",
  "query": {
    "normalized": [{
      "from": "hello",
      "to": "Hello"
    }],
    "pages": {
      "6710844": {
        "pageid": 6710844,
        "ns": 0,
        "title": "Hello",
        "extract": "<p><i><b>Hello</b></i> is a salutation or greeting in the English language.</p>"
      }
    }
  }
}

console.log(json.query.pages[Object.keys(json.query.pages)].extract);
Matthew Bailin
@mdbailin
Feb 19 2017 17:24
Hey all, I've written a miniMax algorithm for my ticTacToe project. For some odd reason, the algo isn't updating the variable "bestMove". Would anyone be able to explain why?