These are chat archives for FreeCodeCamp/HelpFrontEnd

13th
Aug 2018
Stevie
@StevieBland
Aug 13 2018 02:38
Im in desperate need of help with my CSS. Pls someone anyone help meeeeeeeeeeee.
glitz20
@glitz20
Aug 13 2018 02:45
anybody who have used/implemented rich text editor in react?
mustimuu
@mustimuu
Aug 13 2018 04:32
Hello guys i need some help
if i want 5 buttons to inline in inline with display:inline-block
cant get it to ork
mustimuu
@mustimuu
Aug 13 2018 05:02
Hello guys
Ashan Mohammed
@AshanMohammed
Aug 13 2018 05:47
Why my page looks messed up? It was looking fine last time i worked on this.
https://codepen.io/ashan_zeroxster/full/EpeQzx/
abraham anak agung
@padunk
Aug 13 2018 07:39
@AshanMohammed add margin left to your docbody
Ashan Mohammed
@AshanMohammed
Aug 13 2018 07:53
@padunk That works. Thank you
Ashan Mohammed
@AshanMohammed
Aug 13 2018 08:05
@padunk Again the contents looks messed up when scrolled horizontally
https://codepen.io/ashan_zeroxster/full/EpeQzx/
Dmytro Holysh
@dmk1111
Aug 13 2018 08:08
@AshanMohammed why do you need that horizontal scrolling at all? maybe better make it responsive?
Amit Patel
@AmitP88
Aug 13 2018 08:09
hey guys, in React, how do I disable an element from being clicked?
choice.png
I tried this, but it doesn't work for some reason (After clicking either X or O and setting the new state, I'm still able to click on either one after the new state has been set, which I don't want to be able to happen)
abraham anak agung
@padunk
Aug 13 2018 08:15
@AmitP88 put the boolean on your state. btw you don't have to write two onClick. Just write a single method for this.
Amit Patel
@AmitP88
Aug 13 2018 08:17
@padunk how would I put the boolean on state?
abraham anak agung
@padunk
Aug 13 2018 08:27
@AmitP88
this.state = {
  disabled: false
}
tundeiness
@tundeiness
Aug 13 2018 08:29
@moigithub not really working for me though...
Amit Patel
@AmitP88
Aug 13 2018 08:32
@padunk ok, I tried this, but it still allows me to click on the X or O after clicking on them once to set the state
choice-updated.png
tundeiness
@tundeiness
Aug 13 2018 08:35
i need help with my page design please
abraham anak agung
@padunk
Aug 13 2018 08:35
@AmitP88 cause i think disabled only work on form elements, not on span element. You might want to change it to button.
Amit Patel
@AmitP88
Aug 13 2018 08:37
@padunk ah I see. Ok, I'll give it a shot
abraham anak agung
@padunk
Aug 13 2018 08:38
@tundeiness what is the problem?
tundeiness
@tundeiness
Aug 13 2018 08:39
@padunk I am building a documentation page
Amit Patel
@AmitP88
Aug 13 2018 08:40
@padunk hmmm, it still doesn't work
choice-updated.png
Tiago Correia
@tiagocorreiaalmeida
Aug 13 2018 08:41
@Morched23MJ hey its been a while, hope you are doing fine :), @tundeiness have you solved it?
abraham anak agung
@padunk
Aug 13 2018 08:41

@AmitP88

<button disabled={this.state.disabled}>

that way yo don't need to call document.getElementByTagName. Anytime the state is change, you disabled attr will change

