These are chat archives for FreeCodeCamp/HelpFrontEnd

4th
Mar 2018
Manan Shah
@mananshah51
Mar 04 2018 00:25

// Setup
function phoneticLookup(val) {
  var result = "";

  // Only change code below this line
  var lookup = {  
   "alpha": "Adams",
   "bravo": "Boston",
   "charlie": "Chicago",
   "delta": "Denver",
   "echo": "Easy", 
   "foxtrot": "Frank"
  };

  // Only change code above this line
  return result;
}

// Change this value to test
phoneticLookup("charlie");
Where am I going wrong ?
Using Objects for Lookup is the Challenge.
neovks
@neovks
Mar 04 2018 00:27
hey, I have an issue on codepen (portfolio project) one of my border isn't working when I enable bootstrap 4 (took me long enough to figure it was bootstrap's fault...) is it a known issue ? any way to fix ? I can share codepen link if needed thanks
Manan Shah
@mananshah51
Mar 04 2018 00:28
@neovks Can you please share the CodePen link ?
neovks
@neovks
Mar 04 2018 00:29
sure, so the border in question is the bottom one (the one around twitch) it's supposed to be thick etc but I can't change it as it is (.border in css)
Manan Shah
@mananshah51
Mar 04 2018 00:31
@neovks you want the border to be thick ?
neovks
@neovks
Mar 04 2018 00:36
well I want it to be like in my css part
.border {
border-style: solid;
border-width: 5px;
border-color: black;
border-radius: 5px;
width: 200px;
background-color: white;
margin: auto;
}
but none of this works except if I disable bootstrap 4
Gulsvi
@gulsvi
Mar 04 2018 01:51
@neovks .border is a reserved utility class in bootstrap. Name your class something else, like .logo-border and it will work.
https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L6354
Ken Haduch
@khaduch
Mar 04 2018 01:52
@neovks - you probably just have a conflict with a bootstrap class. Oops - @gulsvi just posted what I was going to say - pick a different name for the class and use that instead! ;)
@KWFE - I can see a problem when the dir="rtl" is added, even with the pages in English - as long as I'm seeing the same things that you are. The radio button circle is colliding with the text, so I'm trying to reconfigure the HTML, it is generated by the javascript code and I kind of have it working, just trying to figure out one other thing that I think should be working but doesn't seem to be.
neovks
@neovks
Mar 04 2018 02:07
AHH !! DANG !thanks a lot!
thanks @gulsvi
CamperBot
@camperbot
Mar 04 2018 02:07
neovks sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2639 | @gulsvi |http://www.freecodecamp.org/gulsvi
neovks
@neovks
Mar 04 2018 02:07
thanks @khaduch
CamperBot
@camperbot
Mar 04 2018 02:07
neovks sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3772 | @khaduch |http://www.freecodecamp.org/khaduch
the fbi agent watching you
@krennical_twitter
Mar 04 2018 02:20
On the Profile Lookup activity, why do you use return at the end of the for loop? Why can’t you use an else statement at the end of your first if statement instead?
Ken Haduch
@khaduch
Mar 04 2018 02:25
@krennical_twitter - the reason is that you do not know if you have found a match in the list until you go all the way through the list, so you want to exit the for loop (which happens when you reach the end of the list.) If you haven't found a name match within the loop, and looked at every entry, then you know that you have no match...
To put it another way, if the first name doesn't match, you cannot just return. You have to look at the second, third, fourth, etc. for however many names are in the list. You can never assume that the next name isn't the one, so you have to look at it.
the fbi agent watching you
@krennical_twitter
Mar 04 2018 02:32
@khaduch Thank you!! I've watched a good 4+ videos trying to wrap my head around it and what you said finally made me understand. I wasn't thinking about it in terms of going through the loop each time!
CamperBot
@camperbot
Mar 04 2018 02:32
krennical_twitter sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3773 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Mar 04 2018 02:33
@neovks and @krennical_twitter - you're welcome. Happy to help out!
Ken Haduch
@khaduch
Mar 04 2018 05:00

@KWFE - I hope that you can get this file and try it - it's not exactly right, but I think that it might help? What I did was to set up the page (the English version) using the global dir="rtol"and in the Chrome browser, I saw on the question modal that the label and the radio buttons were being mashed together, which kind of looks like what you were seeing in the image that you posted. At least that is what I think it was. So i made a copy of the main.js module from that original project and made some modifications to restructure the HTML for the label and radio button - they don't quite line up but they don't overlap now, at least on the English "rtol" site. The one function that I changed - here is the code:

