These are chat archives for FreeCodeCamp/HelpFrontEnd

26th
Mar 2018
coderNewby
@coderNewby
Mar 26 2018 04:06
@DarrenfJ PM for you. thanks in advance :D
CamperBot
@camperbot
Mar 26 2018 04:06
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2438 | @darrenfj |http://www.freecodecamp.org/darrenfj
Amit Patel
@AmitP88
Mar 26 2018 05:44
@sjames1958gm sorry, I knocked out for a bit. yeah, I haven't updated the currentMinutesCount in decrement. That's the part i'm struggling with on how to do. I've tried --currentMinutesCount, currentMinutesCount = --minutes_circle_time, etc but nothing's worked so far
Amit Patel
@AmitP88
Mar 26 2018 06:38
@sjames1958gm I got it to work :)
https://amitp88.github.io/Pomodoro-Timer/ I just need to fine-tune it (minute circle seems to be off by 1 minute when messing around with the timer, but that should be easy)
gerome0123
@gerome0123
Mar 26 2018 08:41
can i delete an array object by id???
or splice by id??
not the index
Markus Kiili
@Masd925
Mar 26 2018 08:43
@gerome0123 Could you post a code example of what you mean?
Dimitris Nik.
@dimitrissnk
Mar 26 2018 08:46
Hey guys, I am building the "random quote machine" and I am having trouble placing the twitter image in the small twitter div which I have created, can somebody help me out? https://codepen.io/dimitris51/pen/NYaqxN
Markus Kiili
@Masd925
Mar 26 2018 08:49
@Dimitrios51 Try setting width:100% and height:100% on the image.
gerome0123
@gerome0123
Mar 26 2018 08:54
var arrayOfObjects = [{id:'abc',name:'oh'}, // delete me {id:'efg',name:'em'}, // all thst should remain {id:'hij',name:'ge'}] // all that should remain
Dimitris Nik.
@dimitrissnk
Mar 26 2018 08:56
@Masd925 It doesnt work..
gerome0123
@gerome0123
Mar 26 2018 08:56
var arrayOfObjects = [{id:'abc',name:'oh'}, // delete me
{id:'efg',name:'em'}, // all thst should remain
{id:'hij',name:'ge'}] // all that should remain
gerome0123
@gerome0123
Mar 26 2018 09:02
var removeIndex = arrayOfObjects.map(function(item) { return item.id; }).indexOf(idof arrayOfObjects);
arrayOfObjects.splice(removeIndex, 1);
this help me thanks all
Markus Kiili
@Masd925
Mar 26 2018 09:03
@gerome0123 ES6 also has .findIndex() which suits this problem.
h1tag
@h1tag
Mar 26 2018 09:03
@Dimitrios51 there's already twitter icons by Font Awesome, if you'd like to u use those
Ian
@toianw
Mar 26 2018 09:04

@Dimitrios51 it's because your twitter image is getting styles by these rules in your css:

img {
      height: 10em;
      width: 15em;
      align: left;
      margin-left: -39em;
      margin-top: 2.5em;
      border-radius: 0.3em;
      display: inline-block;
}

Try using classes to add styles rather than the tags

Stephen James
@sjames1958gm
Mar 26 2018 09:33
@gerome0123 rather than map you can use filter.
arrayOfObjects = arrayofObjects.filter(o => o.id != idToDelete);
@AmitP88 Great. Although I think your minutes circle should match the minutes in the clock even before you start running, and while you are click - or +
Amit Patel
@AmitP88
Mar 26 2018 09:35
@sjames1958gm oh yeah, I noticed that a while ago. I've adjusted it, just need to push it to gh :)
Amit Patel
@AmitP88
Mar 26 2018 09:41
@sjames1958gm ok, just updated my gh-pages. It should be good now
@sjames1958gm oh yeah, I just carefully read what you said. I was having an issue where when the minutes were < 10, the minutes circle was below the amount of actual minutes on the timer. that's what I fixed. As for your suggestion, that's exactly what I want to do next :)
Stephen James
@sjames1958gm
Mar 26 2018 09:43
@AmitP88 Did you update this link yet? https://amitp88.github.io/Pomodoro-Timer/
Amit Patel
@AmitP88
Mar 26 2018 09:44
@sjames1958gm yeah
it should be good now as far as the minutes circle being consistent with the minutes display
working on your suggestion atm. do you think my js needs refactoring though before I do that?
Stephen James
@sjames1958gm
Mar 26 2018 09:46
@AmitP88 When you first load the page and the minutes are 25, the minutes circle is still a full circle
And while - + affect the number it doesn't seem to affect the circle
Amit Patel
@AmitP88
Mar 26 2018 09:47
@sjames1958gm yeah, it only takes affect after hitting the start button (that goes for the + and - too)
but i'm working on getting it to change dynamically when the user clicks the + and - buttons
Markus Kiili
@Masd925
Mar 26 2018 09:47
@AmitP88 If you have good variable/function names and clean code, you could remove most of the comments there.
Amit Patel
@AmitP88
Mar 26 2018 09:47
just looking over my code first to see if it needs cleaning up (there's over 200 lines of js)
@Masd925 good point, I'll start refactoring now actually before I get to the dynamic change of the circles
I'm just testing the timer & circles to make sure things work properly
Stephen James
@sjames1958gm
Mar 26 2018 09:50
@AmitP88 I see several places where you check for < 10 and add in leading '0'
If you refactored your code between changing the numbers and displaying the values you might get less code
Amit Patel
@AmitP88
Mar 26 2018 09:51
@sjames1958gm is there a way to format a number via 00 automatically without adding leading zeros?
Stephen James
@sjames1958gm
Mar 26 2018 09:54
@AmitP88 No, you do have to do that. But you don't have to have that all over the code.
If your run, increment, decrement were only responsible for updating the numbers minutes/seconds and then
You call a function that updates the display based on those values then your code would be much cleaner.
Separate functionality from presentation.
Amit Patel
@AmitP88
Mar 26 2018 09:56
ah I see. so I should make a seperate function solely for the display?
Stephen James
@sjames1958gm
Mar 26 2018 09:56

@AmitP88 You could get your entire clock working from a function point of view where update display was simply

function updateDisplay(min, sec) {
  console.log(`${min}:${sec}`);
}

then once the mechanism was working you could work on getting the display to work

This is somewhat theroretical as you have most all of the display working, but you can still refactor to an updateDisplay function.
Amit Patel
@AmitP88
Mar 26 2018 09:59
@sjames1958gm ah I see. that makes more sense. ok, i'll get to work on it, then once I get things working again and my code refactored, i'll continue to test my timer. thanks man :)
CamperBot
@camperbot
Mar 26 2018 09:59
amitp88 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9135 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Amit Patel
@AmitP88
Mar 26 2018 10:00
@sjames1958gm btw, I know my code is bloated, but is it normal to have bad code when starting on a project and getting it to work? or should I be writing good code from the beginning?
Claudio Restifo
@Marmiz
Mar 26 2018 10:04
@AmitP88
good code
a constant
Amit Patel
@AmitP88
Mar 26 2018 10:04
@Marmiz I see. looks like I have a lot of improving to do
Rob
@PGFracing
Mar 26 2018 10:07
Good what’s the website that show the different size screens from mobile to web? purple page if remember right?
Claudio Restifo
@Marmiz
Mar 26 2018 10:09

