These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Mar 2018
syonrod
@syonrod
Mar 07 2018 00:20
I need someone available to help me with a little question about arrays in Javascript, anyone?
Bin Gao
@gaobin1019
Mar 07 2018 00:20
@syonrod I can try
Manan Shah
@mananshah51
Mar 07 2018 00:20
@syonrod Yeah.
@syonrod I can try too.
syonrod
@syonrod
Mar 07 2018 00:23
@gaobin1019 @mananshah51 lets do this
Garo
@Garabed96
Mar 07 2018 00:34
@tiagocorreiaalmeida anything happen?
Tiago Correia
@tiagocorreiaalmeida
Mar 07 2018 00:37
@Garabed96 sorry wont be able to see it today but I think you are misding some proprety or instead of setting true you set some variable?
Was lookibg at theie documentation doesnt seems that different from yoir code try to copy ansd paste their example if it doesnt work has to be related with some import I guess
Luis Graterol
@luisgraterol
Mar 07 2018 00:46
@syonrod still having trouble with arrays?
Faisal Zulfiqar
@faisal-zulfiqar
Mar 07 2018 00:51
https://codepen.io/faisal1337/pen/VQoWGY
Guys I was trying to make the cnn.com website layout. Can someone help me with this css thingy?
The content inside body-container-2 appears to the very right!
Faisal Zulfiqar
@faisal-zulfiqar
Mar 07 2018 00:56
Any help would be appreciated.
Manan Shah
@mananshah51
Mar 07 2018 01:00
@faisal1337 Are you done with Bootstrap ?
Faisal Zulfiqar
@faisal-zulfiqar
Mar 07 2018 01:00
@mananshah51 I use bootstrap. But for this website I am using html css only.
Manan Shah
@mananshah51
Mar 07 2018 01:01
@faisal1337 Let's try to do it one by one. What part of the website should be done first ?
Faisal Zulfiqar
@faisal-zulfiqar
Mar 07 2018 01:05
@mananshah51 the alyout
layout
I did the navbar. Then the first 3 columns.
Now I am trying to put the second row 3 columns into a separate div.
Manan Shah
@mananshah51
Mar 07 2018 01:31
@faisal1337 Talk to you soon. Need to rush someplace, I am sorry.
Faisal Zulfiqar
@faisal-zulfiqar
Mar 07 2018 01:31
sure
JoEezy
@JoEeeezy_twitter
Mar 07 2018 02:24

without spoiling this excercise for me, can you guys tell me if I'm on the right track...

function titleCase(str) {
var arr = str.split(" ");
for (i = 0; i < arr.length; i++){
arr[i].substring(0,1).toUpperCase();
}
return arr;
}
titleCase("I'm a little tea pot");

so far toUpperCase() isn't working so I must be using arr[i].substring part wrong...
Stephen James
@sjames1958gm
Mar 07 2018 02:33
@JoEeeezy_twitter toUpperCase returns a new string which you have to assign to a variable
@JoEeeezy_twitter Since strings are immutable, most every string function returns a new string
JoEezy
@JoEeeezy_twitter
Mar 07 2018 02:35
aah ty ... i forgot they can't be changed :+1:
Stephen James
@sjames1958gm
Mar 07 2018 02:35
@JoEeeezy_twitter You are on the right track
@JoEeeezy_twitter yep
JoEezy
@JoEeeezy_twitter
Mar 07 2018 02:54
thanks :) , finally solved it https://i.imgur.com/oP5fDnk.png
aha and now i learn about the str.slice lol
Garo
@Garabed96
Mar 07 2018 03:08
anyone know why this won't work
been stuck on it for 6 hours now
Stephen James
@sjames1958gm
Mar 07 2018 03:10
@Garabed96 Can you say what should happen and what is happening
DMsalati
@DMsalati
Mar 07 2018 03:10
how come the online and offline buttons arent working ?
https://codepen.io/Muradmsalati/pen/Jpxyax
abraham anak agung
@padunk
Mar 07 2018 03:12
@Garabed96 what is the issue?
Stephen James
@sjames1958gm
Mar 07 2018 03:12
@DMsalati Your two functions with getJSON will only ever return undefined.
@DMsalati status will always return undefined so you will only ever get hide.
Stephen James
@sjames1958gm
Mar 07 2018 03:19
@Garabed96 There are two binds for handleClose and handleShow in your constructors, but I wouldn't think that would matter
DMsalati
@DMsalati
Mar 07 2018 03:19
@sjames1958gm how come since im using the same functions to display the offline/ or what the streamer is doing atm
Stephen James
@sjames1958gm
Mar 07 2018 03:20
This function has no return so it will always return undefined (or false) also getJSON is asynchronous so it cannot return the status like this
    function status(stat){
        $.getJSON(streamsLink + stat, function(json) {
                /*optional stuff to do after success */
                $('#'+ stat).text(json.stream.game + ': ' + json.stream.channel.status);

        });
    }