// Get question info from array, prepare
// make a unique string to add to the ID, for testing
let idU = 0;
function getOptions(question) {
  var $buttonDiv = $('<div id="disabled" class="btn-group" data-toggle="buttons"></div>');
  idU++;
  question.options.forEach(function(opt, idx) {
    var $div = $('<div class="radio2">'); // use a non-existent class "radio2" because "radio" was giving bad styling
    let id = `quest${idx}_${idU}`;
    var $label = $(`<label class="radio-inline" for="${id}">${opt}</label>`);
    var $input = $(`<input type="radio" name="opts" value="${opt}" id="${id}">`);
    $div.append($input);
    //$label.append(opt);
    $div.append($label);
    $buttonDiv.append($div);
  });
  return $buttonDiv;
}

Maybe you could try that in the copy of the site that you are working on? Just replace that function with the text from above. Although I copied the whole file onto pastebin, but I'm not sure if you can get to it? Here is the link: pastebin copy of main.js. But I think that that function is the only thing that I changed, and added that one variable idU to try and see if I could get the label element for attribute to work, but for some reason that isn't working. I don't understand that, but the main thing is to see if you see any better result using that function with the reconfigured HTML code. I hope that it helps?

Darren
@DarrenfJ
Mar 04 2018 07:31
evening fCC
coderNewby
@coderNewby
Mar 04 2018 07:32
@DarrenfJ :wave:
thanks @DarrenfJ for the answers yesterday :D
CamperBot
@camperbot
Mar 04 2018 07:32
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2413 | @darrenfj |http://www.freecodecamp.org/darrenfj
Darren
@DarrenfJ
Mar 04 2018 07:32
@coderNewby ah no worries brutha..
Ali Abbas
@Abbas-000
Mar 04 2018 07:57
Hi guys can someone help me regarding to twitch TV challenge
Razvan Jackson
@RazvanJackson
Mar 04 2018 09:40
Hello Guys!
Can someone help me?
I have multiple divs inline-table, but when one has more content than other all have a margin-top
Matej Bošnjak
@mbosnjak01
Mar 04 2018 09:43
link your codepen
maybe someone could help u then :P
@Abbas-000 you as well :) and also what kind of issue you have?
alpox
@alpox
Mar 04 2018 09:45
@RazvanJackson Which part of this is the one you are talking about?
Matej Bošnjak
@mbosnjak01
Mar 04 2018 09:46
hmm not sure what you mean, it works fine to me
Razvan Jackson
@RazvanJackson
Mar 04 2018 09:46
@alpox press generate button
and the last divs

Herr

Geschäftsführer (CEO)

phone: +

these ones should have started top
not center
alpox
@alpox
Mar 04 2018 09:47
@RazvanJackson
.custom-row div {
    display: inline-table;
    vertical-align: top;
}
Does the trick
Razvan Jackson
@RazvanJackson
Mar 04 2018 09:48
Thanks
alpox
@alpox
Mar 04 2018 09:48
@RazvanJackson np
Ivan Ngundela
@ingundela
Mar 04 2018 09:51
@ingundela
hello everyone.. may you please help with my project https://ingundela.github.io/fore/ . how can I add overlay and keep text content bright? when I add overlay it is also affecting the text content
when I add <div class="overlay"></div> (HTML) and this .overlay{
position: absolute;
width: 100%;
height: 100vh;
left: 0;
top: 0;
background-color: rgba(0,0,0,.6);
z-index: 2;
}
overlay is affecting the text content… please guide me to fix this.Thanks
CamperBot
@camperbot
Mar 04 2018 09:51
sorry ingundela, you can't send brownie points to yourself! :sparkles: :sparkles:
Fabien SHAN
@X140hu4
Mar 04 2018 10:31
@ingundela Where is the overlay?
ahmed-issa-mohd
@ahmed-issa-mohd
Mar 04 2018 11:05
how to set height for div content 80% https://codepen.io/ahmed-sandouqa/pen/QQPede
Anas Abdennaim
@Aka-Dev
Mar 04 2018 11:13
@ahmed-issa-mohd you can use vh unit
@ahmed-issa-mohd 80vh
Anas Abdennaim
@Aka-Dev
Mar 04 2018 11:18
@ingundela i think you must place overlay div inside of container carousel-item
@ingundela in the same level with carousel-caption
Ivan Ngundela
@ingundela
Mar 04 2018 11:21
@X140hu4 @Aka-Dev I’ve placed the overlay https://github.com/ingundela/fore/blob/master/index.html
ahmed-issa-mohd
@ahmed-issa-mohd
Mar 04 2018 11:22
Anas Abdennaim
@Aka-Dev
Mar 04 2018 11:25