@AmitP88 that's a humorous way of saying that there's no real answer to your question :)
The factor are just too much and in the end requirements (or in this case your knowledge) changes, so you'll end up changing lots of stuff anyway.

Just make sure your code is readable so that you (or another human being) will be able to change it in the near future

Amit Patel
@AmitP88
Mar 26 2018 10:11
@Marmiz thanks man lol. yeah, now that I think of it, after I learn and get decent at using React, i'll have to go back to these front end projects and refactor to es6 anyways. I never thought I'd write 200+ lines of code just for a timer! lol
CamperBot
@camperbot
Mar 26 2018 10:11
amitp88 sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1193 | @marmiz |http://www.freecodecamp.org/marmiz
Rob
@PGFracing
Mar 26 2018 10:12
www.sizzy.com is what I was looking for
Stephen James
@sjames1958gm
Mar 26 2018 10:14
@AmitP88 There are certainly some techniques that you can employ in real time to avoid a hot mess but still require refactoring over time.
Having functions that have no parameters, using globals, is one that I see you using.
Many of these you learn over time.
Amit Patel
@AmitP88
Mar 26 2018 10:16
@sjames1958gm true. I was aware of the globals, but I figured I just wanted to get things up and working first, then refactor later. guess I'm paying the price for that now lol
Stephen James
@sjames1958gm
Mar 26 2018 10:19
@AmitP88 :)
Amit Patel
@AmitP88
Mar 26 2018 10:19
lol oh well, learning lesson :P
Javier Pons
@JavierPons
Mar 26 2018 11:18
hi
I need some help with JS arrays
Tom
@moT01
Mar 26 2018 11:21
@JavierPons
Javier Pons
@JavierPons
Mar 26 2018 11:22
Im trying to check and delete any letter from array, only number will stay
var myArray = [1,'a','b',3,5];
console.log(myArray);

