These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Nov 2017
Christopher Susi
@chrisandsuch
Nov 07 2017 00:03
@tiagocorreiaalmeida going back through full stack courses. Right now I’m doing CSS. Gonna take a quick break from the computer for a couple minutes
Tiago Correia
@tiagocorreiaalmeida
Nov 07 2017 00:05
sounds a good idea :)
Evan Kalvis
@evan17gr
Nov 07 2017 00:06
does anyone know sql?
Tony Brackins
@mrbrackins
Nov 07 2017 00:06
yea @evan17gr
Victor Abeledo
@victorja
Nov 07 2017 00:07
hi guys, do you know why I'm getting 'UNEXPECTED token import' app.js line 1. From webpack? I'm using create-react-app,redux and react-redux
Evan Kalvis
@evan17gr
Nov 07 2017 00:08
do you know how to compare dates? @mrbrackins
ArthurM111
@FocusAndItCanBeDone
Nov 07 2017 00:11
https://codepen.io/Focus111/full/YEGPmr/ any tips or comments for this would be greatly appreciated!
Evan Kalvis
@evan17gr
Nov 07 2017 00:16
dw i found out @mrbrackins thanks anyway
CamperBot
@camperbot
Nov 07 2017 00:16
evan17gr sends brownie points to @mrbrackins :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @mrbrackins |http://www.freecodecamp.com/mrbrackins
Matthew McClure
@m-mcclure
Nov 07 2017 00:18
is it more common to retrieve JSON data with jQuery than pure JS?
Abdelmalek LAHMAR
@malix213
Nov 07 2017 00:21
Hi
I’m new to fcc
Iam in JavaScript section
I did some pages in codepen can I show here
Evan Kalvis
@evan17gr
Nov 07 2017 00:24
yeh go for it
Tom
@moT01
Nov 07 2017 00:25
@victorja i had that error with some improper babel settings in the past
Victor Abeledo
@victorja
Nov 07 2017 00:26
@moT01 how did you fix it?
Abdelmalek LAHMAR
@malix213
Nov 07 2017 00:26
Victor Abeledo
@victorja
Nov 07 2017 00:26
I'm trying to create-react-app in another folder
Tom
@moT01
Nov 07 2017 00:26
@m-mcclure lot's of libraries have their own method for getting json data, I wouldn't add jquery just to have a way to get json data
but if you're already using it - then yea
@victorja i dont recall
if you're using create react app, you shouldnt need to set up stuff
Victor Abeledo
@victorja
Nov 07 2017 00:28
yes but my page doesn't render
Tom
@moT01
Nov 07 2017 00:29
what did you all do
its not finding the import, so it sounds like some configuration or something isn't installed
or maybe updated
Tom
@moT01
Nov 07 2017 00:34
@FocusAndItCanBeDone each section on codepen has a little drop down arrow with an analyze feature - it shows some errors
you should properly indent and space your code @FocusAndItCanBeDone
ArthurM111
@FocusAndItCanBeDone
Nov 07 2017 00:45
@moT01 Useful tip thanks!
CamperBot
@camperbot
Nov 07 2017 00:45
focusanditcanbedone sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 897 | @mot01 |http://www.freecodecamp.com/mot01
Victor Abeledo
@victorja
Nov 07 2017 00:54
@moT01 do youo know why I'm getting map is not a function???
const MovieList = ({
movies,
onMovieClick
}) => (<ul>
{movies.map(movie =>
<Movie key={movie.id} {...movie} onClick={() => onMovieClick(movie.id)}
/>
)}
</ul>
);
Tom
@moT01
Nov 07 2017 00:59
click the little m at the bottom right for formatting in here
three ticks ` and then newline(shift+enter) and then code then new line and then three more ticks
Christopher Susi
@chrisandsuch
Nov 07 2017 01:05
@victorja did you install the packages with npm? From what I remember it was just a matter of cd into the folder and then using terminal type npm create-react-app
Tom
@moT01
Nov 07 2017 01:06
im having an issue with filtering some stuff wanna look? @chrisandsuch
class Books extends Component { 
  componentWillMount() {
    this.props.getAllBooks();
  }

  render() {
    console.log(this.props.allBooks);
    return (
      <div className="manyBooksContainer">
        {this.props.allBooks.filter(book => book.current_owner === this.props.username).map((book, index) =>
          <Book key={index} book={book} userID={this.props.id} username={this.props.username} />
        )}
      </div>
    );
  }
}
the filter works fine on first render, then i get an error with the variable changes
filter is not a function
Christopher Susi
@chrisandsuch
Nov 07 2017 01:10
@moT01 I could be wrong but you might need to unmount the component?
Tom
@moT01
Nov 07 2017 01:12
perhaps
how would i do that
Christopher Susi
@chrisandsuch
Nov 07 2017 01:12
@moT01 here is a link in the documents https://reactjs.org/docs/react-component.html#componentdidmount. You might need to add setState() as well
@moT01 react has changed a bit since I last looked at it. I’m a bit rusty at it.
Kent Saeteurn
@sansae
Nov 07 2017 01:17
@piteto hello again piteto. thank you for the explanation. it solved the problem. i completely forgot what .html() does. thank you for the reminder
CamperBot
@camperbot
Nov 07 2017 01:17
sansae sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
Tom
@moT01
Nov 07 2017 01:17
@chrisandsuch thanks, ill take a look
CamperBot
@camperbot
Nov 07 2017 01:17
mot01 sends brownie points to @chrisandsuch :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @chrisandsuch |http://www.freecodecamp.com/chrisandsuch
Tom
@moT01
Nov 07 2017 01:18
i may have to take a break and rethink
i think i need to move the filter to the render
Christopher Susi
@chrisandsuch
Nov 07 2017 01:26
@moT01 rinse and repeat. helps to take a break sometimes. I’ll be thinking about the problem some more tonight. Let ya know if I remember anything.
Tom
@moT01
Nov 07 2017 01:30
well, im grabbing an array there of all the book, then filtering out ones that arent 'mine'
i could go make a route to send just the ones that are mine
that would work for sure, this seemed pretty easy since it was all already there
Abdelmalek LAHMAR
@malix213
Nov 07 2017 01:48
Hi my idea is to make portfolio folio with no scroll down/up or left right
Iam 116 level in fcc
Here is my page I ll improve it.
Long Nguyen
@longnt80
Nov 07 2017 03:01
@malix213 text is hard to read with transparent background
you should change the font and reduce the transparency
dinesh
@1532j0004kg
Nov 07 2017 03:06
function getTweet(){
$(".tweet").click(function(){
<a href='https://twitter.com/intent/tweet' target='_blank'/>
});
}
hi guys is it right way to adding the ancor text ?
in js
Christopher Susi
@chrisandsuch
Nov 07 2017 03:09
@1532j0004kg looks good for the anchor element. Did you want the link to open in a new tab/window?
@1532j0004kg oh wait the anchor isn’t self closing needs to be <a href='https://twitter.com/intent/tweet' target='_blank’>…</a>
@1532j0004kg think you need some text there where …. Is
dinesh
@1532j0004kg
Nov 07 2017 03:18
ok i will try this chris
function getTweet(){
$(".tweet").click(function(){
<a href='https://twitter.com/intent/tweet' target='_blank'></a>
});
}
Christopher Susi
@chrisandsuch
Nov 07 2017 03:21
@1532j0004kg looks like js jQuery. What kind of behavior are you looking for?
dinesh
@1532j0004kg
Nov 07 2017 03:22
i want to set the ancor for the button
dinesh
@1532j0004kg
Nov 07 2017 03:52
using js
but i already created the button in html
Isaiah Trembley
@IsaiahCT
Nov 07 2017 03:52
do you wnat a button
I have one
dinesh
@1532j0004kg
Nov 07 2017 03:53
i just want to add the ancor for the button
using js
Isaiah Trembley
@IsaiahCT
Nov 07 2017 03:54
hey, I have a button you can use
I mean, it even has its own counter
anchor?
Sorin Ruse
@sorinr
Nov 07 2017 03:55
@1532j0004kg your $(".tweet") html element is a <button> or an anchor tag <a>
dinesh
@1532j0004kg
Nov 07 2017 03:55
ancor element.
sorry it is a button
Sorin Ruse
@sorinr
Nov 07 2017 03:56
@1532j0004kg then you should use jquery attr function to set its href attribute
Isaiah Trembley
@IsaiahCT
Nov 07 2017 03:56
check this out
iff you want to use it
Ima give you abutton, just for fun
dinesh
@1532j0004kg
Nov 07 2017 03:57
@sorinr i dont know how
i will try
Sorin Ruse
@sorinr
Nov 07 2017 03:58
@1532j0004kg check here for an example
dinesh
@1532j0004kg
Nov 07 2017 03:59
haa i am also checking on that only
tq
Isaiah Trembley
@IsaiahCT
Nov 07 2017 03:59
/*Html code*/

//this is for a button if you wanted it, I made this my self//
     <button data-likes=0 id="click" class="btn btn-block btn-primary">Like</button>

//css for the button//

 background: #d9343c;
  background-image: -webkit-linear-gradient(top, #d9343c, #a52bb8);
  background-image: -moz-linear-gradient(top, #d9343c, #a52bb8);
  background-image: -ms-linear-gradient(top, #d9343c, #a52bb8);
  background-image: -o-linear-gradient(top, #d9343c, #a52bb8);
  background-image: linear-gradient(to bottom, #d9343c, #a52bb8);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 4px 4px 3px #000000;
  font-family: Courier New;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  width:150px;
}

.btn:hover {
  background: #fc3c3c;
  background-image: -webkit-linear-gradient(top, #fc3c3c, #d6731c);
  background-image: -moz-linear-gradient(top, #fc3c3c, #d6731c);
  background-image: -ms-linear-gradient(top, #fc3c3c, #d6731c);
  background-image: -o-linear-gradient(top, #fc3c3c, #d6731c);
  background-image: linear-gradient(to bottom, #fc3c3c, #d6731c);
  text-decoration: none;
}

//jQuery// 

var buttons = document.querySelectorAll('button' ),
  count = 0;

buttons.forEach(button => {
  button.onclick = function() {
    button.dataset.likes = parseInt(button.dataset.likes) +1
    button.innerHTML = "Like " + button.dataset.likes;
  };

});
sorry, but that is just simple stuff
super simple, and really cool, if you want to see how the buttons works, here is my portfolio
dinesh
@1532j0004kg
Nov 07 2017 04:01
$(".tweet").attr("href","https://twitter.com/intent/tweet") ; @sorinr
is it right?
Isaiah Trembley
@IsaiahCT
Nov 07 2017 04:02
hope that is a cool button
dinesh
@1532j0004kg
Nov 07 2017 04:03
nice one
Sorin Ruse
@sorinr
Nov 07 2017 04:03
@1532j0004kg yes but if the $(".tweet") is a button i will change it into an <a href=""> and style the anchor in css to look like a button
dinesh
@1532j0004kg
Nov 07 2017 04:04
ok still that is not working.
@sorinr
check this dude
dinesh
@1532j0004kg
Nov 07 2017 04:15
$(".tweet").click(function(){
$(".tweet").attr("href","https://twitter.com") ;
});
is it okay?
.tweet is a class for the button.
gaitchs gangmei
@gaitchs
Nov 07 2017 04:17
can someone help me explain the countdown timer of a website hosted in heroku with environment variables. i can add you as collaborator. trying to make another countdown website and its not working
Sorin Ruse
@sorinr
Nov 07 2017 04:19
@1532j0004kg something like this
Ghana Phuyel
@gsphuyel
Nov 07 2017 04:19
function telephoneCheck(str) {
  // Good luck!
  var regex = /\b\d?\s?\(?\d{3}\)?\s?\-?\d{3}\s?\-?\d{4}\b/g;

  return regex.test(str);

}



telephoneCheck("(555-555-5555");
Help me with this please
it returns true even if there is only one parenthesis
Christopher Susi
@chrisandsuch
Nov 07 2017 04:26
@gsphuyel I think return regex.test(str); should be just return regex;?
Ghana Phuyel
@gsphuyel
Nov 07 2017 04:29
@chrisandsuch it returns boolean but it returns true even when there is only one parenthesis
Ken Haduch
@khaduch
Nov 07 2017 04:32
@gsphuyel - the problem is that your tests for the literal parentheses \(? and \)? have no coupling between them - the way it is set up, they are both optional, and one or the other or both or neither being there will match. What I found as a solution for this is to break the parenthesized part of the expression into two different cases - either a set of three digits surrounded by an opening and closing parentheses set, or three digits that have no parentheses. Set it up so one or the other of those groupings will match in that position within the phone number string, and it will eliminate the cases where there is only one parenthesis.
Ghana Phuyel
@gsphuyel
Nov 07 2017 04:35
@khaduch Ahh i see. Thanks for the help Ken.
CamperBot
@camperbot
Nov 07 2017 04:35
gsphuyel sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3474 | @khaduch |http://www.freecodecamp.com/khaduch
Faisal
@Faisa1khan
Nov 07 2017 04:41
unction showMap(position) {
// Show a map centered at (position.coords.latitude, position.coords.longitude).
}
// One-shot position request.
navigator.geolocation.getCurrentPosition(showMap); 
why do we need one shoot position request??
one-shot*
dinesh
@1532j0004kg
Nov 07 2017 04:47
@sorinr thanks
CamperBot
@camperbot
Nov 07 2017 04:47
1532j0004kg sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1350 | @sorinr |http://www.freecodecamp.com/sorinr
Ken Haduch
@khaduch
Nov 07 2017 04:51
@FaisalNawaz - I think that the answer is that when you load your page, you want to get the current position coordinates, so you make that request one time, and then use the coordinate data that is returned to set the map position.
Isaiah Trembley
@IsaiahCT
Nov 07 2017 04:53
hey guys
Max Voronov
@maxv
Nov 07 2017 04:53
hello
Ken Haduch
@khaduch
Nov 07 2017 04:55
@IsaiahCT - hey there... what's up?
Isaiah Trembley
@IsaiahCT
Nov 07 2017 04:56
just wondering
why the square wont' show up..
Ken Haduch
@khaduch
Nov 07 2017 05:01
@IsaiahCT - one thing that you need, and I'm not sure if it's the only thing - you class="pillow", and in your CSS you do not have a . in front of the class name - it should be .pillow - that changes where the two little arcs are displayed, but still nothing else showed up.
Max Voronov
@maxv
Nov 07 2017 05:01
@IsaiahCT instead of border-color:2px solid #FFFFFF;
Write border:2px solid #FFFFFF;
Faisal
@Faisa1khan
Nov 07 2017 05:02
@khaduch what will execute first function or the one time shot request?
Ken Haduch
@khaduch
Nov 07 2017 05:04
@FaisalNawaz - in your code, function showMap is the callback function for the geolocation request. So the code navigator.geolocation.getCurrentPosition(showMap); will be activated first, and when it returns, it will trigger the showMap function.
@IsaiahCT - also, you might want to change the color of the border, #FFFFFF is a white border. Change the line in the .front class to this: border:2px solid red; and you will see a rectangle with a red border.
Faisal
@Faisa1khan
Nov 07 2017 05:07
@khaduch thank you , i got it now :smile:
CamperBot
@camperbot
Nov 07 2017 05:07
faisalnawaz sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3475 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Nov 07 2017 05:08
@FaisalNawaz - that's great - you're welcome! Good luck with your project....
Christopher Susi
@chrisandsuch
Nov 07 2017 05:23
Night everyone. Gonna hit the sack. be back tomorrow
Ghana Phuyel
@gsphuyel
Nov 07 2017 06:26

function telephoneCheck(str) {
// Good luck!
var regex = /^[1]?\s?(\d{3}|(\d{3}))[-\s]?\d{3}[-\s]?\d{4}?/;

return regex.test(str);

}

telephoneCheck("(555-555-5555");

function telephoneCheck(str) {
  // Good luck!
  var regex = /^[1]?\s?(\d{3}|\(\d{3}\))[\-\s]?\d{3}[\-\s]?\d{4}?/;

  return regex.test(str);

}

telephoneCheck("(555-555-5555”);
I got it all right for the test except for this two input
27576227382 &. (275)76227382
What did i do wrong?
Ghana Phuyel
@gsphuyel
Nov 07 2017 06:35
Got it…I wrote ‘?’ Instead of ‘$’ at the end of the regular expression
NIKHIL CM
@softmantk
Nov 07 2017 07:17
Hi Guys, How can I build mobile web application in 2017. What is the latest stable but trending technology ? I have a client and he is suggesting Jquery mobile or JQTouch. But I feel both are very old technologies. I have to use Dexiejs ( framework for IndexedDb) along with the choses framework.
Any idea guys ?
Long Nguyen
@longnt80
Nov 07 2017 07:27
@softmantk react is the rage right now
BabyKosh
@badbabykosh
Nov 07 2017 08:55
QUESTION: Angular2/4 how do I get less verbose error messages after running “ng test” (I get pages of stuff that I have to scroll to the top of to see the actuall error)
Jack Lyons
@JackEdwardLyons
Nov 07 2017 09:04
Hey guys I have a question about searching through an array of arrays ---> each array item is full of names ... So you are given a search term, then I need to search through 3 arrays with multiple strings inside... ill try to show an example
BabyKosh
@badbabykosh
Nov 07 2017 09:20
this is useless
A-J Roos
@Asjas
Nov 07 2017 09:22
@badbabykosh ?
What is useless?
Markus Kiili
@Masd925
Nov 07 2017 09:28
@badbabykosh Gitter has Angular and angular.js rooms that might help you better.
abraham anak agung
@padunk
Nov 07 2017 09:32
@softmantk React Native ? :)
Faisal
@Faisa1khan
Nov 07 2017 10:36
Markus Kiili
@Masd925
Nov 07 2017 10:37
@FaisalNawaz Check the errors on browser developer tools console.
Jan
@pungiish
Nov 07 2017 13:28
Das it booiz, i am on the short list of candidates and got another meeting on thursday. Any advice? I had to solve three pretty simple take home projects, i'll probably have to explain how i did things right?
A-J Roos
@Asjas
Nov 07 2017 13:36
@pungiish Congrats. You can make notes on what libraries you used and why. Did you choose to not use a library, then give a reason for it. Did you learn anything new whilst doing the projects that you did not know before. And then give where you got your answer. Also give design choices.
Jan
@pungiish
Nov 07 2017 14:08
@Asjas thank you, I'm going to do that!
CamperBot
@camperbot
Nov 07 2017 14:08
pungiish sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @asjas |http://www.freecodecamp.com/asjas
Jack Lyons
@JackEdwardLyons
Nov 07 2017 16:36
hey guys i have a pretty noob question but i really wanna get to the bottom of it
https://codepen.io/JackEdwardLyons/pen/ZapMQM?editors=0011
findIndex should work... but maybe i am doing it wrong?
it returns the index of the nested array, but i want it to return the index of the outer array
Chris Rutherford
@cjrutherford
Nov 07 2017 16:41
just a quick question about the CSS :after selector, there's a content property. What can you put in there? more html?
Tom
@moT01
Nov 07 2017 16:42
@JackEdwardLyons i took a real short look
do you need to like map the properties as well
?
Jack Lyons
@JackEdwardLyons
Nov 07 2017 16:42
cool,
well... i want to just get the absolute index
ie the position of where that specific item in the ACCOUNT_DATA array
@moT01
so... the ACCOUNT_DATA array has 3 items ( nested arrays )
I am going into the nested arrays to check if the name property includes a specific search term
then I get a positive result,but I can't return the absolute index
(3) [Array(0), Array(1), Array(0)]
that's a positive result ( it's index 1 ) but i need that result as a variable
@cjrutherford you can put text, html, unicode characters etc
Tom
@moT01
Nov 07 2017 16:46
change find to findIndex
not sure that's what you're looking for or not
Chris Rutherford
@cjrutherford
Nov 07 2017 16:47
@JackEdwardLyons thanks for that, I was going to put more Html in there, but it wasn't parsed as Html, just plain text
CamperBot
@camperbot
Nov 07 2017 16:47
cjrutherford sends brownie points to @jackedwardlyons :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @jackedwardlyons |http://www.freecodecamp.com/jackedwardlyons
Tom
@moT01
Nov 07 2017 16:47
im not sure what you're trying to get
Jack Lyons
@JackEdwardLyons
Nov 07 2017 16:50
hi @moT01 I am trying to search the ACCOUNT_DATA Proprety Name attribute
but it is nested
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Nov 07 2017 16:50
hello everyone :)
Jack Lyons
@JackEdwardLyons
Nov 07 2017 16:51
so I first map over it, and drill into the Property key
then, I want to search the Name attribute within the Property
In my codepen, I have a positive result, but i don't know how to return it as an index of the larger ACCOUNT_DATA array
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Nov 07 2017 16:51
Hii Jack
Jack Lyons
@JackEdwardLyons
Nov 07 2017 16:51
hi @vipuldcoder
Tom
@moT01
Nov 07 2017 16:52
so your looking for 1 ?
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Nov 07 2017 16:52
have you done any contribution in open source?
Tom
@moT01
Nov 07 2017 16:52
in that case
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Nov 07 2017 16:52
@JackEdwardLyons @moT01
Jack Lyons
@JackEdwardLyons
Nov 07 2017 16:52
no i havent @vipuldcoder
Tom
@moT01
Nov 07 2017 16:52
@vipuldcoder not really
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Nov 07 2017 16:52
:(
Jack Lyons
@JackEdwardLyons
Nov 07 2017 16:52
i try to help out here on the chat room as much as i can
gaitchs gangmei
@gaitchs
Nov 07 2017 16:53
need help with countdown timer
Jack Lyons
@JackEdwardLyons
Nov 07 2017 16:56
maybe this will work @moT01
var data = ACCOUNT_DATA.map( ( item, index ) => {
  return item.Properties.filter( ( prop, key ) => {
    if ( prop.Name.includes( 'Awesome' ) ) {
      return item;
    }
  })
})

console.log( 'data', data.findIndex( item => item.length ) )
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Nov 07 2017 17:12
Hello Jac
hello
mosbypriscilla
@mosbypriscilla
Nov 07 2017 17:35
Hello everyone. Question about using a border on images. I noticed on lesson 21's exercise that once you put a 10px border around the 100px image, it shrinks because of the width and height of the border from 100px to 80px. If I wanted the image to remain 100px with a 10px border without it reszing the image down, how would you do that?
Christopher Susi
@chrisandsuch
Nov 07 2017 17:39
@mosbypriscilla of the top of my head you could just increase the image to 120px then when you apply the border you’ll end up with 100px maybe?
mosbypriscilla
@mosbypriscilla
Nov 07 2017 17:43
@chrisandsuch AHHHH duh! It's like using math lol thank you very much
CamperBot
@camperbot
Nov 07 2017 17:43
mosbypriscilla sends brownie points to @chrisandsuch :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @chrisandsuch |http://www.freecodecamp.com/chrisandsuch
Christopher Susi
@chrisandsuch
Nov 07 2017 17:44
@mosbypriscilla there may be a more appropriate way of doing that. hope it works for you
mosbypriscilla
@mosbypriscilla
Nov 07 2017 17:46
@chrisandsuch yeah. there's also from what someone else shared with me a box-sizing attribute and then use border-xo as the value
box-sizing: border-box;
@chrisandsuch your method actually worked, but the box-sizing did not. I'll have to research more about that
Christopher Susi
@chrisandsuch
Nov 07 2017 17:53
@mosbypriscilla did you adjust the padding?
mosbypriscilla
@mosbypriscilla
Nov 07 2017 17:57
@chrisandsuch no.. when you use the box-sizing attribute, do you have to adjust the padding?
A-J Roos
@Asjas
Nov 07 2017 19:09
@mosbypriscilla You don't use padding. It will only make the content smaller as box-sizing: border-box sets the overall width & height of an element to what you set the original element. It does not enlarge as you use borders or padding
Here is a MDN link that explains the difference between content-box and border-box and how to calculate how to size an element using each
A-J Roos
@Asjas
Nov 07 2017 19:15
Basically the standard content-box adds any border to the overall width and height of an element making it bigger and border-box adds the border to the inside of an element making the content part smaller but the widht and height stays as you set it
ismail
@ismail2009
Nov 07 2017 19:20
hi guys
any one here
I have a problem
I want some help
plesase
please
Tom
@moT01
Nov 07 2017 19:21
just ask
A-J Roos
@Asjas
Nov 07 2017 19:22
@ismail2009 No need to spam. You ask a question and if someone can help they will then answer
ismail
@ismail2009
Nov 07 2017 19:25
I make the header of my website but that I should nest in the header the nav and the word about me after nav in sperate
<header >
<div class="container">
<div class="logo">
</div>
<nav>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#about-us">About use</a></li>
<li><a href="#skills-works">Our Skills</a></li>
<li><a href="#contact-me">Contact me</a></li>
</ul>
</nav>
<!-- <div id="Home" class="page-header"> </div> -->
</div>
</header>
I want to put another div after nav that took about me with back ground -image property
@moT01 @Asjas
A-J Roos
@Asjas
Nov 07 2017 19:28
Can you perhaps post a codepen link? So that we can see what is not working? It's hard to figure out what you are trying to do with parts of some code
ismail
@ismail2009
Nov 07 2017 19:31
I want to make a background like this website
to make like that header with that navegation and home
@Asjas @moT01
A-J Roos
@Asjas
Nov 07 2017 19:37
Looking at that website it seems it's a header with a nav inside it and then a div outside the header. For the image
ismail
@ismail2009
Nov 07 2017 19:39
actually I write a class call container this is the property of it
and give the nav this class
Sujit Karki
@Swoozeki
Nov 07 2017 19:39
Can somebody help me?
I basically have a vertically centered element. When the element grows larger than the viewport however, the top portion becomes hidden, while the bottom portion is scrollable. I know how to do it with javascript, but I'm wondering if there's a simple solution to remove verticle-centering in such a case
ismail
@ismail2009
Nov 07 2017 19:39
ax-width: 1200px;
width: 100%;
margin: 0 auto;
Sujit Karki
@Swoozeki
Nov 07 2017 19:55
How can I remove vertical-centre when the element is bigger than its parent element? Any way to this in CSS, as opposed to JS? I'm using bootstrap btw if that's relevant
Jaimus
@JVeeKay
Nov 07 2017 19:55
Hey room! I'm having a problem with a page layout and was wondering if someone might be able to help me with some advice...
If anyone is available. :)
Tom
@moT01
Nov 07 2017 19:56
just ask
Jaimus
@JVeeKay
Nov 07 2017 19:57
oh ok. Never been in here, didn't know how it works. :)
A-J Roos
@Asjas
Nov 07 2017 19:58
@Swoozeki Give the parent element a min-height instead of height or max-height. You need to allow it to grow with the child element
Try and see if it works
Jaimus
@JVeeKay
Nov 07 2017 19:59
Umm... ok so on the menu page here: https://jveekay.github.io/Infinite-BBQ/menu.html I have an item nd price layout with BS4. Basically it's a column of h5 and h6. The h5 is floated left and the h6 is floated right. It works fine until about the third section and the floats start getting crazy. The only way I can make it work is if I throw a div class="clear fix" after each h5/h6 group. I'm pretty sure thats a crappy way of doing things and I was hoping to see if someone had a better idea to get the same layout.
Thanks in advance. Also, the site hasn't been completely worked up for mobile so it's better on a larger screen width for the moment.
Thanks in advance :) I appreciate the help.
Tom
@moT01
Nov 07 2017 20:05
whats going craz
y
Sujit Karki
@Swoozeki
Nov 07 2017 20:05
@Asjas Well, the parent element is viewport-height, so that's not a solution I'm looking for. What's happening is that the child element that's vertically-centered sometimes grows larger than the viewport. But I need the element to not be centered anymore when its larger than viewport
I could do it in JS, but I'm inquiring if there's a CSS solution
or Bootstrap solution
Jeevan Prakash
@jeevan-jp
Nov 07 2017 20:06
Jaimus
@JVeeKay
Nov 07 2017 20:08
@moT01 If I don't add a div with clear fix after each set of item and price the floats start breaking. I mean I don't care if i have to add that div but it doesn't seem like a great solution to me. Since there is four more menu sections and some of them have 10 items in them.
Does that make sense?
@jeevan-jp ok I'll take a look. thanks. :)
CamperBot
@camperbot
Nov 07 2017 20:08
jveekay sends brownie points to @jeevan-jp :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @jeevan-jp |http://www.freecodecamp.com/jeevan-jp
Jaimus
@JVeeKay
Nov 07 2017 20:10
Screen Shot 2017-11-07 at 1.10.14 PM.png
Tom
@moT01
Nov 07 2017 20:11
is there a problem there?
i sort of understand
but i was hoping to see exactly what was happening
looks fine for the most part, the prices some times get a little misaligned
Sujit Karki
@Swoozeki
Nov 07 2017 20:12
How do I turn a container from align-items: center to align-items: flex-start if container grows larger than its parent element?
Tom
@moT01
Nov 07 2017 20:12
i use flex a lot, it's often a good solution - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - i use that resource a lot
Jaimus
@JVeeKay
Nov 07 2017 20:12
So basically that section... the items are h5's and the price is an h6 the h5 is floated to the left and the h6 is to the right. But after a few sections like this they start stacking on top of each other instead of being laid out like above. So I "fixed" it by putting a div with clear fix between them. like this..
<div class="row" id="menu">
        <div class="col-sm-5">
          <h5>Sliced Brisket</h5>
          <h6>$8</h6>
          <div class="clearfix"></div>
          <h5>Chopped Brisket</h5>
          <h6>$8</h6>
          <div class="clearfix"></div>
          <h5>Pulled Pork</h5>
          <h6>$8</h6>
          <div class="clearfix"></div>
          <h5>Smoked Sausage</h5>
          <h6>$8</h6>
          <div class="clearfix"></div>
          <h5>Smoked Chicken</h5>
          <h6>$8</h6>
        </div>
        <div class="col-sm-1"></div>
        <div class="col-sm-5">
          <h5>Sandwich w/ 1 side</h5>
          <h6>$9</h6>
          <div class="clearfix"></div>
          <h5>Hawaiian Pork</h5>
          <h6>$9</h6>
          <div class="clearfix"></div>
          <h5>Hawaiian Pork w/ 1 side</h5>
          <h6>$10</h6>
          <h5>Smoked Sausage Dog</h5>
          <h6>$5</h6>
          <h5>Smoked Sausage Dog w/ 1 side</h5>
          <h6>$6</h6>
        </div>
But this sucks.
Tom
@moT01
Nov 07 2017 20:15
yea, that doesn't look fun
that's a nice looking site, by the way
Jaimus
@JVeeKay
Nov 07 2017 20:15
if I take those divs out...it all goes wonky. So I don't really know what to do :(
Really???? You like it??? No kidding! Holy crap thanks SO MUCH for that
Tom
@moT01
Nov 07 2017 20:15
yea, there's a number of ways to fix that
Jaimus
@JVeeKay
Nov 07 2017 20:16
@moT01 Thanks!
CamperBot
@camperbot
Nov 07 2017 20:16
jveekay sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 898 | @mot01 |http://www.freecodecamp.com/mot01
Jaimus
@JVeeKay
Nov 07 2017 20:16
Its my second solo project of ever lol.
Tom
@moT01
Nov 07 2017 20:17
let me try and come up with a flex solution real quick
A-J Roos
@Asjas
Nov 07 2017 20:18
@Swoozeki CSS doesn't have detection built in AFAIK. But flexbox can grow in size if you set the flex-grow property
Jaimus
@JVeeKay
Nov 07 2017 20:19
Dude you would be my hero today I appreciate that so much. I tried to come up with a solution all day yesterday and I think I'm just so rabbit holed that I'm not thinking clearly about it.
quickspeedy
@quickspeedy
Nov 07 2017 20:28

I am having issue using https://cors-anywhere.herokuapp.com/ as a cors for this api url https://api.wunderground.com/api/226bcd87f031a8d5/conditions/q/"+state+"/"+city+".json", these codes are located in function autocomplete(object, val). I still get an error with cross-origin and I searched for solutions online and most recommended to concatenate https://cors-anywhere.herokuapp.com/ and https://api.wunderground.com/api/226bcd87f031a8d5/conditions/q/"+state+"/"+city+".json" but no luck.

Note: You will get the error in the console when you type in something in the search bar.
Codepen: https://codepen.io/quickspeedy/pen/BmBWoQ

Tom
@moT01
Nov 07 2017 20:28
@JVeeKay im playing around a bit https://s.codepen.io/pen/?editors=1100
not quite finding what i want
mosbypriscilla
@mosbypriscilla
Nov 07 2017 20:28
@Asjas Awesome!!! Now I see! box-sizing: content-box; was it! that makes much more sense now. Thank you so much!
CamperBot
@camperbot
Nov 07 2017 20:28
mosbypriscilla sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @asjas |http://www.freecodecamp.com/asjas
Jaimus
@JVeeKay
Nov 07 2017 20:30
@moT01 Hey... take your time. I appreciate your help very much. I'm down for whatever if I can keep the layout somewhat similar. But I'm also open to suggestions too. :)
Tom
@moT01
Nov 07 2017 20:30
i dont think i saved before i sent that first link
Jaimus
@JVeeKay
Nov 07 2017 20:30
yeah its empty. :)
A-J Roos
@Asjas
Nov 07 2017 20:30
@Swoozeki How does the child element become bigger than the parent element? Can you explain how it happens? Is it because the browser is being resized to a smaller size or is it being fed more data than the child element originally is?
Tom
@moT01
Nov 07 2017 20:31
@Asjas i was wondering that myself, a transition?
transform
Jaimus
@JVeeKay
Nov 07 2017 20:32
I noticed that the home link wasn't working either but I just pushed that fix to github if you want to see the home page :)
Stephen James
@sjames1958gm
Nov 07 2017 20:32
@quickspeedy Did you try that with the other URL https://autocomplete.wunderground.com
A-J Roos
@Asjas
Nov 07 2017 20:32
Yeah unless it's being fed data somehow or something is happening dynamically a element does not usually change size so much that it overflows
And if it's overflowing because it's being resized to tablet or mobile it can be fixed with @media queries
Jaimus
@JVeeKay
Nov 07 2017 20:33
:coffee: time... brb in a sec.
quickspeedy
@quickspeedy
Nov 07 2017 20:37
@sjames1958gm facepalm Thanks, guess I was just too focused on the other functions. One issue, is that it is really slow. Is there another way to solve this? Like using JSONP?
CamperBot
@camperbot
Nov 07 2017 20:37
quickspeedy sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8680 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Nov 07 2017 20:38
@quickspeedy jsonp might help if you can eliminate a hop through the cors proxy, but it likely is going to depend on the far ends responsiveness.
quickspeedy
@quickspeedy
Nov 07 2017 20:39
Oh ok, guess I would have to buy a server to help speed it up right? @sjames1958gm
A-J Roos
@Asjas
Nov 07 2017 20:39
No. What do you want to speed up?
@quickspeedy
quickspeedy
@quickspeedy
Nov 07 2017 20:40
@Asjas Speed up when typing something in the search bar and it quickly returns result
Right now, as I typed something, the result returns slow.
Stephen James
@sjames1958gm
Nov 07 2017 20:41
@quickspeedy Analyzing where the slow down is would be the first step.
If the API is slow, not much you can do, unless they speed things up for $$ :)
Jaimus
@JVeeKay
Nov 07 2017 20:41
@moT01 dang! thats so much less code!
Tom
@moT01
Nov 07 2017 20:42
i dont know about it
A-J Roos
@Asjas
Nov 07 2017 20:42
Yeah it depends on how you handle the search? Your js file is almost 600 lines. I'm trying to find how you are searching
quickspeedy
@quickspeedy
Nov 07 2017 20:42
@sjames1958gm I tested the API, it's really fast. I guess it's something to do the the proxy server.
Jaimus
@JVeeKay
Nov 07 2017 20:44
@moT01 I like the li option. can I borrow that snippet and see what it does with multiple sections?
A-J Roos
@Asjas
Nov 07 2017 20:44
Just tested searching a couple of times. A fair few it searched quite fast. It might be the proxy that is slowing it down sometimes
Stephen James
@sjames1958gm
Nov 07 2017 20:44
@quickspeedy Likely, since I am seeing 4 sec responses
Tom
@moT01
Nov 07 2017 20:45
@JVeeKay sure borrow, but i wouldn't go that route
quickspeedy
@quickspeedy
Nov 07 2017 20:45
Line 527 is the url where I concatenate proxy website to api website
Line 584 is where I added eventListener for typing
A-J Roos
@Asjas
Nov 07 2017 20:45
Try configuring JSONP. Eliminate the proxy and test your website then
Tom
@moT01
Nov 07 2017 20:45
@JVeeKay take a look at it - shrink the window
quickspeedy
@quickspeedy
Nov 07 2017 20:45
@JVeeKay Yeah, is JSONP part of jQuery?
Stephen James
@sjames1958gm
Nov 07 2017 20:45
@quickspeedy If you open the network tab in the devtools you can see how long it takes to just get a single response
Jaimus
@JVeeKay
Nov 07 2017 20:46
@moT01 oh... ok.. i won't then.
quickspeedy
@quickspeedy
Nov 07 2017 20:46
@sjames1958gm Yeah unfortunately
Tom
@moT01
Nov 07 2017 20:46
top one works pretty good
quickspeedy
@quickspeedy
Nov 07 2017 20:46
Ok will do
Jaimus
@JVeeKay
Nov 07 2017 20:48
@moT01 yeah I like the top one the best. I was using bootstrap so that the second column would shift underneath the first column.. Can you do the same with flexbox?
like this?
Stephen James
@sjames1958gm
Nov 07 2017 20:49
@quickspeedy jQuery supports jsonp by adding callback=? to your URL if you are using $.getJSON
Jaimus
@JVeeKay
Nov 07 2017 20:49
Screen Shot 2017-11-07 at 1.48.53 PM.png
I mean.. I can look that up myself... sorry. just stream of consciousness.
quickspeedy
@quickspeedy
Nov 07 2017 20:50
@sjames1958gm Ok I will try to use that and rewrite my ajax call to jquery.
Tom
@moT01
Nov 07 2017 20:51
@JVeeKay k now check it again
Stephen James
@sjames1958gm
Nov 07 2017 20:52
@quickspeedy :+1: goodluck
quickspeedy
@quickspeedy
Nov 07 2017 20:53
Thanks! @sjames1958gm
CamperBot
@camperbot
Nov 07 2017 20:53
quickspeedy sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Jaimus
@JVeeKay
Nov 07 2017 20:53
@moT01 DELICIOUS! and no freaking floats! oh man...... thanks so so much.
CamperBot
@camperbot
Nov 07 2017 20:53
jveekay sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
Tom
@moT01
Nov 07 2017 20:54
@JVeeKay this video was helpful if i recall https://www.youtube.com/watch?v=G7EIAgfkhmg
Jaimus
@JVeeKay
Nov 07 2017 20:55
@moT01 Awesome.. I'll go check that out and the ones from above. Learn what I need to do to rebuild this sucker and yeah.. You really made my week Tom. :) if there's anything i can ever help you out with...just let me know :) I'd be happy to.
Tom
@moT01
Nov 07 2017 20:56
what font is that @JVeeKay
like cursivish one
Jaimus
@JVeeKay
Nov 07 2017 20:56
@moT01 i forked that pen so i could save it for later.
it is... let me see. hang on.
caveat or biorhyme on google fonts.
Caveat.
Would you mind terribly checking out the home page? See what you think? Too busy.. etc. I hate the footer right now so don't judge me on that lmfao
Jaimus
@JVeeKay
Nov 07 2017 21:02
And last annoying question.. if I continue to use BS rows to separate rows can I use this inside a BS row and container? or will that mess up the whole thing?
Tom
@moT01
Nov 07 2017 21:03
not sure
flex will take up a whole row i think by default
yea, i dont think you'll need row there, give it a try
the site looks good, i know you're still working on it
the picture gets distorted
the nav is too tall when the window gets smaller
Jaimus
@JVeeKay
Nov 07 2017 21:10
@moT01 Yeah there's a few things I need to fix. I just figured out how to "host" it in GHPages so I could see whats going on. It's for a friends food truck here where I live and I'm trying some new things. So far I'm stoked about it but it needs some definite tweaking :)
I'm really excited about Flexbox. I had planned on looking into it but I wanted to try and use BS4 this time. Not gonna lie I'm feeling like there's a lot of challenges with version 4. I'm not really feeling the cards situation, and there's some glitchy stuff with the new navbars. I dunno. I'm gonna spend some time after this with Flexbox and Grid and see what they have to offer.
I'm so glad people were in here today! This is awesome! Ive been hanging out in the main chat for a week or so and they're awesome but it's nice to talk about FE stuff too !
Tom
@moT01
Nov 07 2017 21:14
@JVeeKay flex is awesome - i dont know grid yet
Jaimus
@JVeeKay
Nov 07 2017 21:17
It looks super rad. I kind of was tempted to learn it on this project but I ended up thinking I better stick to what I kinda know. It's my first time trying to structure Sass as well.
Ahhh that video! I Love Travis!
Theo M.
@cnngraphics
Nov 07 2017 21:31
Hello All, how do I write the "options" of a get request to pass a headers: 'Authorization': 'Bearer'+token
A-J Roos
@Asjas
Nov 07 2017 21:34

@cnngraphics

$.ajax{
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

You can check out this w3schools link. At the bottom you'll find a heading Syntax. It gives you all the parameters you can use

Theo M.
@cnngraphics
Nov 07 2017 21:35
Awesome @Asjas THanks!
CamperBot
@camperbot
Nov 07 2017 21:35
cnngraphics sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @asjas |http://www.freecodecamp.com/asjas
Theo M.
@cnngraphics
Nov 07 2017 21:35
@Asjas however, I was looking for the Angular way!
A-J Roos
@Asjas
Nov 07 2017 21:36
Didn't know you meant AngularJS
quickspeedy
@quickspeedy
Nov 07 2017 21:43
@sjames1958gm After rewriting ajax to jQuery and setting it to jsonp, I get this error after I typed in the search bar something.
Error: Uncaught SyntaxError: Unexpected token :
Codepen: https://codepen.io/quickspeedy/pen/EbgzWy
A-J Roos
@Asjas
Nov 07 2017 21:51
@quickspeedy Something is adding :1. You are logging stuff to the console. Go check there and you'll see it too
You need to find what it is
quickspeedy
@quickspeedy
Nov 07 2017 21:52
Ignore that, that was for testing purpose @Asjas
A-J Roos
@Asjas
Nov 07 2017 21:53
Okay. But something is still adding :1 to the url. Which is why you are getting the unexpected token : error
If you search for something and open your console.log you'll see a json object being logged and the number 1 being logged. the character : isn't being logged because that is what is bugging out.
Only the json object should be returned
quickspeedy
@quickspeedy
Nov 07 2017 21:56
I am not able to see :1 in the console
@Asjas
A-J Roos
@Asjas
Nov 07 2017 21:58
It's gone now. only 1 was logged. Not :1
quickspeedy
@quickspeedy
Nov 07 2017 21:58
ok
but where is :1?
A-J Roos
@Asjas
Nov 07 2017 21:58
@quickspeedy Found the :. Posting a screenshot for you
chrome_devtools.png
Ajax is expecting JSONP and it's not expecting RESULTS: [. That is where the error comes from
Stephen James
@sjames1958gm
Nov 07 2017 22:03
@quickspeedy I am thinking that weather underground does not support jsonp
quickspeedy
@quickspeedy
Nov 07 2017 22:03
Thanks, so what is the workaround issue? I know that wunderground api supports jsonp but I don't why I get this error. @Asjas
CamperBot
@camperbot
Nov 07 2017 22:03
quickspeedy sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @asjas |http://www.freecodecamp.com/asjas
A-J Roos
@Asjas
Nov 07 2017 22:03
I read their website. They said they support json and xml.
quickspeedy
@quickspeedy
Nov 07 2017 22:03
@sjames1958gm I checked their api and they do support jsonp.
A-J Roos
@Asjas
Nov 07 2017 22:03
Can you point to where they show how to implement jsonp?
quickspeedy
@quickspeedy
Nov 07 2017 22:04
Stephen James
@sjames1958gm
Nov 07 2017 22:06
@quickspeedy so jquery is using callback as the parameter - and not recognized by the API?
A-J Roos
@Asjas
Nov 07 2017 22:06
@quickspeedy I see that cb allows it to use jsonp. But I can't see where you added cb to your URL?
On line 519 change your URL to var url = "https://autocomplete.wunderground.com/aq?query=" + val + "&c=US&cb=?";
quickspeedy
@quickspeedy
Nov 07 2017 22:07
@Asjas I did added it but I kept getting an error.
so cb=??
A-J Roos
@Asjas
Nov 07 2017 22:08
Yes correct
quickspeedy
@quickspeedy
Nov 07 2017 22:08
what does ? means?
A-J Roos
@Asjas
Nov 07 2017 22:10
I don't have the exact answer. It's the same reason we use callback=? as @sjames1958gm earlier said. It's a part of the syntax
But it now makes your codepen work. The website return jsonp and not json.
And it's quite a lot faster so far on my side
Stephen James
@sjames1958gm
Nov 07 2017 22:10
@quickspeedy I think it is just a key that jquery looks for
quickspeedy
@quickspeedy
Nov 07 2017 22:11
oh ok all right. @Asjas Thanks! Yes it worked and it is faster!
CamperBot
@camperbot
Nov 07 2017 22:11
quickspeedy sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
api offline
quickspeedy
@quickspeedy
Nov 07 2017 22:11
@sjames1958gm Thanks for the explanation
CamperBot
@camperbot
Nov 07 2017 22:11
quickspeedy sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8681 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Nov 07 2017 22:13
@quickspeedy :+1:
Oleksandr
@oakostenko
Nov 07 2017 22:29
guys. I have some problems with one challenge. I did some recursion stuff in one challenge and now everytime I try to go to that challenge page it doesn't respond. I tried to clean cache but it didnt help. I think it saves the progress on server side.
can anyone help?
Christopher Susi
@chrisandsuch
Nov 07 2017 22:35
@oakostenko did you try logging out and restarting the browser?
Christopher Brown
@ChrisBrownie55
Nov 07 2017 22:37
@oakostenko you could try disabling JavaScript in your browser temporarily and if possible from there delete the problematic code
Oleksandr
@oakostenko
Nov 07 2017 22:41
@chrisandsuch yes, I tried. @ChrisBrownie55 good suggestion! thx
CamperBot
@camperbot
Nov 07 2017 22:41
oakostenko sends brownie points to @chrisandsuch and @chrisbrownie55 :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @chrisbrownie55 |http://www.freecodecamp.com/chrisbrownie55
:cookie: 268 | @chrisandsuch |http://www.freecodecamp.com/chrisandsuch
Oleksandr
@oakostenko
Nov 07 2017 22:45
@ChrisBrownie55 it doesn't show code part of the page without js so I can't change it(
Christopher Brown
@ChrisBrownie55
Nov 07 2017 22:56
@oakostenko https://forum.freecodecamp.org/t/free-code-camp-infinite-loop-protection/19550 it was the first thing in the technical support page on freecodecamp
Christopher Susi
@chrisandsuch
Nov 07 2017 23:04
@oakostenko @ChrisBrownie55 so do you think it might of been an infinite loop? Probably from the fact he was working with recursion stuff? I found the solution on that link. Thanks @ChrisBrownie55. By default, the Free Code Camp site automatically loads and runs your last recorded solution. If you have accidentally created an infinite loop or other irrecoverable error or simply don’t trust the code, you can disable code auto-run by putting the following in your URL: run=disabled
CamperBot
@camperbot
Nov 07 2017 23:04
chrisandsuch sends brownie points to @oakostenko and @chrisbrownie55 :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @chrisbrownie55 |http://www.freecodecamp.com/chrisbrownie55
:cookie: 272 | @oakostenko |http://www.freecodecamp.com/oakostenko
Christopher Susi
@chrisandsuch
Nov 07 2017 23:07
@ChrisBrownie55 inifinite loops only causes our browser crash right? the server is protected from that? not sure how it works exactly.
Oleksandr
@oakostenko
Nov 07 2017 23:08
@ChrisBrownie55 thx! I had to find it myself. I am ashamed. Sorry
CamperBot
@camperbot
Nov 07 2017 23:08
oakostenko sends brownie points to @chrisbrownie55 :sparkles: :thumbsup: :sparkles:
api offline
Christopher Brown
@ChrisBrownie55
Nov 07 2017 23:12
@chrisandsuch JavaScript is run in the browser so it can’t affect the server when it loops forever, only the browser. When it loops forever it uses up all the system resources and crashes the application
Oleksandr
@oakostenko
Nov 07 2017 23:13
@chrisandsuch ye. Loop Protect cannot detect infinite recursion .
Christopher Susi
@chrisandsuch
Nov 07 2017 23:16
@ChrisBrownie55 @oakostenko that makes sense with javascript. what is the difference btwn infinite recursion and infinite loop ? Are there ways to protect against infinite recursion?
Christopher Brown
@ChrisBrownie55
Nov 07 2017 23:20
@chrisandsuch An infinite loop is like for (let i = 0; i > -1; ++i){stuff} and recursion is function aName(){aName()} basically a function calling itself
Oleksandr
@oakostenko
Nov 07 2017 23:24

@chrisandsuch from loop-protect specification: "...This code protects most cases where user code includes an infinite loop using a while, for or do loop.

Note that this does not solve the halting problem but simply rewrites JavaScript (without an AST) wrapping loops with a conditional break. This also does not protect against recursive loops."

Christopher Susi
@chrisandsuch
Nov 07 2017 23:29
@ChrisBrownie55 for (let i = 0; i > -1; ++i){stuff} that definitely looks infinitely lol.
Christopher Susi
@chrisandsuch
Nov 07 2017 23:35
@oakostenko thanks for the link. So the difference is that infinite recursion is programs or functions depending on the input of other programs or functions for input that leads to break or termination of loop?
CamperBot
@camperbot
Nov 07 2017 23:35
chrisandsuch sends brownie points to @oakostenko :sparkles: :thumbsup: :sparkles:
api offline
alpox
@alpox
Nov 07 2017 23:41
@chrisandsuch infinite recursion is when a function calls itself infinitely without a stop - or multiple functions keep calling each other infinitely. This usually leads to a stackoverflow after a few seconds and the program terminates
Christopher Susi
@chrisandsuch
Nov 07 2017 23:45
@alpox its really interesting to think about ways to protect or halt that. I would imagine you would have to take into account lots of different possible scenarios.
alpox
@alpox
Nov 07 2017 23:48
@chrisandsuch Its usually not that bad. You know when you design a recursive algorithm that you need termination clauses and you count them in as usually the first action you do when creating it. Its the thing you think of first when going recursive
function factorial(n) {
    if(n <= 1) return 1; // Termination / end condition
    return n * factorial(n - 1);
}
You define them upfront to prevent the recursion at the step you need it to stop
Matthew McClure
@m-mcclure
Nov 07 2017 23:51
@moT01 thanks
CamperBot
@camperbot
Nov 07 2017 23:51
m-mcclure sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 899 | @mot01 |http://www.freecodecamp.com/mot01
Christopher Susi
@chrisandsuch
Nov 07 2017 23:52
@alpox wouldn’t that first return n take you out of the function before return n * factorial(n - 1);?
alpox
@alpox
Nov 07 2017 23:53
@chrisandsuch Yes thats exactly the point. But it returns n out of the function only if n is smaller or = 1
Christopher Susi
@chrisandsuch
Nov 07 2017 23:53
@alpox probably looking at that wrong, my eyes are tired from going through some lessons
alpox
@alpox
Nov 07 2017 23:54
@chrisandsuch So that condition does not hold for if you give in 5 as example.
In that case you don't return 5;. You return 5 * factorial(4);
In the next recursion call it calls return 4 * factorial(3); then return 3 * factorial(2) then return 2 * factorial(1); then 1 <--- end condition
Christopher Susi
@chrisandsuch
Nov 07 2017 23:56
@alpox oh yeah! I see it now. Thanks for the help. Wow that is really creative. I never thought about writing a function like that.
CamperBot
@camperbot
Nov 07 2017 23:56
chrisandsuch sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1443 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Nov 07 2017 23:57
@chrisandsuch In some programming languages thats the way you do all looping :D
Its very expressive actually
But for the beginning, hard to think about and track
Christopher Susi
@chrisandsuch
Nov 07 2017 23:59
@alpox I can’t wait till I finish reviewing some css stuff. I should be getting to the javascript stuff soon. When you were just starting out how long did it take for that type of thinking to become natural?