Tiago Correia
@tiagocorreiaalmeida
Aug 13 2018 08:42
I think I got an Idea need to try it out
tundeiness
@tundeiness
Aug 13 2018 08:42
@padunk and on large screen I want my navbar fixed to the left and not scrolling while the main documentation page scrolls. The issue is that if I apply position: fixed to the navbar, it stay fixed but at the same time the main documentation page gets to take that same position with the nav bar and I do not want that.
Tiago Correia
@tiagocorreiaalmeida
Aug 13 2018 08:42
can you give me the link?
Amit Patel
@AmitP88
Aug 13 2018 08:42
@padunk ah I see
tundeiness
@tundeiness
Aug 13 2018 08:42
@tiagocorreiaalmeida not yet
Amit Patel
@AmitP88
Aug 13 2018 08:43
@padunk thank you, it works now :) I don't know why I couldn't think of it lol
abraham anak agung
@padunk
Aug 13 2018 08:44
@AmitP88 :thumbsup: np, you just need more exercises on React
Amit Patel
@AmitP88
Aug 13 2018 08:44
@padunk for sure, this is my first real React project actually without following FCCs guidelines
tundeiness
@tundeiness
Aug 13 2018 08:47
Tiago Correia
@tiagocorreiaalmeida
Aug 13 2018 08:48
@tundeiness
create a parent element around the div you wanna right align
on the parent container give the following propreties
display: flex;
justify-content: flex-end;
you dont need to give flex to the inner div
tundeiness
@tundeiness
Aug 13 2018 08:50
@tiagocorreiaalmeida let me try that..but I think I did something similar yesterday and it didn't work. Note that the Navbar has a position: fixed to the left side but the #main-doc is behaving the same way the navbar is set to.
Jesse
@ki4jgt
Aug 13 2018 08:57

OK guys, I'm working on this wordpress site: http://jakewakefieldtarot.com/blog
It has the Twenty Sixteen theme installed -- with a few modifications. I added this to the style.css:

.top-menu * {
    border: none !important;
}

The top-menu still has a border around it. Can anyone help me out to get rid of this?

Tiago Correia
@tiagocorreiaalmeida
Aug 13 2018 09:00
let me pick the codepen edit it and send you an working exmaple
abraham anak agung
@padunk
Aug 13 2018 09:03
@ki4jgt i don't see any element with top-menu class, if i open dev console, the menu is made from table elements. you can remove the table border
Tiago Correia
@tiagocorreiaalmeida
Aug 13 2018 09:05
this looks a bit messy to work with it @tundeiness I will give you an idea of what you need to do
the div you wanna right align will need a parent element, the parent element needs the css propreties I just gave you, you can remove others flex from the others elements since they are not needed, the element you need to fix position should be out of this parent element it should be a separted element
tundeiness
@tundeiness
Aug 13 2018 09:07
@tiagocorreiaalmeida yeah..it's messy at the moment...I wanted to start all over again but I was waiting for solutions here
Jesse
@ki4jgt
Aug 13 2018 09:08
@padunk :facepalm: I tried to change the site over to bootstrap (table became container and tr was row) then I figured I didn't need all the extra effort. I totally forgot to put the class back in. I've been sitting here for 2 hours trying to fix this :(.
@padunk thank you!
tundeiness
@tundeiness
Aug 13 2018 09:08
@tiagocorreiaalmeida yes...the navbar is separate from the #main-doc
abraham anak agung
@padunk
Aug 13 2018 09:09
@ki4jgt np, happy hacking
tundeiness
@tundeiness
Aug 13 2018 09:10
@tiagocorreiaalmeida you see, the #main-doc wraps several #main-section and #main-doc is the parent element for the #main-section. but now I have just added another parent-element for the #main-doc which I think is not necessary though.
Tiago Correia
@tiagocorreiaalmeida
Aug 13 2018 09:18
Its really hard to help at this point try to clean the css you feel you dont need and then I pick it up, im at work so its a bit harder to help
abraham anak agung
@padunk
Aug 13 2018 09:18
@tundeiness you need parent element to wrap navbar and main-doc. I usually use grid for this
@tundeiness this is a basic idea of what it looks like. I clean up all your CSS, cause it was a mess, sorry
and last think, it kind of weird for me seeing <ul> <a><li>...</li></a></ul in you navbar, usually i found it like <ul><li><a>...</a></li></ul>, but i still new too, maybe just a matter of preference
tundeiness
@tundeiness
Aug 13 2018 09:21
@padunk :) no problem
@padunk I used that approach previously though. However I will take a look at what you did.
@padunk I just saw your code pen. but the concept I have is that the navbar should be fixed and should not scroll while #main-doc scrolls.