myArray.forEach(function(e) {

  if (e == Number.isInteger(e)){
  return myArray + console.log("hello");
  }else{
    return myArray.remove(e);
  }

});
humbly ... what I doing wrong?
@moT01 :+1:
Tom
@moT01
Mar 26 2018 11:23
i dont think .remove is for arrays
not sure if that's the problem or not
Javier Pons
@JavierPons
Mar 26 2018 11:25
mmm... can I use splice like splice(e)?
Tom
@moT01
Mar 26 2018 11:25
sort of
look at the link I gave
you need to give it another parameter
Javier Pons
@JavierPons
Mar 26 2018 11:26
lets see
Tom
@moT01
Mar 26 2018 11:27
look for the examples that say remove 1 element
Claudio Restifo
@Marmiz
Mar 26 2018 11:35
@JavierPons that looks like a job for Array.filter
and filter out anything that's not type number
Javier Pons
@JavierPons
Mar 26 2018 11:35
@Marmiz :+1:
Javier Pons
@JavierPons
Mar 26 2018 11:47
I don't get anything clear
now a have a mess
:(
Claudio Restifo
@Marmiz
Mar 26 2018 11:58

@JavierPons filter will look at each element in an array and will keep any element that return true from the callback function.

for example:

[1,2,3,4,5,6,7,8,9,10].filter(function(el) {
  return el >=5
});
// if you prefer with arrow function
[1,2,3,4,5,6,7,8,9,10].filter(el => el >= 5);

will return a new array with elements that are bigger or equal 5

Stephen James
@sjames1958gm
Mar 26 2018 11:58
@JavierPons Filter is great.
var newArray = oldArray.filter(function(item) { return true if item is to be kept return false if not. });
@JavierPons You will have greater success with arrays, if you learn .map, .filter and .reduce
Javier Pons
@JavierPons
Mar 26 2018 12:01
@sjames1958gm :+1:
Javier Pons
@JavierPons
Mar 26 2018 12:12
how I can compare item of array equal to number or equal to letter?
I dont have very clear
item == isNaN ?
Joshua Frias
@Juke-Magic
Mar 26 2018 12:14
heya guys can someone help me
Markus Kiili
@Masd925
Mar 26 2018 12:15
@Juke-Magic You can just post your question here.
Julio Cesar Peña Velasquez
@Juceztp
Mar 26 2018 12:16

Hi @JavierPons , Yes, array.filter is a good solution but if something helps:

 Number.isInteger(1) // return True
Number.isInteger('1') // return false
1 == Number.isInteger(1) // return True
//But...
2 == Number.isInteger(1) // return False
1 === Number.isInteger(1) // return False
Number.isInteger(1.1) // return False
Number.isInteger(1,1) // return True
// The reason is that the method returns a boolean, 
//If you want to know if it is a number, it is enough with:
if (typeof (e) === 'number')

Another point is that forEach does not return anything, one option is to initialize a variable of type array and save in it the numbers that enter the condition. (Sorry for my english :joy:)

Stephen James
@sjames1958gm
Mar 26 2018 12:31
@JavierPons If you want to filter out all numbers, not just Integers then typeof(e) === 'number' will work.
And since you need the function to return boolean (for filter) and === comparison results in a boolean, no if statement is needed
function(e) { return typeof(e) === 'number; }
NikolaNbgd
@NikolaNbgd
Mar 26 2018 12:35
Hello Folks! I have created post request to the database and after submitting I want to remove form and to show 'thank you' div, but when form is submitted, my div is show only for a second and then form appears again. Here is the code https://codepen.io/anon/pen/yKzQqZ?editors=1111#anon-signup. One more thing, in code pen, I got success in console, but thank you div does not appear at all. Any help, advice? Thanks is advance.
NikolaNbgd
@NikolaNbgd
Mar 26 2018 12:43
in*
Ian
@toianw
Mar 26 2018 12:53
@NikolaNbgd If you open your browser console and click the button, you get this error message.
Uncaught ReferenceError: $ is not defined
Ken Haduch
@khaduch
Mar 26 2018 13:06
@NikolaNbgd - in addition to the previous error mentioned by @toianw - what you have on CodePen is referencing a URL http://localhost:3004/subcriptions, and that isn't going to work on CodePen because it cannot access a "localhost". The other thing that happens with forms is that when you click the "Submit" button, it will try to form another transaction to submit the form to a site. If there is not a URL, it will typically reload the same page in an attempt to handle the form submission. You can prevent that by using a function .preventDefault() that disables that default form submission so that you can handle it locally. the code that you are using to set the "sum" variable: const sum = document.querySelector('#submit'); is "vanilla" JS, and it looks like your call using $(sum) is in the form of a jQuery call, you aren't loading jQuery nor do you need to use it for that particular operation.
NikolaNbgd
@NikolaNbgd
Mar 26 2018 13:17
@toianw @khaduch I solved it, it was a problem in live-server, my bad
but I wanted to ask you guys, is it possible to on click user download some data from database?
Markus Kiili
@Masd925
Mar 26 2018 13:19
@NikolaNbgd Front end JS cannot contact a database for security reasons. You need some backend software or API in between.
NikolaNbgd
@NikolaNbgd
Mar 26 2018 13:22
@Masd925 when backend create me API, how can I on click download some history from database?
Markus Kiili
@Masd925
Mar 26 2018 13:23
@NikolaNbgd You make an ajax request to the api with some info and it returns the response you can use in the front end JS.
Hatem Araar
@WatashiHatem_twitter
Mar 26 2018 13:38
when I add images in the src of the carousel I get big images
what are the predifined dimensions for the images in this carousel
blob
Shariq Shahbaz
@sh4r10
Mar 26 2018 14:26
Guys what is the best approach to making this design
should i use css grid
flexbox
plain css or what
im talking about the div on the right
not the sidebar
German Gamboa Gonzalez
@germangamboa95
Mar 26 2018 14:27
Whatever you feel you can work with the best
Shariq Shahbaz
@sh4r10
Mar 26 2018 14:27
what do you think is the easiest in this case @germangamboa95
German Gamboa Gonzalez
@germangamboa95
Mar 26 2018 14:28
both grid and flexbox.
Shariq Shahbaz
@sh4r10
Mar 26 2018 14:28
should i mix them together?
German Gamboa Gonzalez
@germangamboa95
Mar 26 2018 14:29
Yes sir, I would use grid for the main structure of the page and flex box for everything else.
Shariq Shahbaz
@sh4r10
Mar 26 2018 14:29
Thank you for the suggestions @germangamboa95
CamperBot
@camperbot
Mar 26 2018 14:29
sh4r10 sends brownie points to @germangamboa95 :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @germangamboa95 |http://www.freecodecamp.org/germangamboa95
German Gamboa Gonzalez
@germangamboa95
Mar 26 2018 14:29
Shariq Shahbaz
@sh4r10
Mar 26 2018 14:30
thanks @germangamboa95
CamperBot
@camperbot
Mar 26 2018 14:30
sh4r10 sends brownie points to @germangamboa95 :sparkles: :thumbsup: :sparkles:
api offline
Dimitris Nik.
@dimitrissnk
Mar 26 2018 16:13
Hey guys, I have two problems with my "random quote machine" so far. The first one is with the twitter logo which is in my clickable div which starts disappearing as I resize the window and my second one is that, I can click on the link even outside the div,can somebody help? https://codepen.io/dimitris51/full/NYaqxN/
Ken Haduch
@khaduch
Mar 26 2018 16:25
@Dimitrios51 - it looks like you are scaling the entire window with a shrinking browser window. If you want certain elements to remain visible (large enough to see) then you don't really want to do it that way. It looks like you've pasted your URL into your CSS window, too? At least I'm seeing that. The "vw" units are tied to the viewport width and "vh" to the viewport height (you probably know that) - so as you change the window, the elements that are being scaled with that will change proportionally. For things that you want to keep at a constant size, use a different method like a fixed pixel size, for example.
glandon22
@glandon22
Mar 26 2018 16:25
@Dimitrios51 where do you want the twitter button to be on your page?
Dimitris Nik.
@dimitrissnk
Mar 26 2018 16:33
@glandon22 I want it to be at the position at which I have already placed it, but see what is happening when you are resizing the window(try minimizing it as much as possible and you will see that the twitter image which I have placed inside the div starts "falling"
Dimitris Nik.
@dimitrissnk
Mar 26 2018 16:38
@khaduch If I understood well, you are talking about the margin-top of my twitterimg class? So I have to replace the vw with something else? But if I have to do so, then how can I always have the twitter logo in the middle of my div?
glandon22
@glandon22
Mar 26 2018 16:40
@Dimitrios51 you can try absolutely positioning it in it's parent div. I would also check this out: https://dev.twitter.com/web/tweet-button. it is a prebuilt tweet button that will work for this project\
Ken Haduch
@khaduch
Mar 26 2018 17:39

@Dimitrios51 - I was looking at these CSS class rules:

.twitter {
      height: 1.5vw;
      width: 1.5vw;
      background-color: #66829E;
      border-radius: 8%;
      margin-top: 7vw;
      margin-left: -46vw;
}

.twitterimg {
      height: 1vw;
      width: 1vw;
      margin-top: 0.25vw;
}

You are setting the height and width of those elements using vw, so they will scale according to the viewport width. The smaller the viewport gets, the smaller they will proportionally be rendered.

Ancusor
@ancusor
Mar 26 2018 18:40
Hi there,is somebody so kind to answer to me to that question?
Shariq Shahbaz
@sh4r10
Mar 26 2018 18:40
what question @ancusor ?
Ancusor
@ancusor
Mar 26 2018 18:41
I need to create an example like this https://www.yumpu.com/xx/embed/view/PCAOtvFmKJTubkGE but with php forms button to be able to send via mail this shopping list
I found a tool to make that flipbook,but i cant add php form inside because is making only JS
@sh4r10 Do you think is possible?
Shariq Shahbaz
@sh4r10
Mar 26 2018 18:43
it has to be
but maybe not through a library
i have no idea how to do this
maybe you should try making something that works first and then turning it into a flipbook
@ancusor
Ancusor
@ancusor
Mar 26 2018 18:43
I could do it by myself,I will be able to do it,but I want to find some drag and drop software like FLIPHTML5
Shariq Shahbaz
@sh4r10
Mar 26 2018 18:44
@ancusor make it yourself and then implement fliphtml later
Ancusor
@ancusor
Mar 26 2018 18:44
I can make forms by myself via PHP,the problem is making them faster via some drag and drops softwares.
I have to make this every week and it takes me much time :)
Shariq Shahbaz
@sh4r10
Mar 26 2018 18:45
Ahh
i see
sorry I don't know how to do this
Ancusor
@ancusor
Mar 26 2018 18:45
I receive that PDF magazine every week,and I need to transform it in that pdf flipbook with shopping buttons
manually it takes a lot.Via software is not free :)
What programming languages do you know?
Brown Sugar
@ilikereddit_twitter
Mar 26 2018 18:46
https://codepen.io/hellosurbhi/pen/aYVoaa
hey i am in the first stages of my portfolio and for some reason my col-lg elements are not staying in the same line in the header please help thank you
Ancusor
@ancusor
Mar 26 2018 18:46
I saw on GitHub u know pyton html css ,right?
Shariq Shahbaz
@sh4r10
Mar 26 2018 18:47
yeah
Ancusor
@ancusor
Mar 26 2018 18:47
@ilikereddit_twitter you need to include bootstrap library
@ilikereddit_twitter <link rel="stylesheet" href="yourbootstrapfile.css">
Shariq Shahbaz
@sh4r10
Mar 26 2018 18:48
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
here @ilikereddit_twitter
Ancusor
@ancusor
Mar 26 2018 18:48
:) that's it
Shariq Shahbaz
@sh4r10
Mar 26 2018 18:49
@ilikereddit_twitter click on the settings icon in the html tab on codepen then where it says add head tags
paste the code there
Ancusor
@ancusor
Mar 26 2018 18:50
He can insert it on top before header
Brown Sugar
@ilikereddit_twitter
Mar 26 2018 18:50
thank you
Ancusor
@ancusor
Mar 26 2018 18:50
there's no html head tags
Shariq Shahbaz
@sh4r10
Mar 26 2018 18:51
of course there is @ancusor
Ancusor
@ancusor
Mar 26 2018 18:52
@sh4r10 maybe are ignored or hidden
because that editor does this
@sh4r10 I prefer using the standar way.In this way you can forget or do mistakes
James Wright
@CodeGod666_twitter
Mar 26 2018 22:25
this place is a joke, go read the ban report in admin room. Because someones under the assumption that I am a bot I was banned. Everyone should stay away from this place
I didnt break code of conduct
@QuincyLarson will do nothing about it
Winas
@winas_ben_twitter
Mar 26 2018 22:38
hello all
Gulsvi
@gulsvi
Mar 26 2018 22:39
Hi @winas_ben_twitter what's up?
Winas
@winas_ben_twitter
Mar 26 2018 22:39
good you @gulsvi ??
Gulsvi
@gulsvi
Mar 26 2018 22:40
Just fine... did you have a question about a Free Code Camp front-end project?
Winas
@winas_ben_twitter
Mar 26 2018 22:40
yes
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 26 2018 22:41
:point_up: March 26, 2018 11:25 PM @mstellaluna ??
Winas
@winas_ben_twitter
Mar 26 2018 22:41
I'm just confused and procrastinating all the time when I try to learn web development
Gulsvi
@gulsvi
Mar 26 2018 22:42
Good place for moral support
Winas
@winas_ben_twitter
Mar 26 2018 22:42
OK thank you ;)