DMsalati
@DMsalati
Mar 07 2018 03:25
@sjames1958gm so if i use another function that does the same thing, but instead of .text i use return and use that function in an if statement to do the online/offline buttons?
Sorin Ruse
@sorinr
Mar 07 2018 03:27
@faisal1337 change body-container-1 into a class. id's must be unique. i would start designing the layout as for the mobile first then in media queries i would change it for bigger screens. you may opt using flex or grid as for the layout
Sorin Ruse
@sorinr
Mar 07 2018 03:36
@faisal1337 i would not mix inline styling with external css styling. i would do all css styling in external file
@faisal1337 as for css reset you may alternatively use external link as https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css
Sorin Ruse
@sorinr
Mar 07 2018 03:46
@DMsalati your status function must return true or false. if you make a console.log into $('#online').click(function() { console.log(status('esl_sc2')); you will see you get undefined
@DMsalati sorry haven't seen that @sjames1958gm already pointed that to you :)
DMsalati
@DMsalati
Mar 07 2018 03:49
@sorinr its ok thank you, im still stuck tho lol
CamperBot
@camperbot
Mar 07 2018 03:49
dmsalati sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1400 | @sorinr |http://www.freecodecamp.org/sorinr
DMsalati
@DMsalati
Mar 07 2018 03:50
    function status2(stat){
        $.getJSON(streamsLink + stat, function(json) {
                /*optional stuff to do after success */
                return json

        });
$('#online').click(function() {

        //shows esl_sc2 when online
        if (status2('esl_sc2')) {
            $('#esl').show();
        } else {
            $('#esl').hide();
        }
        //shows FreeCodeCamp when online
        if (status2('freecodecamp')) {
            $('#fcc').show();
        } else {
            $('#fcc').hide();
        }
        //shows loltyler1 when online
        if (status2('loltyler1')) {
            $('#ty').show();
        } else {
            $('#ty').hide();
        }
        //shows cretetion when online
        if (status2('cretetion')) {
             $('#cret').show();
        } else {
            $('#cret').hide();
        }
    });
Sorin Ruse
@sorinr
Mar 07 2018 03:54
@DMsalati i would go this way: when you first retrieve a channel info if the channel is online i would apply to the element a class like online otherwise an offline class then just filter by class. the online btn will hide all elements having the offline class and viceversa
Sorin Ruse
@sorinr
Mar 07 2018 04:01
@DMsalati lets say you want to have an array of channels you want to display. then it would be hard to manually code the status for each channel as in your example above
@DMsalati you may want to dynamically change your channel list
ldubia
@ldubia
Mar 07 2018 04:06
I am trying t write a simple html5 page form and I'm having problems I don't know how to fix. I need some help.
How can I show the code I have written so you can see it?
Sorin Ruse
@sorinr
Mar 07 2018 04:07
@ldubia do you have any code as so far?
ldubia
@ldubia
Mar 07 2018 04:08
yes, but don'y know how to show you.
copy paste ok?

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Woodturners are Chiselers</title>
<body>
<H1>Woodturners spit sawdust</H1>
<form>
<p>Please Register</p>
<label for="First_Name"> First Name: </label>
<input type=text id="first_name" name="first_name">
<br /><br />

<label for="last_name"> Last Name: </label>
<input type=text id="last_name" name="last_name">
<br /><br />

<label for="eMail"> eMail: </label>
<input type=text id="eMail">
<br /><br />

<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br /><br />

<label for="Confirm_Password"> Confirm Password:</label>
<input type=text id="password" name="password">
<br /><br />

<label for="Date_of_Birth"> Date of Birth: </label>
<input type=date id="Date_of_Birth" name="Date of Birth">
<br />
<br />
<p>Select your gender.</p>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="something_else">Something Else</option>
</select>
<br />
<br />

<p>Select your favourite activity</p>
<label for="read">Read</label>
<input type="checkbox" id="read" name="activity" value="read">
<label for="write">Write</label>
<input type="checkbox" id="write" name="activity" value="write">
<label for="eat">Eat</label>
<input type="checkbox" id="eat" name="activity" value="eat">
<label for="sleep">Sleep</label>
<input type="checkbox" id="sleep" name="activity" value="sleep">
<label for="be_merry">Be Merry</label>
<input type="checkbox" id="be_merry" name="activity" value="be_merry">
<br />
<br />
<p>Tell us about yourself.</p>
<textarea name="description"></textarea>
<input type="submit" value="Submit">
<br /><br />
<input type="submit" value="Submit">
</form>
</body>
</head>
</html>

Sorin Ruse
@sorinr
Mar 07 2018 04:09
@ldubia if its not to long you may use your code in here and paste you code
ldubia
@ldubia
Mar 07 2018 04:10
I checked it out in an html check site and it came back with errors I don't understand.
Sorin Ruse
@sorinr
Mar 07 2018 04:10
@ldubia without any css style your page is looking like: https://codepen.io/sorinr/pen/QQeaLm
ldubia
@ldubia
Mar 07 2018 04:11
the site is called nu html checker. https://validator.w3.org/nu/. This is supposed to be just raw html without the he css or js. a begginning class.
I wrote it in sublime.
Sorin Ruse
@sorinr
Mar 07 2018 04:13
@ldubia you are closing </head> after closing the </body> tag. it should be before opening the `<body>'
ldubia
@ldubia
Mar 07 2018 04:16
@sorinr can you tell me if there is errors I ave to fix and how to identify.
At the top the <head> tag comes before the <body> tag. Am I not supposed to close in reverse?
or do I close head at the top?
I closed it at the top and it worked.
ldubia
@ldubia
Mar 07 2018 04:22

Error: Duplicate ID password.

From line 28, column 9; to line 28, column 55

↩ <input type=text id="password" name="password">↩

Warning: The first occurrence of ID password was here.

From line 24, column 9; to line 24, column 61

↩ <input type="password" id="password" name="password">↩

Warning: The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.

From line 32, column 9; to line 32, column 65

↩ <input type=date id="Date_of_Birth" name="Date of Birth">↩

Error: The for attribute of the label element must refer to a non-hidden form control.

From line 11, column 9; to line 11, column 32

↩ <label for="First_Name"> First

Error: The for attribute of the label element must refer to a non-hidden form control.

From line 27, column 9; to line 27, column 38

↩ <label for="Confirm_Password"> Confirm

These are the other errors I don't understand.
Sorin Ruse
@sorinr
Mar 07 2018 04:22
@ldubia in codepen html section you have in the right part a small dropdown button and you may choose analize html to see all the errors you have
@ldubia ids must be unique
@ldubia so for the confirmation password use an id like id="confirmation-password"
Ken Haduch
@khaduch
Mar 07 2018 04:25
@ldubia - duplicate ID values (using the same value twice in one HTML code) is not allowed - ID values are required to be unique. If you have the <label for="someValue" - the someValue is supposed to pertain to the ID of a form input. The date input type might not be supported on all browsers - a "polyfill" is a piece of code that will properly support that type on a browser that doesn't natively support it. ((@sorinr is answering, too, I see... hello Sorin!))
Sorin Ruse
@sorinr
Mar 07 2018 04:26
@khaduch :wave:
Ken Haduch
@khaduch
Mar 07 2018 04:27
:wave: @sorinr
Sorin Ruse
@sorinr
Mar 07 2018 04:27
@khaduch how u doing?
Ken Haduch
@khaduch
Mar 07 2018 04:27
doing alright, how about you?
Sorin Ruse
@sorinr
Mar 07 2018 04:28
not too bad. been missing for awhile from the rooms. had some projects to work on
Ken Haduch
@khaduch
Mar 07 2018 04:29
I was thinking that I haven't seen you around lately - welcome back!
Sorin Ruse
@sorinr
Mar 07 2018 04:30
glad to be back. hope to stay around more time :)
Ken Haduch
@khaduch
Mar 07 2018 04:34
@sorinr :+1:
ldubia
@ldubia
Mar 07 2018 04:53
thanks everyone.
JoEezy
@JoEeeezy_twitter
Mar 07 2018 06:36
i accidently ran an infinite loop and now it crashes everytime i load FCC , does anyone know how i could remove it before it runs
:worried:
Markus Kiili
@Masd925
Mar 07 2018 06:38
@JoEeeezy_twitter You can try clearing browser cookies or https://forum.freecodecamp.org/t/disable-code-auto-run-on-free-code-camp/19511
JoEezy
@JoEeeezy_twitter
Mar 07 2018 06:39
ty that link is exactly what i needed ... looks like it's happened alot before :)
i would clear cookies but i'd like to keep my other challenge code for reference
that code probably doesn't even make sense.. but i'm having a bit of a struggle with this one... sometimes when i get frustrated i'll just keep changing things around just to see what king of changes happen but this time it ended up breaking
Markus Kiili
@Masd925
Mar 07 2018 06:45
@JoEeeezy_twitter Looping the array indices with increment i = i + size is a good way.
JoEezy
@JoEeeezy_twitter
Mar 07 2018 07:10
thanks i'll give that a try :+1:
Heathercoraje
@Heathercoraje
Mar 07 2018 07:25
@bradtaniguchi Thanks Brad, I gave a thought of learning aws then it seemed to have a steep learning curve but I guess the time have come.
CamperBot
@camperbot
Mar 07 2018 07:25
heathercoraje sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 413 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Claudio Restifo
@Marmiz
Mar 07 2018 07:28
@JoEeeezy_twitter you can remove the autorun portion of the url, and reload the page... that way you code should not run on mount :)
mustimuu
@mustimuu
Mar 07 2018 10:03
guys
how do i create my own child theme in functions.php. If i allready have a website with a child-theme from a existing customer
Tiago Correia
@tiagocorreiaalmeida
Mar 07 2018 10:38
hey @Garabed96 how are you?how it went? I can giv eit a look today
mustimuu
@mustimuu
Mar 07 2018 12:18
guys
anybody know a place, to find good website color combinations ?
Ken Haduch
@khaduch
Mar 07 2018 12:21
@mustimuu - there are sites like https://color.adobe.com/create/color-wheel/ that are supposed to help you with color schemes. This article looks like an interesting one related to that. And they link back to the Adobe site, too, with some explanation of how to use it.
mustimuu
@mustimuu
Mar 07 2018 12:24
@khaduch thank yo
CamperBot
@camperbot
Mar 07 2018 12:24
mustimuu sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3779 | @khaduch |http://www.freecodecamp.org/khaduch
Aditya
@ezioda004
Mar 07 2018 12:24
@mustimuu Ken mentioned good one, and I'd also add paletton.com/ I personally use this for my projects
mustimuu
@mustimuu
Mar 07 2018 12:24
@ezioda004 thank you
CamperBot
@camperbot
Mar 07 2018 12:24
mustimuu sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 499 | @ezioda004 |http://www.freecodecamp.org/ezioda004
mustimuu
@mustimuu
Mar 07 2018 12:25
@ezioda004
how do i know which colors match each other
like i want my navigation to match rest of the website
UnorthodoxThing
@UnorthodoxThing
Mar 07 2018 12:25
Hi guys, I may need help with my nav bar. I want to put the menu tabs on the bottom-right of my menu/ nav div. https://codepen.io/UnorthodoxThing/full/paMBQB/ It's stuck on the stop left and I'm not sure what's causing it to.
Aditya
@ezioda004
Mar 07 2018 12:26
@mustimuu Match as in compliment or you want palettes?
UnorthodoxThing
@UnorthodoxThing
Mar 07 2018 12:26
Stuck on the top-right*
mustimuu
@mustimuu
Mar 07 2018 12:26
palettes
mate
Ken Haduch
@khaduch
Mar 07 2018 12:30
@mustimuu - the http://paletton.com site that @ezioda004 mentioned looks like it is a great tool for that purpose.
Marianissimus
@Marianissimus
Mar 07 2018 12:35
@UnorthodoxThing You can add this to the .nav
.nav{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;  
}
UnorthodoxThing
@UnorthodoxThing
Mar 07 2018 12:38
@Marianissimus wow thanks! I don't know much about the 'flex' value. Is there a good read or video you'd reccomend? :D
CamperBot
@camperbot
Mar 07 2018 12:38
unorthodoxthing sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 478 | @marianissimus |http://www.freecodecamp.org/marianissimus
UnorthodoxThing
@UnorthodoxThing
Mar 07 2018 12:38
What was the problem though??
Marianissimus
@Marianissimus
Mar 07 2018 12:40
You're welcome. this for theory: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and this for a veeeery nice practice: http://flexboxfroggy.com/ @UnorthodoxThing
anyway, pay attention to the new css-grid, it's supposedely better than flex.... so learn that...
UnorthodoxThing
@UnorthodoxThing
Mar 07 2018 12:47
@Marianissimus Thanks heaps for the resource! There's a new css-grid?? I started developing the page already and after that I started learning of the css-grid. I thought I'd stick with it for now and do another page with the css-grid. Would that confuse other people looking at my codes?
CamperBot
@camperbot
Mar 07 2018 12:47
unorthodoxthing sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
api offline
Marianissimus
@Marianissimus
Mar 07 2018 13:04
no, stick with what you have. that's a thing for later projects, especially since the support is at about 87%
flex is 98%
babemyatnoe
@babemyatnoe
Mar 07 2018 13:12
hi
im studying bootstrap
and i have many problems with bootstrap links
Marianissimus
@Marianissimus
Mar 07 2018 13:15
for instance? copy-paste a link that doesnt work so we can have a look
babemyatnoe
@babemyatnoe
Mar 07 2018 13:15
to create bootstrap modal poppup
Marianissimus
@Marianissimus
Mar 07 2018 13:17
are you using bootstrap v4? and an example just like here?: https://getbootstrap.com/docs/4.0/components/modal/
babemyatnoe
@babemyatnoe
Mar 07 2018 13:20
oh yeah.thats it.
i downloaded bootstrap file
but idk how to do with it to create bootstrap model poppup in my web
i just need bootstrap links for that
Marianissimus
@Marianissimus
Mar 07 2018 13:23
first, it's files. make sure it's all the files bootstrap needs: 1 css and 3 js in the latest release
make sure they're connected properly
and then just copy-paste the example from their page in yours. it should work
if everything fails, make a pen a give us the link to it, so we can see what's wrong;
BUT WAIT! if you just need bootstrap for a modal, maybe you can find a simpler solution.
do you just need bootstrap for that?
babemyatnoe
@babemyatnoe
Mar 07 2018 13:25
yep
Marianissimus
@Marianissimus
Mar 07 2018 13:26
come on, we can find an easier modal / pop-up solution
babemyatnoe
@babemyatnoe
Mar 07 2018 13:26
for customer to confirm on modal pop-up
Marianissimus
@Marianissimus
Mar 07 2018 13:26
when do you want to trigger it? on what event?
babemyatnoe
@babemyatnoe
Mar 07 2018 13:27
delete action
Marianissimus
@Marianissimus
Mar 07 2018 13:27
so on a click event, right? if user presses delete, show modal?
babemyatnoe
@babemyatnoe
Mar 07 2018 13:27
yep
with cancel and comfirm buttons
Marianissimus
@Marianissimus
Mar 07 2018 13:28
here's one: https://codepen.io/patrickkunka/pen/lFJty?q=modal+pop&limit=all&type=type-pens it just uses jquery, and i suppose you already do that
just add your buttons inside the modal wrapper div
here are some very nice effects, done mainly with css: https://codepen.io/designcouch/pen/obvKxm?q=modal%20&order=popularity&depth=everything&show_forks=false
copy and use the one that you like best
Darren
@DarrenfJ
Mar 07 2018 15:11
morning fCC
coderNewby
@coderNewby
Mar 07 2018 15:13
:wave: @DarrenfJ thanks for your help yesterday
CamperBot
@camperbot
Mar 07 2018 15:13
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2416 | @darrenfj |http://www.freecodecamp.org/darrenfj
Darren
@DarrenfJ
Mar 07 2018 15:13
ah no worries :D
@ name me if your need me, I just popped in to say hi and off to work ;)
coderNewby
@coderNewby
Mar 07 2018 15:15
ok thanks @DarrenfJ
CamperBot
@camperbot
Mar 07 2018 15:15
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
api offline
Frosty427
@Frosty427
Mar 07 2018 15:58
hey guys
can i get some help?
Sweet Coding :)
@SweetCodingInc
Mar 07 2018 15:58
@Frosty427 sure
Frosty427
@Frosty427
Mar 07 2018 15:59
im trying to recreate the apple website in bootstrap 4
and i cant figure out how to position the nav items
image.png
``` (shift+enter for line break)
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#"><i class="fab fa-apple appl" style="font-size: 23px;"></i><span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Mac</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">iPad</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">iPhone</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Music</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Support</a>
        </li>

        <li class="nav-item">
          <a href="#" class="nav-link"></a>
        </li>
      </ul>
    </div>
</nav>
```
Kaz Baig
@kbaig
Mar 07 2018 16:01
@Frosty427 looks to me like you could add padding on either side of the nav and make the nav a flexbox
Frosty427
@Frosty427
Mar 07 2018 16:01
@kbaig apoligies im relatively new to bootstrap could you tell me what flexbox is?
Kaz Baig
@kbaig
Mar 07 2018 16:01
justify-content: space-between
@Frosty427 flexbox is just css, it's not bootsrap
Frosty427
@Frosty427
Mar 07 2018 16:02
ive tried css but it doesnt work
even when i pit !important
put*
Kaz Baig
@kbaig
Mar 07 2018 16:02
What do you mean
Frosty427
@Frosty427
Mar 07 2018 16:02
when i use css nothing moves
Kaz Baig
@kbaig
Mar 07 2018 16:03
Is your css file after your bootstrap file in the html?
Frosty427
@Frosty427
Mar 07 2018 16:03
yes
image.png
Kaz Baig
@kbaig
Mar 07 2018 16:06
@Frosty427 would need a pen or fiddle to test further
But yeah, using flexbox would be an easy way to do what you want here. There's probably a BS way of doing it but idk BS
i want to move each item specifically
Garo
@Garabed96
Mar 07 2018 16:08
@tiagocorreiaalmeida Still won't work I'm back at square one. If it pops up... it does so on the page and not as a popup
@padunk I believe its related to bootstrap 4 and react... Some import issue Not certain though but modal is not popping up in an animated way, rather it just opens on the main page....
Kaz Baig
@kbaig
Mar 07 2018 16:14
@Frosty427 what styles did you try to apply
Frosty427
@Frosty427
Mar 07 2018 16:15
@kbaig i tried to select the font awesome apple icon and use margin-right
i also copied some code from the apple website
image.png
Kaz Baig
@kbaig
Mar 07 2018 16:18
Frosty427
@Frosty427
Mar 07 2018 16:21
seems i had the wrong path
but what code would i use to position them
Kaz Baig
@kbaig
Mar 07 2018 16:23
@Frosty427 look up flexbox and the justify-content property
Frosty427
@Frosty427
Mar 07 2018 16:43
@kbaig also how would i make the navbar shorter
Kaz Baig
@kbaig
Mar 07 2018 16:57
@Frosty427 reducing the padding
Frosty427
@Frosty427
Mar 07 2018 16:57
padding bottom right?
thanks mate
it worked
Garo
@Garabed96
Mar 07 2018 17:25
anyone want to help me with react.js with boostrap 4 ?
Modal not working atm I believe its a dependency issue / import
Ingram Jones
@Iggy1906
Mar 07 2018 17:25

So I'm almost done with my project. I'm trying to finish the tic tac toe but I can't get the tie function to work at all to save my life. Any suggestions or comments on why this doesn't work?

function tie() {
if (random === 9) {
console.log("Its a tie");
$("#gameboard").hide();
$("#reload").show();
$("#reload").click(function() {
window.location.href = window.location.href;
});

https://codepen.io/iggy1906/pen/PQpmmZ

Kingsley
@Kingwindie
Mar 07 2018 17:26
so i have a navigation bar,with links in it,but when i make the 5th link a sublist every other link in the navigation bar drop down to the same position of the sublist items,does anyone know why the links in the navigation won't stay in their original position?
```
 <div class="navBar">
            <li>
                <a href="index.htm">Chades Bicycle Company</a>
            </li>
            <li>
                <a href="kco_2_cal.htm">Company Calendar</a>
            </li>
            <li>
                <a href="kco_2_contact.htm">Contact Us</a>
            </li>
            <li>
                <a href="kco_3_abiform.htm">Customer Feedback</a>
            </li>

            <li id="dropBtn">
                <a href="kco_3_buying.htm">Buying Tips</a>
                <ul class="hide">
                    <li>
                        <a href="">One</a>
                    </li>
                    <li>
                        <a href="">Two</a>
                    </li>
                    <li>
                        <a href="">Three</a>
                    </li>
                    <li>
                        <a href="">Four</a>
                    </li>
                </ul>
            </li>
        </div>
.navBar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background-color: #d3d3d3;
  height: 34.5px;
  margin-bottom: 20px;
  font-family: 'Inconsolata', monospace, Helvetica;
}

.navBar li {
  text-align: center;
  list-style-type: none;
  position: relative;
}

.navBar li a {
  text-decoration: none;
  font-size: 17.6px;
  font-weight: bold;
  font-family: 'Inconsolata', monospace, Helvetica;
  color: #464646;
  letter-spacing: 2.3px;
}

.hide {
  display: none;
}
#dropBtn:hover .hide {
  display: block;
  background: chartreuse;
}
Tiago Correia
@tiagocorreiaalmeida
Mar 07 2018 17:30
@Garabed96 is your repository updated?
Garo
@Garabed96
Mar 07 2018 17:38
yes it is
when I click launch this is what pops up
image.png
but its on screen
Stephen James
@sjames1958gm
Mar 07 2018 17:54
@Garabed96 What is your expectation?
Garo
@Garabed96
Mar 07 2018 17:56
A modal?
Basic functionality wise just like this
Stephen James
@sjames1958gm
Mar 07 2018 17:57
@Garabed96 Do you have the styling set up to show as a modal? React can only show in the browser and the styling has to make it look like a modal
Garo
@Garabed96
Mar 07 2018 17:58
ya its in my index.css
h1tag
@h1tag
Mar 07 2018 17:58
@Kingwindie if you remove align-items: center from.navBar it stops doing that. Not sure, but maybe it tries to keep the elements aligned
Stephen James
@sjames1958gm
Mar 07 2018 18:02
@Garabed96 I don't find a modal-container class on any element in the DOM
Garo
@Garabed96
Mar 07 2018 18:05
a class?
Oh
that didn't make a difference though
Emil
@aguyinmontreal
Mar 07 2018 18:24
image.png
hi guys! need help to fix this text overflowing out of the div
image.png
even if I change the height I get the same issue
Stephen James
@sjames1958gm
Mar 07 2018 18:28
@aguyinmontreal Do you have a fixed width on the div?
h1tag
@h1tag
Mar 07 2018 18:30
@aguyinmontreal do u have the code hosted somewhere?
Stephen James
@sjames1958gm
Mar 07 2018 18:31
@sj @Garabed96 modal-dialog seems to be the class of the main modal container.
Emil
@aguyinmontreal
Mar 07 2018 18:31
@sjames1958gm yes I think it is inherits the fixed width of the parent div
Stephen James
@sjames1958gm
Mar 07 2018 18:32
@aguyinmontreal If the text is wider than the fixed width you need to do something with https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
@aguyinmontreal I am not a pro on that topic
Frosty427
@Frosty427
Mar 07 2018 18:32
guys im having an issue with pushing something in a navbar
Emil
@aguyinmontreal
Mar 07 2018 18:33
@sjames1958gm I tried overflow-x: hidden, but it doesn't change anything
Garo
@Garabed96
Mar 07 2018 18:34
@sjames1958gm what?
Frosty427
@Frosty427
Mar 07 2018 18:35
  <li class="nav-item">
              <a class="nav-link mac" href="#">Mac</a>
            </li>



.mac {
  right: 500px !important;
}
Garo
@Garabed96
Mar 07 2018 18:35
I don't want a static markup
Frosty427
@Frosty427
Mar 07 2018 18:35
why isnt it moving in the navbar?
Emil
@aguyinmontreal
Mar 07 2018 18:35
thanks @sjames1958gm found it!!!!! it was this silly attribute white-space: nowrap
CamperBot
@camperbot
Mar 07 2018 18:35
aguyinmontreal sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9068 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Marit Fischer
@TheMarit
Mar 07 2018 18:36
@Frosty427 I would use flexbox for that
Frosty427
@Frosty427
Mar 07 2018 18:36
what is flexbox?
Marit Fischer
@TheMarit
Mar 07 2018 18:37
Stephen James
@sjames1958gm
Mar 07 2018 18:37
@aguyinmontreal :100:

@Garabed96 If you go into the inspector - it appears that the class assigned to the Modal by react-bootstrap is modal-dialog

<div class="modal-dialog"><div class="modal-content" role="document"><div class="modal-header"><button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title">Ketogic Entry</h4></div><div class="modal-body"></div><div class="modal-footer"><button type="button" class="btn btn-default">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div>

This is copied from the chrome inspector

Garo
@Garabed96
Mar 07 2018 18:48
well idk if you're implying for me to change the className="modal-dialog" inside the Modal element but that wouldn't change anything
Stephen James
@sjames1958gm
Mar 07 2018 18:48
@Garabed96 I am asserting that your CSS should reference these classes when styling the modal
Garo
@Garabed96
Mar 07 2018 18:55
0
That's certainly not the issue
I followed the react-bootstrap example to the T
Tiago Correia
@tiagocorreiaalmeida
Mar 07 2018 19:23
@Garabed96 if you copy and past their code directly into your react component what appens
I mean iterally everything
open a new file and just copy their code
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:15
Anyone know a good free course for BS4?
Aditya
@ezioda004
Mar 07 2018 20:17
If you know BS3 then learning from BS4 docs should be really easy.
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:17
I don't
@ezioda004 Should i just do this one then?
Aditya
@ezioda004
Mar 07 2018 20:19
@MuhammedKarim w3schools, I dont really recommend that but you can give that a shot. There's BS4 in fccs beta Perhaps give that a try?
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:20
@ezioda004 Is it the full course? As in FCC it was really basic... Also, I've been told that the beta is quite unstable at the moment?
Aditya
@ezioda004
Mar 07 2018 20:21
@MuhammedKarim I havent done myself but it looks like you can get the basics done atleast, and I think thats the most imp part. Reading docs is very easy for bs if you understand its basics
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:22
@ezioda004 I kind of understand how to use the docs already
I made this using mostly the docs without learning BS but i believe i would be able to design it better if i learnt BS?
https://codepen.io/MuhammedK/pen/jZoXJP
Aditya
@ezioda004
Mar 07 2018 20:24
@MuhammedKarim I think so, you can polish and you can definitely use some basic CSS styling tricks
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:25
@ezioda004 So... should i do a BS course? If yes, which one?
Aditya
@ezioda004
Mar 07 2018 20:26
@MuhammedKarim May I suggest using SVGs for instead of images in your skill section?
Like I've used in my portfolio and it looks better and responsive too
You can try both, do the w3 one I guess, doesnt look that bad to learn BS
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:27
I don't know how to create SVGs
@ezioda004 That course on w3schools, ive just been doing it for like 5 mins and im feeling sleepy already lol
Aditya
@ezioda004
Mar 07 2018 20:28
You dont have to, use devicons, its like fontawesome, just copy paste SVG code
Its w3school :P I dont expect much
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:29
@ezioda004 I learnt my HTML, CSS and JS lol they're actually alright
Tom
@moT01
Mar 07 2018 20:29
skip the bootstrap
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:29
but just... learning seems boring
I think i should tbh
*learning BS seems boring
Aditya
@ezioda004
Mar 07 2018 20:30
You learn BS by doing and making projects honestly
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:30
@ezioda004 Thanks for that link. I love it!
CamperBot
@camperbot
Mar 07 2018 20:30
muhammedkarim sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 500 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:30
ooh 500, nice
Tom
@moT01
Mar 07 2018 20:31
nothing wrong with bootstrap - i prefer to just make with css
and js
Aditya
@ezioda004
Mar 07 2018 20:31
Oh yay 500!
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:31
It's a looott faster with BS, i used to use CSS but im a terrible designer and CSS is too slow
Aditya you should join the FCC/FCC group
Aditya
@ezioda004
Mar 07 2018 20:32
Whats that? The main channel?
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:32
Yes
Aditya
@ezioda004
Mar 07 2018 20:32
I'm there usually just lurk around
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:33
@ezioda004 Oh right, just never seen you there. Might have been my eyes
Aditya
@ezioda004
Mar 07 2018 20:34
Thats because I dont talk there haha but yeah I'm there. Usually hang in frontend/js/help channels
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:36
@ezioda004 Help channels?
Aditya
@ezioda004
Mar 07 2018 20:37
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:39
Nice!
Gulsvi
@gulsvi
Mar 07 2018 20:39
Only a few are very active though :/
Garo
@Garabed96
Mar 07 2018 20:46
@tiagocorreiaalmeida it still doesn't pop ouot
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 07 2018 20:48
@gulsvi Gotcha, thanks
CamperBot
@camperbot
Mar 07 2018 20:48
muhammedkarim sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2652 | @gulsvi |http://www.freecodecamp.org/gulsvi
jjzep
@jjzep
Mar 07 2018 20:49
So I’m trying to add entries into an object but I’m having difficulty getting the structure organized the way I want to when data is updated:
const items = JSON.parse(localStorage.getItem('storedKeys')) || []

function storageIndexUpdate(key, value, timeoutID) {
    const item = {
        key: {
            value,
            timeoutID
        }
    }

    items.push(item)
    localStorage.setItem('storedKeys', JSON.stringify(items))

}

storageIndexUpdate('cat', 'brown', 6)
Gulsvi
@gulsvi
Mar 07 2018 20:56
@jjzep how would you like to see the structure organized?
I *believe* you want to do this, but not sure without more info:
  const item = {};
  item[key] = {
    value,
    timeoutID
  };

That results in:

[{'cat':{'value':'brown','timeoutID':6}}]

instead of:

[{"key":{"value":"brown","timeoutID":6}}]
jjzep
@jjzep
Mar 07 2018 20:59
Yes, now if I want to add in multple values under cat, would that work as an object or should it be an array?
Gulsvi
@gulsvi
Mar 07 2018 20:59
It would work either as an object or an array - it's flexible
As far as what's best, it depends on how you want to use the data later. I'm not sure of any benefits of using an array vs. more objects, it may just be a matter of preference on what's easiest for you to access later
jjzep
@jjzep
Mar 07 2018 21:02
Yeah I’m experiementing with localStorage and accessing individual values.
Gulsvi
@gulsvi
Mar 07 2018 21:06
@Garabed96 If you have your react app in codepen, I might be able to help. I've experimented around with react bootstrap...but no guarantees :) I just can't debug it easily in a github repo
Michael Cordero
@CyberPutty
Mar 07 2018 21:14
does anyone know a good way to send form data to an email or something. I'm trying to set up my portfolio so that you can fill out a form and send it.
Gulsvi
@gulsvi
Mar 07 2018 21:18
@CyberPutty There's https://formspree.io/, but it won't work from codepen unless you run your portfolio in the debug view. It would work fine if you plan to host your portfolio from github
iso
@iso1048
Mar 07 2018 21:18
@gulsvi was just about to suggest that
Gulsvi
@gulsvi
Mar 07 2018 21:18
great minds :)
iso
@iso1048
Mar 07 2018 21:18
too quick as always
Michael Cordero
@CyberPutty
Mar 07 2018 21:19
@gulsvi thanks Ill check it out I have some hosting through godaddy so its being hosted
CamperBot
@camperbot
Mar 07 2018 21:19
cyberputty sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2653 | @gulsvi |http://www.freecodecamp.org/gulsvi
iso
@iso1048
Mar 07 2018 21:27
@gulsvi how you been?
Garo
@Garabed96
Mar 07 2018 21:47
@gulsvi lol I found out what it is, I needed a <link> in my html file -_-
Gulsvi
@gulsvi
Mar 07 2018 21:48
@user-ap Doing great, you?
@Garabed96 Glad you got it figured out!
Stephen James
@sjames1958gm
Mar 07 2018 22:01
@Garabed96 You were missing some css?
Kingsley
@Kingwindie
Mar 07 2018 22:13
@h1tag ok,i will try that,i was thinking about removing the grid system,i thought it didn't work well with submenus
@h1tag thanks
CamperBot
@camperbot
Mar 07 2018 22:14
kingwindie sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 933 | @h1tag |http://www.freecodecamp.org/h1tag
Leigh Hobson
@leighhobson89
Mar 07 2018 22:27
hi guys, i have a question but i need to post some code to ask it, so whats the best way to go about this_
ie how do you post snippets_
Leigh Hobson
@leighhobson89
Mar 07 2018 22:31
thanks @gulsvi
CamperBot
@camperbot
Mar 07 2018 22:31
leighhobson89 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2654 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Mar 07 2018 22:33
The backtick for code is above the tab key on US English keyboards - above the shift key on most spanish keyboards
Leigh Hobson
@leighhobson89
Mar 07 2018 22:35
function callQuote() {
  $.getJSON("https://cors-anywhere.herokuapp.com/http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $("#quote-text").append(a[0].content);
 $("#author").append("-- " + a[0].title);
});
}