@padunk if you apply this:

navbar{
position: fixed;
}

everything go wrong. try it out.

abraham anak agung
@padunk
Aug 13 2018 09:30
@tundeiness yes, it just a basic idea. You could play with it. This is the right one if you add pos fixed. https://codepen.io/padunk/pen/EpMbPE?editors=1100
Ashan Mohammed
@AshanMohammed
Aug 13 2018 11:34
@dmk1111 Actually i don't want it
Ashan Mohammed
@AshanMohammed
Aug 13 2018 11:40
@dmk1111 Made some changes to make it responsive. Please take a look and let me know your comments https://codepen.io/ashan_zeroxster/full/EpeQzx/
Dmytro Holysh
@dmk1111
Aug 13 2018 11:44
@AshanMohammed looks better now.
When i try to get json data from the above url it is throwing error that
Failed to load https://api.data.gov.in//resource/9ef84268-d588-465a-a308-a864a43d0070?api-key=579b464db66ec23bdd000001f2a9afcaba44488e6777c5e71692d917&format=json: Response for preflight is invalid (redirect)
  $.ajax({
     type : "get",
     url : 'https://api.data.gov.in//resource/9ef84268-d588-465a-a308-a864a43d0070?api-key=579b464db66ec23bdd000001f2a9afcaba44488e6777c5e71692d917&format=json',
     crossDomain : true,
     crossOrigin: '*',
     contentType : 'application/json',
     dataType : 'json',
     success : function(data){
       for (var i =0 ; i < data.length; i++) {

         var $nr = $('<tr><td>' + data  + '</td></tr>');
         table.append($nr);
       }

       // after table is populated, initiate plug-in
       $('#myTable').DataTable(
            { "lengthMenu": [[10,-1], [10, 20]] });
}
});
This is my script file
see if any of them help
Stephen James
@sjames1958gm
Aug 13 2018 13:15
@1532j0004kg Remove the contentType as you are not sending any content. Then you will get CORS error. Need to make sure that sight supports cross site requests
Amit Patel
@AmitP88
Aug 13 2018 13:19

Hey guys, I was wondering, in React, is it possible to choose a state property at random?

For instance, if I wanted to setState of a random cell in this state object:

    this.state = {
      cell1 : '',
      cell2 : '',
      cell3 : '',
      cell4 : '',
      cell5 : '',
      cell6 : '',
      cell7 : '',
      cell8 : '',
      cell9 : ''
    };
Tiago Correia
@tiagocorreiaalmeida
Aug 13 2018 13:25
good catch @sjames1958gm
@AmitP88 use an array and pick a number random and change that position on the array?
since they are numeredcells
you can go for the object aswell concat"cell"+randomNumber
even tought doesnt makes alot of sense
Amit Patel
@AmitP88
Aug 13 2018 13:34
@tiagocorreiaalmeida ah ok, that kind of makes sense lol. I'll have to play with that idea. Thanks :)
BuntyBru
@BuntyBru
Aug 13 2018 14:27

hi guys needed a quick help
https://codepen.io/BuntyBru/pen/jpJpVV

i want to display the numbers in a sorted fashion
you can change the functions
but not the function calls