@ingundela <div class="carousel-item active slideo-one">
<div class="container">

<div class="overlay"></div>
<div class="carousel-caption">
<h1 class="wow fadeInLeft" data-wow-delay="0.3s"><span>Your One</span><br> Source Solutions Partner</h1>
<p class="wow fadeInLeft" data-wow-delay="0.9s">Global Sourcing, Procurement & Supplies</p>
<a class="btn btn-primary wow fadeInUp" data-wow-delay="1.9s" href="#" role="button">Products</a>
</div>
</div>
</div>

@ingundela like this
Ivan Ngundela
@ingundela
Mar 04 2018 11:27
@Aka-Dev WORKED WELL!!!!! THANK YOU
CamperBot
@camperbot
Mar 04 2018 11:27
ingundela sends brownie points to @aka-dev :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @aka-dev |http://www.freecodecamp.org/aka-dev
Anas Abdennaim
@Aka-Dev
Mar 04 2018 11:28
@ahmed-issa-mohd set height body to 100vh and class content to 80% that will work
@ahmed-issa-mohd body {height: 100vh} .content{min-height: 80%}
@ingundela you're welcome
habibaatify
@habibatify_twitter
Mar 04 2018 11:51
how can add a image in freecodepen?
from google drive
Aditya
@ezioda004
Mar 04 2018 11:53
Yes, google drive, dropbox, one drive would work
Sweet Coding :)
@SweetCodingInc
Mar 04 2018 11:53
@ezioda004 :wave:
How's C going on?
habibaatify
@habibatify_twitter
Mar 04 2018 11:53
i pest the image link but it not working
Aditya
@ezioda004
Mar 04 2018 11:53
@SweetCodingInc Hey :wave:
Sweet Coding :)
@SweetCodingInc
Mar 04 2018 11:53
pest :laughing:
@habibatify_twitter it is publicly accessible?
habibaatify
@habibatify_twitter
Mar 04 2018 11:53
no
Aditya
@ezioda004
Mar 04 2018 11:53
I started reading books along CS50 so far very fascinating and eye opening to say the least :D
Sweet Coding :)
@SweetCodingInc
Mar 04 2018 11:54
try pasting that url in browser and see if you see the image @habibatify_twitter
Aditya
@ezioda004
Mar 04 2018 11:54
And frustrating too
Sweet Coding :)
@SweetCodingInc
Mar 04 2018 11:54
@ezioda004 :+1:
Yeah.. It can get a bit intimidating in the beginning, but once you get hold of it, it's a smooth cruise..
Aditya
@ezioda004
Mar 04 2018 11:55
Hoping to get there fast but dont wanna rush
Sweet Coding :)
@SweetCodingInc
Mar 04 2018 11:56
Yes.. No rush.. Do it right
You don't wanna end up like millions of mediocre programmers, do you?
Aditya
@ezioda004
Mar 04 2018 11:58
@SweetCodingInc No...well I hope not lol, thanks for the advice :) appreciate it
CamperBot
@camperbot
Mar 04 2018 11:58
ezioda004 sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 330 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Frank Bono
@frankbono
Mar 04 2018 15:53
Hi, I can't see where I am making a mistake here. I built this using Atom editor and not on Code pen. The app works and it makes AJAX calls perfectly to the Open Weather API when I run it on my computer but when I upload the exact same code to Codepen, I get nothing but errors. Can someone help me please
Matej Bošnjak
@mbosnjak01
Mar 04 2018 15:54
let's see this puppy
found your issue
Frank Bono
@frankbono
Mar 04 2018 15:54
Nice!
Matej Bošnjak
@mbosnjak01
Mar 04 2018 15:54
i think, sec
Stephen James
@sjames1958gm
Mar 04 2018 15:54
You cannot use http on codepen
Matej Bošnjak
@mbosnjak01
Mar 04 2018 15:55
yep, was about to say that
Stephen James
@sjames1958gm
Mar 04 2018 15:55
You cannot usehttp from a https site
You can use the fcc provide proxy to open weather which is https
Frank Bono
@frankbono
Mar 04 2018 15:56
Do I just my API url to Https ?
Matej Bošnjak
@mbosnjak01
Mar 04 2018 15:56
yes
Frank Bono
@frankbono
Mar 04 2018 15:56
ok
Matej Bošnjak
@mbosnjak01
Mar 04 2018 15:56
it works for me now
nice
Frank Bono
@frankbono
Mar 04 2018 15:57
perfect, thank you guys! @sjames1958gm & @mbosnjak01 I appreciate the help!
CamperBot
@camperbot
Mar 04 2018 15:57
frankbono sends brownie points to @sjames1958gm and @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 243 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
:star2: 9055 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 04 2018 15:57
No problem
Matej Bošnjak
@mbosnjak01
Mar 04 2018 15:57
@frankbono all http links change to https
Bin Gao
@gaobin1019
Mar 04 2018 16:44
Good Sunday morning
Stephen James
@sjames1958gm
Mar 04 2018 17:05
@gaobin1019 morning
James Bream
@JamesBream
Mar 04 2018 18:00