This function works great when the page first loads through document.ready() - but when I call it with a button click like so:

 $('#newQuote').on('click', callQuote());
});

either nothing works, or the API is not calling a fresh quote. As a side note, if I refresh or hard refresh the page, the quote loaded is the same one as last time always...?

i´m very new at javascript by the way :/
Tiago Correia
@tiagocorreiaalmeida
Mar 07 2018 22:40
$('#newQuote').on('click', callQuote);
can you try it this way?
Leigh Hobson
@leighhobson89
Mar 07 2018 22:40
sure
now when i click it it appends the same quote below the other one, but at least its doing something, i´ll work on the API whats and wherefores, and clean up the page. Thanks a lot man! @tiagocorreiaalmeida
CamperBot
@camperbot
Mar 07 2018 22:42
leighhobson89 sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 507 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Tiago Correia
@tiagocorreiaalmeida
Mar 07 2018 22:42
no worries @leighhobson89 if later on you still have issues post it here but for now try to debug and spot what you are doing wrong gl
Dardan Demiri
@dardandemiri
Mar 07 2018 22:45
I don't get this:
dropElements([0, 1, 0, 1], function(n) {return n === 1;}) should return [1, 0, 1].
why that 0 in middle ?

0 === 1

is false

Leigh Hobson
@leighhobson89
Mar 07 2018 22:57
´´´

´´´
$("#newQuote").on("click", callQuote);
});
});

function callQuote() {
var rand = Math.floor(Math.random() * 40 + 1);
tidyUp();
$.getJSON(
"https://cors-anywhere.herokuapp.com/http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=40&callback=",
function(a) {
$("#quote-text").append(a[rand].content);
$("#author").append("-- " + a[rand].title);
}
);
}

function tidyUp() {
$("#quote-text").html("");
$("#author").html("");
}
´´´
I fixed it as above in the end, by making a small tidy up function and then pulling down more quotes at once and making a random number generator to pick one - that will probably do it! @tiagocorreiaalmeida

whoops code formatting didnt work
Gulsvi
@gulsvi
Mar 07 2018 23:09

@leighhobson89 remove the proxy to cors-anywere.herokuapp.com and use this URL instead:

https://quotesondesign.com/wp-json/posts?filter[orderby]=rand

It just needs to be https and you had http

You could also use this line of code to get a new quote every time rather than grabbing 40 quotes and using a random number to pick one:
$.ajaxSetup({ cache: false });