Moisés Man
@moigithub
Aug 13 2018 14:38
u could use an array.. @BuntyBru
BuntyBru
@BuntyBru
Aug 13 2018 14:40
no i cannot
actually i cant
Christopher McCormack
@cmccormack
Aug 13 2018 14:49
@BuntyBru are you able to use a loop?
this is what i am doing
i am not able to find ways to decrease the delay
now i am getting frustrated
i wanted to display news in a descending order based on their score
i have done that but not able to decrease the delay
Christopher McCormack
@cmccormack
Aug 13 2018 14:57
@BuntyBru you can decrease the delay by getting rid of your Promise.all. If you don't mind a bit of flickering, you can present the stories immediatly, then when all promises are resolved sort by score
BuntyBru
@BuntyBru
Aug 13 2018 14:58
getting rid of promise.all does not works
i have tries
Christopher McCormack
@cmccormack
Aug 13 2018 14:59
@BuntyBru I'm sure it does if you implement it properly
BuntyBru
@BuntyBru
Aug 13 2018 14:59
if i remove promise.all i can present the stories but they will not be sorted
Christopher McCormack
@cmccormack
Aug 13 2018 14:59
@BuntyBru :point_up: August 13, 2018 7:57 AM
BuntyBru
@BuntyBru
Aug 13 2018 15:01
okay
i am trying
@cmccormack
I tried
It is superdelayed
Christopher McCormack
@cmccormack
Aug 13 2018 15:03
@BuntyBru keep playing with it, it takes more than a minute to try different approaches.
BuntyBru
@BuntyBru
Aug 13 2018 15:05
stuck in this since last 7 hours
i cannot think of any way
Moisés Man
@moigithub
Aug 13 2018 15:13
probably u requesting too much data ?
maybe u can implement pagination
soo.. instead of making 500 queries.. u do 50 (per click )
or if u want "top 100" .. then slice ur data and process only those 100
BuntyBru
@BuntyBru
Aug 13 2018 15:28
@moigithub okay will look into pagination
top 100 is delayed too
nothing comes easy
Moisés Man
@moigithub
Aug 13 2018 15:50
i removed some loops
https://codepen.io/MMan/pen/djraNV?editors=1010 @BuntyBru
Morchid Chellali
@Morched23MJ
Aug 13 2018 16:54
Should I include the Tests script in my projects when I submit the URL to my project? (fCC projects)
Brad
@bradtaniguchi
Aug 13 2018 17:05
@Morched23MJ if your linking a github repo, I don't see how it would hurt. If your code runs the tests are just "on the side"
BuntyBru
@BuntyBru
Aug 13 2018 17:22
@moigithub
sorry for the delay in reply
took a small break
looking into the changes now
BuntyBru
@BuntyBru
Aug 13 2018 17:29
@moigithub
well slicing it to 100requests is bringing the delay down
Keegan
@Keggatron
Aug 13 2018 17:52
hi guys, I'm trying to think of a way that I can send a property to a stateless component that I plan on reusing based on initial values from a form. So for instance, I have an incremental button component that I want to set for minHours and maxHours.
const IncrementalButton = (props) => {            
            const decreaseItem = (props) => {                         
              values.props = values.props - 0.5;
            }

            const increaseItem = (props) => {
              values.props = values.props + 0.5;
            }
}
now my values are values.minHours and values.maxHours
what do I send as props from the <IncrementalButton />call
if I send 'minHours' I get a proxy object back
any ideas would be great thanks
BuntyBru
@BuntyBru
Aug 13 2018 18:33
anyone having experience with nodelist
Christopher
@bradley1492
Aug 13 2018 18:35

Good evening,
I am looking for the reason why I am getting something that looks to be a collapsed margin being caused by the ul element.
It occurs when I get into the mobile view.

But since I had Issues with collapsing margins before, I already set all margins and paddings to 0 at the beginning of my css.

What else can I dow now in order to solve this collapsing margin?

Here's my pen on codepen:
https://codepen.io/bradley1492/pen/pZrXQz?editors=0100

Christopher
@bradley1492
Aug 13 2018 18:51
I solved it, it was the lower scrollbar
:)
BuntyBru
@BuntyBru
Aug 13 2018 19:00

@sjames1958gm
was able to solve that display sorted numbers thing

https://codepen.io/BuntyBru/pen/jpJpVV?editors=1111