Anyone any good at ES6?

  var $image = $("img[uid='1']");
  var $dlImage = $('<img>');

  $dlImage.on('load', function() {
    $image.attr('src', $(this).attr('src'));
  });

This works fine, but when I try to use an arrow function, this no longer refers to $dlImage, i.e.

  $dlImage.on('load', () => {
    $image.attr('src', $(this).attr('src'));
  });

Any ideas?

Stephen James
@sjames1958gm
Mar 04 2018 18:01
@JamesBream arrow functions do not have a this context
That is they adopt the context from outside themselves
James Bream
@JamesBream
Mar 04 2018 18:03
@sjames1958gm Ah, got it! Thanks!
CamperBot
@camperbot
Mar 04 2018 18:03
jamesbream sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9056 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 04 2018 18:03
@JamesBream :+1:
Also, there is no arguments object either.
Frosty427
@Frosty427
Mar 04 2018 18:04
``` (shift+enter for line break)

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>Form Exercise</title>
</head>

<body>
<h1>Register</h1>

<form id="formid" method="get" action="/">
<label for="firstName">First Name:</label>
<input type="text" placeholder="John" required id="firstName">

<label for="lastName">Last Name:</label>
<input type="text" placeholder="Smith" required id="lastName">


</form>

<form>
<label for="MALE">Male:</label>
<input type="radio" name="gender" value="male">

<label for="FEMALE">Female</label>
<input type="radio" name="gender" value="female">

<label for="other">Other</label>
<input type="radio" name="gender" value="other">

</form>

<form id="formid">

<label for="email">Email:</label>
<input id="formid" type="email" required>
<label>Password:</label>
<input id="formid" type="password" required>
</form>

<form>
<label>Birthday:</label>
<select class="" id="month" >
<option value="">Month</option>
<option value="">January</option>
<option value="">Febuary</option>
<option value="">March</option>
<option value="">April</option>
<option value="">May</option>
<option value="">June</option>
<option value="">July</option>
<option value="">August</option>
<option value="">September</option>
<option value="">October</option>
<option value="">November</option>
<option value="">December</option>
</select>




</form>
<form class="" action="index.html" method="post">
<label for="TOS">I agree to the terms and conditions</label>
<input type="checkbox" name="" value="" id="TOS">
</form>

<input type="submit" form="formid" />>







</body>

</html>

```