Slade
@Reaperoot_gitlab
Aug 13 2018 20:00
hey i have this home page but it wont center on the y axis... https://codepen.io/GRIMROOT/pen/rrdPEm via @CodePen
Christopher McCormack
@cmccormack
Aug 13 2018 20:05
looks centered to me
Slade
@Reaperoot_gitlab
Aug 13 2018 20:06
go full screen
BuntyBru
@BuntyBru
Aug 13 2018 20:13
is anyone having some experience dealing with nodelist in HTML
Brad
@bradtaniguchi
Aug 13 2018 20:14
my way of dealing with nodelist's are to not to deal with nodelists
BuntyBru
@BuntyBru
Aug 13 2018 20:19
haha
newmoon
@newmoon
Aug 13 2018 20:19
Sure, what's the question @BuntyBru ?
BuntyBru
@BuntyBru
Aug 13 2018 20:19
@bradtaniguchi
newmoon
@newmoon
Aug 13 2018 20:19
Array.from(nodelist) can help a lot. Or... [...nodelist]
BuntyBru
@BuntyBru
Aug 13 2018 20:19
var node = document.createElement("div");
t = "<h4>"+val.score+"</h4>"
var textnode = document.createTextNode(t);
node.appendChild(textnode);
newsItems.appendChild(node);
i want something in the place of
t = "<h4>"+val.score+"</h4>"
var textnode = document.createTextNode(t);
so that the data which is passed is just val.score
not
<h4>val.score </h4>
newmoon
@newmoon
Aug 13 2018 20:23
I haven't worked with createTextNode, I just enter strict HTML into the element I want and append that where needed.
BuntyBru
@BuntyBru
Aug 13 2018 20:23
@newmoon
is there something like createHTMLNode
newmoon
@newmoon
Aug 13 2018 20:23
myElement.innerHTML = `<h4>${val.score}</h4>`
@BuntyBru So, you would do something like this:
var node = document.createElement("div");
node.innerHTML = "<h4>" + val.score + "</h4>";
newsItems.appendChild(node);
(or use template literals as I showed above to be more ES6ish)
Or, make it a one-liner:
newsItems.innerHTML += `<div><h4>${val.score}</h4></div>`;
BuntyBru
@BuntyBru
Aug 13 2018 20:32
@newmoon
thanks man
the innerHTML part seems to be working
newmoon
@newmoon
Aug 13 2018 20:33
innerHTML is great - you can enter several lines of HTML rather than using createElement over and over again
BuntyBru
@BuntyBru
Aug 13 2018 20:33
i am going to check it now with larger parts
I hope it works
@newmoon
yeah man, i have heard about it
i was doing things since last 3 hours with insertAdjacentHTML
It is also one of the powerful things
I have heard that it is better than inner HTML in some aspects
I am going to check innerHTML with large parts of my code
newmoon
@newmoon
Aug 13 2018 20:36
insertAdjacentHTML lets you control where the HTML gets inserted rather than using += or = myHtml + existingHTML for prepending.
BuntyBru
@BuntyBru
Aug 13 2018 20:44
@newmoon
my code worked
newmoon
@newmoon
Aug 13 2018 20:45
Nice @BuntyBru :thumbsup:
@Reaperoot_gitlab Change height: auto to 100% in your <body> css, remove your flexbox CSS, and use the built in bootstrap utilities instead:
    <div class="container-fluid h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-md-4 mx-auto">
                <div class="jumbotron text-center">
                    <img class="img-fluid img-thumbnail" src="https://scontent-atl3-1.xx.fbcdn.net/v/t1.0-1/p160x160/35192691_2019840291360402_7079636795792556032_n.jpg?_nc_cat=0&oh=eadcfa612626b7b778a4fbfc4f966a5b&oe=5C006999" alt="Profile picture" style="margin-bottom:2em">
                    <h1>Nicholas Du Plessis</h1>
                    <h2>Front-End Developer</h2>
                </div>
            </div>
        </div>
    </div>
You could also leave your html/body CSS as is and set a specific height for the container instead. Vertical centering with flexbox requires a height to reference.