can someone help me
im having an issue with validation
it asks me for validation on the first name and last name but doesnt for the email and password
Stephen James
@sjames1958gm
Mar 04 2018 18:04
@Frosty427
Please provide links to code rather than big dumps like this.
Frosty427
@Frosty427
Mar 04 2018 18:05
@sjames1958gm how do i do that?
Stephen James
@sjames1958gm
Mar 04 2018 18:05
You can always use git for a repository
THis is at the top of the javascript gitter - not sure why not here. If you are posting code that is large use Gist - https://gist.github.com/ paste the link here.
Bin Gao
@gaobin1019
Mar 04 2018 18:06
@Frosty427 or you can use something like codepen
Stephen James
@sjames1958gm
Mar 04 2018 18:07
@Frosty427 Why do you have so many forms? Only the first one seems to have an "action" property
Frosty427
@Frosty427
Mar 04 2018 18:07
image.png
image.png
image.png
wait
sorry
i had lag
@sjames1958gm im trying to recreate the picture in that screenshot
Stephen James
@sjames1958gm
Mar 04 2018 18:09
@Frosty427 For the submit button to work, you need all of this in one form, and I can only see required for first/last name
Frosty427
@Frosty427
Mar 04 2018 18:10
but if i do that it wont look like the picture
image.png
Stephen James
@sjames1958gm
Mar 04 2018 18:11
How it looks and the form tag shouldn't be related, use CSS to format
Frosty427
@Frosty427
Mar 04 2018 18:12
im going off of a course with specific instructions and it says to recreate in html
Stephen James
@sjames1958gm
Mar 04 2018 18:12
@Frosty427 without any CSS? That seems unreasonable
if you look at the code i made an input button and tied it to an id but its still not going through
Abdus Samad
@asamad123
Mar 04 2018 18:22
so far i have this https://codepen.io/abdus123/pen/WMMYQL?editors=1111 how would i make the user make their own user name and password.
Stephen James
@sjames1958gm
Mar 04 2018 18:42
@Frosty427 There is only one form with that id
@asamad123 You would probably implement authentication on the backend not the front
rdollent
@rdollent
Mar 04 2018 21:56
@asamad123 back-end. see passportjs authentication
John
@flyboy1565
Mar 04 2018 21:56
I need some help.. i have an array [{'orderid':4, 'type':'sale'}, {'orderid':5, 'type':'refund'}]... I want to be able to get see if an order exists in the array that matches a type
rdollent
@rdollent
Mar 04 2018 21:57
an order exists?
ah like an order order i thought it was JS terminology
okay so it is an array but each order is an object
John
@flyboy1565
Mar 04 2018 21:57
sorry if an orderid exists in the array
rdollent
@rdollent
Mar 04 2018 21:58
so you can either do a for loop
which goes through the array i.e. for(var i = 0; i <= yourArray.length;i ++)
and to be able to get the type, you just go
i.type = "something"
since that i pertains to the elements in the array i.e. {orderid:4, type:sale}
John
@flyboy1565
Mar 04 2018 21:59
function remove_notification(remove_type){
    $('#alerts .alert').each(function(){
        var oid = parseInt($(this).data('order'));
        var type = $(this).data('type');
        if (($.inArray(oid, notifications) == -1) && (type == remove_type)){
            $('.alert[data-order="' + oid +'"][data-type="'+type+'"]' ).remove();
        }
    })
}
this is what i have so far
rdollent
@rdollent
Mar 04 2018 22:00
or or or you can do a .filter
array.filter(function(obj) {
obj.type = "this type";
});
array.filter(function(obj) { obj.type = "this type"; });
array.filter(function(obj) {
  obj.type = "this type";
});
that will spit out an array
that you've to store in a variable
var array = [{'orderid':4, 'type':'sale'}, {'orderid':5, 'type':'refund'}];
var result = array.filter(function(obj) {
  return obj.type === "refund";
});
result;

:
{orderid: 5, type: "refund"}
John
@flyboy1565
Mar 04 2018 22:04
what would happen an orderid doesn't exist in there?
what would the ouptut be?
rdollent
@rdollent
Mar 04 2018 22:05
var array = [{'orderid':4, 'type':'sale'}, {'orderid':5, 'type':'refund'}];
var result = array.filter(function(obj) {
  return obj.type === "refund";
});
result[0];
{orderid: 5, type: "refund"}
you can put that in the google chrome console
it will say undefined
var array = [{'orderid':4, 'type':'sale'}, {'orderid':5, 'type':'refund'}];
var result = array.filter(function(obj) {
  return obj.type === "xxxx";
});
result[0];

undefined
John
@flyboy1565
Mar 04 2018 22:06
perfect thanks for the help @rdollent
CamperBot
@camperbot
Mar 04 2018 22:06
flyboy1565 sends brownie points to @rdollent :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @rdollent |http://www.freecodecamp.org/rdollent
rdollent
@rdollent
Mar 04 2018 22:06
actually it will output an empty array
i did the result[0] just to show you the first element in the result array
John
@flyboy1565
Mar 04 2018 22:06
that'll still work i'll check if length == 0
rdollent
@rdollent
Mar 04 2018 22:06
uhhuh for sure
John
@flyboy1565
Mar 04 2018 22:07
thanks again
rdollent
@rdollent
Mar 04 2018 22:07
also do length === 0 always use strict === not ==
AbrisM
@AbrisM
Mar 04 2018 22:27
@AbrisM
Hi everyone
Is there a networking channel available on GITTER?
Ben Hart
@Benjmhart
Mar 04 2018 22:59
hey folks, anyone in here have experience with d3 force charts?
Frank Bono
@frankbono
Mar 04 2018 23:47
Quick question. Do I need to learn ES6 before learning React?
Tiago Correia
@tiagocorreiaalmeida
Mar 04 2018 23:48
would help in quite a few stuff
Stephen James
@sjames1958gm
Mar 04 2018 23:49
@frankbono Well, React uses es6 classes and arrow functions are useful
Frank Bono
@frankbono
Mar 04 2018 23:49
@sjames1958gm Ok, I'm on it. Thanks man!
CamperBot
@camperbot
Mar 04 2018 23:49
frankbono sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9058 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 04 2018 23:50
@frankbono good luck!