These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Dec 2017
Stephen James
@sjames1958gm
Dec 21 2017 00:25
@JacobPie Hi
Tom
@moT01
Dec 21 2017 00:42
hi
LoLRabbit
@KevinStaufy
Dec 21 2017 00:44
Just finished my portfolio after several hours worth of work, still new to this but let me know how it looks haha! https://codepen.io/KevinStaufy/full/ypOwer
Tom
@moT01
Dec 21 2017 00:45
@KevinStaufy not bad
theres a lot of things that could be improved
if you're working on the freecodecamp projects and lessons - i would say that it might be good to just move on
i didnt do my portfolio till i finished the front end section - you will be way better by then have more to put on there
but - if you want some tips - the navbar could be 'fixed' to the top
lot of responsive issues - with picture going out of their containers or off the screen
Tom
@moT01
Dec 21 2017 00:50
and things not staying centered
but not too bad
make sure you learn how to properly nest your html elements and other code
all the style properties that are in the html could probly be moved over to the css
grif04
@grif04
Dec 21 2017 01:14
hello, does anyone have some time to help out with an issue im having with a website?
Tom
@moT01
Dec 21 2017 01:32
@grif04
Amit Patel
@AmitP88
Dec 21 2017 01:34
hey guys, I'm creating a resume builder app using React. I have various forms (stored in their each component) for the user to fill out, and the user input will be placed in different components (such as Header, WorkHistory, Skills, etc). Since I'll be using state to store the form data, would this be a good candidate project to use Redux? (since it's essentially a state container). I've never used Redux before so I just want to make sure.
app.png
Stephen James
@sjames1958gm
Dec 21 2017 01:41
@AmitP88 If you have a lot of components and shared state then Redux can be used. If there is not too much state then Redux can tend to add more overhead than it is worth it.
@AmitP88 Honestly, I would continue down your current path until the state becomes too much before getting side tracked into setting up and using Redux.
Amit Patel
@AmitP88
Dec 21 2017 01:42
@sjames1958gm ah ok. yeah, I was thinking of doing that too
Stephen James
@sjames1958gm
Dec 21 2017 01:42
@AmitP88 Great minds, and all :)
Amit Patel
@AmitP88
Dec 21 2017 01:42
@sjames1958gm how do I access state in one component from another? (like in the pic)
Stephen James
@sjames1958gm
Dec 21 2017 01:44
If your component depth is not too much, you can use a parent component as a state repository, the input component passes information up through event handlers and and the parent passes state down through props.
Amit Patel
@AmitP88
Dec 21 2017 01:47

@sjames1958gm hmmm, how would I do that in my project setup?

https://github.com/AmitP88/resume-builder-app

My forms are in a modal component, and the input to be rendered would be in the Resume component

not to mention I have multiple states to pass through in one component
LoLRabbit
@KevinStaufy
Dec 21 2017 01:48
@moT01 still super new, ty for all the tips!
CamperBot
@camperbot
Dec 21 2017 01:48
kevinstaufy sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 940 | @mot01 |http://www.freecodecamp.org/mot01
Tara Botka
@TBot4
Dec 21 2017 01:56
hey all, I'm having a problem with the uninitialized variables part of basic java script. how do I initialize a variable to be "I am a" ?
Tom
@moT01
Dec 21 2017 01:57
@KevinStaufy we've all been there
VaseJS
@VaseJS
Dec 21 2017 01:57
@TBot4 let ABC
let abc = 'I am a';
done
Tara Botka
@TBot4
Dec 21 2017 02:07
@VaseJS I must be too tired for this, I'm still not getting it. What does C = then? thanks btw
CamperBot
@camperbot
Dec 21 2017 02:07
tbot4 sends brownie points to @vasejs :sparkles: :thumbsup: :sparkles:
:cookie: 368 | @vasejs |http://www.freecodecamp.org/vasejs
VaseJS
@VaseJS
Dec 21 2017 02:09
@TBot4 we can't see your code so we don't know either
are you doing an exercise? if so, which one?
Tara Botka
@TBot4
Dec 21 2017 02:10
@VaseJS yes, it's Understanding Uninitialized Variables in java script basics
VaseJS
@VaseJS
Dec 21 2017 02:11
@TBot4 let me see if i can find that
Tara Botka
@TBot4
Dec 21 2017 02:11

// Initialize these three variables
var a = 5;
var b = 10;
var c = "I am a!";

// Do not change code below this line

a = a + 1;
b = b + 5;
c = c + " String!";

a should be defined and have a value of 6
b should be defined and have a value of 15
c should not contain undefined and should have a value of "I am a String!"
Do not change code below the line
LoLRabbit
@KevinStaufy
Dec 21 2017 02:13
@moT01 can i dm you?
VaseJS
@VaseJS
Dec 21 2017 02:14
var c = "I am a!"; ...remove the (!)
the exercises are picky. you must do exactly what they say. the smallest change in it won't work
Tara Botka
@TBot4
Dec 21 2017 02:16
@VaseJS omfgggg, I swear I tried that and every other variation. Thank you! was beating my head on the table
CamperBot
@camperbot
Dec 21 2017 02:16
tbot4 sends brownie points to @vasejs :sparkles: :thumbsup: :sparkles:
api offline
VaseJS
@VaseJS
Dec 21 2017 02:16
@TBot4 I've been there. We all know the frustration
this is what code pairing is about. the other person can easily see what you missed while you were typing/putting code together. Its like being a paid internet grammer nazi
Tom
@moT01
Dec 21 2017 02:18
dm? @KevinStaufy xure
VaseJS
@VaseJS
Dec 21 2017 02:18
if you're work for a company. otherwise, you are just an appreciated code syntax nazi
Jake
@JakeG6
Dec 21 2017 02:26
Is anybody here skilled with React?
I could use some help with an extremely simple question.
VaseJS
@VaseJS
Dec 21 2017 02:32
@JakeG6 can't be too simple cuz we can't help :D
Jake
@JakeG6
Dec 21 2017 02:34
@VaseJS Back when I used AngularJS, I just used jquery to manipulate CSS and DOM elements. Now that my local meta has switched over to React, I realize that I've actually never learned how to do that with javascript.
Like, how would you do something like have the background of your page change to a color when you click a button? something basic like that.
VaseJS
@VaseJS
Dec 21 2017 02:35
i know. i'm against learning any framework/library until the base language is understood first
no jquery, no bootstrap, no haml. just pure css, html and js
Jake
@JakeG6
Dec 21 2017 02:36
never heard of haml. not to be confused with mark hamill.
I know how to put in a onClick function for react. the next question is. what would I put if I wanted to add or change a css class on a element, like the body?
VaseJS
@VaseJS
Dec 21 2017 02:37
everyone is trying to do everything better before they learn or allow others to learn what's 'wrong' with things first
there are multiple ways to do that. but that comes down to your style in coding css
Jake
@JakeG6
Dec 21 2017 02:38
coding css?
VaseJS
@VaseJS
Dec 21 2017 02:38
add a class to the body and adjust from there
oh, i had to reread. onclick is ok, but bad practice of putting js in your html making it harder to expand and adjust later
but in react that may be different / apart of the style
Jake
@JakeG6
Dec 21 2017 02:39
It's in the JSX.
Do you know react?
VaseJS
@VaseJS
Dec 21 2017 02:39
yea, jsx
not at all
likely never will
Jake
@JakeG6
Dec 21 2017 02:40
Well, then I guess I'm done here for now. I'll have to search for answers elsewhere.
VaseJS
@VaseJS
Dec 21 2017 02:40
react is what angular was...a year or two ago: hot. next year, it will be something else
try the help room or the free code camp general room
Jake
@JakeG6
Dec 21 2017 02:41
Is there a vanilla help room?
VaseJS
@VaseJS
Dec 21 2017 02:41
i'm in there and other people are asking react questions
no, its just called FreeCodeCamp/FreeCodeCamp
and the FreeCodeCamp Help room
grif04
@grif04
Dec 21 2017 02:50
@moT01 @moT01 hello m8
Tom
@moT01
Dec 21 2017 02:56
@grif04
@JakeG6 whats the question
Jake
@JakeG6
Dec 21 2017 02:57
@moT01 It's been asked. I'm just giving it an attempt at the moment. I'll report back if it worked.
grif04
@grif04
Dec 21 2017 02:57
@moT01 im having issue with a menu bar - it will not click through
Jake
@JakeG6
Dec 21 2017 02:58
@VaseJS They taught angular at my coding camp. Now we've switched to React. Wonder if Vue will replace it. the meta is always shifting.
VaseJS
@VaseJS
Dec 21 2017 02:59
that's why i just don't bother with them all. i stay as minimal and close to vanilla as possible
life is easier that way for me
Jake
@JakeG6
Dec 21 2017 02:59
@moT01 Not changing the image, just the css color.
VaseJS
@VaseJS
Dec 21 2017 02:59
and my skills only get better and will never be worthless when the next cool thing replaces the old cool thing
Tom
@moT01
Dec 21 2017 02:59
i think react is newer than vue - and i doubt either of them will replace either of them
@JakeG6 for the most part vanilla - isn't to far off from jquery for stuff like that
just longer
document.getElementById('<id here>').style = red or something probly pretty close to that
Cameron Pick
@Fullmight
Dec 21 2017 04:06
I'm trying to check the contents of a variable with an RGB value in JS to pinpoint an error in my code, but JSON.stringify just prints [object Object] which is the same result every other method I've looked up to print the contents of an object in JS gives me. Anyone know what the deal is with this / how I can print the contents of a variable containing an object at some given point in my code?
Tom
@moT01
Dec 21 2017 04:12
you on codepen?
@Fullmight
Cameron Pick
@Fullmight
Dec 21 2017 04:43
Yeah I am
I did kinda resolve my issue in the sense that I manually concatenate all elements of the object into a string in another function, but I'd still like to know if there's a resolution that allows you to just print to console the contents of an object like that for future reference.
and in particular, I'm running my codepen full screen in firefox developer to use the firebug console.
primuscovenant
@primuscovenant
Dec 21 2017 05:04
@heroiczero thx
CamperBot
@camperbot
Dec 21 2017 05:04
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2112 | @heroiczero |http://www.freecodecamp.org/heroiczero
captain-anonymous
@captain-anonymous
Dec 21 2017 05:08
hey guys
am almost done with my portfolio project https://codepen.io/coder-anonymous/pen/XVKZGG
any feedback will be really appreciated
linkin-park
@linkin-park
Dec 21 2017 05:43
@heroiczero hi
@captain-anonymous nice
kerafyrm02
@kerafyrm02
Dec 21 2017 07:10
Anyone need help?
linkin-park
@linkin-park
Dec 21 2017 07:10
i need @kerafyrm02
kerafyrm02
@kerafyrm02
Dec 21 2017 07:11
sure whats up
linkin-park
@linkin-park
Dec 21 2017 07:11
can i dm u
kerafyrm02
@kerafyrm02
Dec 21 2017 07:11
yeah
Ryan
@Ryan-ED
Dec 21 2017 08:25
@sjames1958gm it works! thanks!
CamperBot
@camperbot
Dec 21 2017 08:25
ryan-ed sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8798 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Nurbek
@NurbekGithub
Dec 21 2017 09:41
need help?
Markus Kiili
@Masd925
Dec 21 2017 09:42
@NurbekGithub If you have a question, just post it here.
Nurbek
@NurbekGithub
Dec 21 2017 09:43
@Masd925 nope, I haven't. I have some free time to help someone
Markus Kiili
@Masd925
Dec 21 2017 09:43
@NurbekGithub ok.
Zerka1982
@Zerka1982
Dec 21 2017 09:43
I need help
Nurbek
@NurbekGithub
Dec 21 2017 09:43
@Zerka1982 , bring it!
Zerka1982
@Zerka1982
Dec 21 2017 09:45
Ok
I am trying to build one small table inside this page. Let me first show u how it looks like then I ll share the example I made
image.png
Nurbek
@NurbekGithub
Dec 21 2017 09:47
@Zerka1982 looks nice
Zerka1982
@Zerka1982
Dec 21 2017 09:47
This how it should look like. however when I tried it, I have problem especially that I don't know how to use position in css
that s the design only
here is my code
I want to build just one table and then I ll manage to do the other one
Could you guys help me build only 1 table, and i ll try to follow the same instructions for the 2nd table ?
based on the design I sent earlier
Also when I check responsiveness, it seems that the text is getting smaller ... I don't know how to fix that.
Nurbek
@NurbekGithub
Dec 21 2017 09:55
@Zerka1982 try this ta
Zerka1982
@Zerka1982
Dec 21 2017 09:55
What is that ?
Nurbek
@NurbekGithub
Dec 21 2017 09:56
<table> <tr> <th><p>1<sup>st</sup> Prize</p></th> <tr> <tr> <td> body</td> </tr> <tr> <td>footer1</td> </tr> <tr> <td>footer2</td> </tr> </table>
oops
Zerka1982
@Zerka1982
Dec 21 2017 09:56
WIll work @NurbekGithub ?
Nurbek
@NurbekGithub
Dec 21 2017 09:56
<table>
              <tr>
                <th><p>1<sup>st</sup> Prize</p></th>
              <tr>
              <tr>
                <td>
                  body
                </td>
              </tr>
              <tr>
                <td>footer1</td>
              </tr>
              <tr>
                <td>footer2</td>
              </tr>
      </table>
It is a basic table. You need to style it
tr stands for table row
Zerka1982
@Zerka1982
Dec 21 2017 09:58
here what I got
image.png
Nurbek
@NurbekGithub
Dec 21 2017 10:03
@Zerka1982 try adding this css rules ```
Zerka1982
@Zerka1982
Dec 21 2017 10:03
yes ?
Nurbek
@NurbekGithub
Dec 21 2017 10:04
table {
    border-collapse: collapse;
}

table, th, td {
    width: 300px;
    border: 2px solid white;
}
Zerka1982
@Zerka1982
Dec 21 2017 10:10
Thank you @NurbekGithub I ll try it
CamperBot
@camperbot
Dec 21 2017 10:10
zerka1982 sends brownie points to @nurbekgithub :sparkles: :thumbsup: :sparkles:
:cookie: 294 | @nurbekgithub |http://www.freecodecamp.org/nurbekgithub
Minoy
@minoy
Dec 21 2017 10:15
Hello!
Is it a good practice to use <br> tag to do line spacing in html? Or is there another better way?
Markus Kiili
@Masd925
Dec 21 2017 10:20
@minoy Using line break tags is fine. You can also use p elements for paragraphs.
Minoy
@minoy
Dec 21 2017 10:24
@Masd925 Thanks!
CamperBot
@camperbot
Dec 21 2017 10:24
minoy sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4620 | @masd925 |http://www.freecodecamp.org/masd925
Minoy
@minoy
Dec 21 2017 10:50

Is it possible to have a <form> with fields that are spread over different columns in a bootstrap grid? All my fields are coming in the first column only. Sample code:

<form action="" method="get">
            <div class="row">
                <div class="col-lg-3">
                                       item 1
                </div>
                <div class="col-lg-3">
                    item 2
                </div>
                <div class="col-lg-3">
                    item 3
                </div>
                <div class="col-lg-3">
                    item 4
                </div>
            </div>
        </form>

All four items come one below the other instead of side by side.

Markus Kiili
@Masd925
Dec 21 2017 10:54
@minoy lg classes only apply to large screen devices. On anything smaller those divs take full width.
Minoy
@minoy
Dec 21 2017 10:58
@Masd925 Yes, I know that it is used for laptops for instance, right? I am sorry, I did not understand the problem you are trying to point to. I am working on a laptop currently.
Markus Kiili
@Masd925
Dec 21 2017 11:01
@minoy I just mean that, this structure should put items side by side on large devices and on top of each other on Extra small, small, and medium devices.
So having them on one column might be just because of the device.
Minoy
@minoy
Dec 21 2017 11:05
@Masd925 Ok, I understand your point. I am using a laptop which is a large device I suppose. Also, I changed the class to col-sm-3 and they are still coming one below the other.
Markus Kiili
@Masd925
Dec 21 2017 11:06
@minoy Might be something else wrong then. You have the container or container-fluid class there somewhere? Post the full code please.
Minoy
@minoy
Dec 21 2017 11:13
@Masd925 Okay, something is off! The code is breaking only in Chrome. It is working fine in Safari and when I put it in Codepen.
@Masd925 Fixed it! :)
Removed the integrity attribute in the <script> tags.
Now it works
Markus Kiili
@Masd925
Dec 21 2017 11:16
@minoy :+1:
Stephen James
@sjames1958gm
Dec 21 2017 11:38
@AmitP88 Sorry man I had put the computer away for the night.
@AmitP88
Here is a pen where I kind of do that - have a parent component that manages two children
https://codepen.io/silgarth/pen/ZWvagg?editors=1010
Amit Patel
@AmitP88
Dec 21 2017 11:42
@sjames1958gm no worries. Actually, when I mapped out my components, I found out that the only parent component between the forms and Resume component (where the form data would be rendered) is the component that renders the entire app itself. To render the form data from one component to the other would require a huge climb up the component tree to that parent component just to filter down to the Resume one.
So actually, I've found that this would be a good case to use Redux, so I'm gonna restudy Redux and implement a state container for all the form data
Stephen James
@sjames1958gm
Dec 21 2017 11:48
@AmitP88 Ok, well good luck, I have done some redux implementation, so give me a shout if you have questions/issues
Amit Patel
@AmitP88
Dec 21 2017 11:50
@sjames1958gm for sure, thank you. I'll let you know how it goes
CamperBot
@camperbot
Dec 21 2017 11:50
amitp88 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8799 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Vidžius
@sursider
Dec 21 2017 14:02
Hello people. What editor are you using for programming? Notepad++ is a best choice or I should use something else?
DecisiveIndecisive
@DecisiveIndecisive
Dec 21 2017 14:05
CodePen.io
Vidžius
@sursider
Dec 21 2017 14:06
but desktop app?
for using outside fcc
all the time I was using np++, maybe dreamviewer or something else is better for this?
Debashis Das
@debashis1992
Dec 21 2017 14:24
Is there any workarounds for Twitch tv project apart from registering our application ??
Vidžius
@sursider
Dec 21 2017 14:27
you dont need to register to twitch if you're asking this
@debashis1992
Debashis Das
@debashis1992
Dec 21 2017 14:29
Yes @sursider and I dont want to
Vidžius
@sursider
Dec 21 2017 14:33
@debashis1992 you don't need to register to get some API key or something, just take info from them.
you should find the info about their API in their website...
oh, it asks to register.
https://codepen.io/sursider/pen/evoYyE
when i created this it haven't asked to register but as I see it's still working.
Abdullah-Al-Zubair
@a2-zubair
Dec 21 2017 14:35
hello guys, How do you doing today? I need help from your guys. I am doing wikipedia viewer app but i don't understand the wiki api. I read the wiki api article but i don't get it. I'm not clear about the wiki api url, need help from you guys to help me to understand the wiki api url.
Vidžius
@sursider
Dec 21 2017 14:36
check my codepen. i added link for other pen, but you can find wiki viewer in my profile.
Debashis Das
@debashis1992
Dec 21 2017 14:37
its working because you have hard-coded the users list, you are not calling channels from their API which are offline/online/all
@sursider
Vidžius
@sursider
Dec 21 2017 14:40
@debashis1992 sorry, i don't understand what you mean :worried:
Debashis Das
@debashis1992
Dec 21 2017 14:42
See you're seeking information from a particular list of channels, you're not querying the API to get which are online/offline. Suppose, we want to get a list of all channels which are online, in that case how would we know all the channel names
Vidžius
@sursider
Dec 21 2017 14:45
you're creating something not for fcc?
Debashis Das
@debashis1992
Dec 21 2017 14:45
@sursider FCC it is :)
Vidžius
@sursider
Dec 21 2017 14:46
it requires to get list of your chosen list, you don't need to get a list of all channels
Debashis Das
@debashis1992
Dec 21 2017 14:48
Well the FCC video shows something like what I've said, and the users list they mentioned, we can use to test something but I honestly didn't think it would be something like this
Vidžius
@sursider
Dec 21 2017 14:49
dunno, maybe something changed, my code was created like 9 months ago i think :D
Debashis Das
@debashis1992
Dec 21 2017 14:50
Anyway thanks @sursider . Much appreciated
CamperBot
@camperbot
Dec 21 2017 14:50
debashis1992 sends brownie points to @sursider :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @sursider |http://www.freecodecamp.org/sursider
Vidžius
@sursider
Dec 21 2017 14:51
@debashis1992 no problem man. because of this community I sticked to fcc when I was on fire to learn all of this.
Abdullah-Al-Zubair
@a2-zubair
Dec 21 2017 15:08
Can anybody help about this? why my search value show "Undefined"? here is my code
$(document).ready(function(){
    // search button is clicked
    $("#searchBtn").click(function(){
        var searchText = $("#searchText").val();
        console.log(searchText);
        var apiUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&search="+ searchText +"&format=json&callback=?";
        $.ajax({
            type:"GET",
            url:apiUrl,
            async:"flase",
            dataType:"json",
            success: function(wikiData){
                console.log(wikiData);
            },
            error: function(errorWiki){
                alert("Wiki Data Error!");
            }
        });
    });
});
Dmytro Holysh
@dmk1111
Dec 21 2017 15:09
@a2-zubair is this input with id searchText?
Abdullah-Al-Zubair
@a2-zubair
Dec 21 2017 15:10
@dmk1111 yes
Dmytro Holysh
@dmk1111
Dec 21 2017 15:12
@a2-zubair Can you share a link to codepen?
Abdullah-Al-Zubair
@a2-zubair
Dec 21 2017 15:14
@a2-zubair thanks to point that out. I find it now, i do silly mistake and now it's work. Thanks
CamperBot
@camperbot
Dec 21 2017 15:14
sorry a2-zubair, you can't send brownie points to yourself! :sparkles: :sparkles:
linkin-park
@linkin-park
Dec 21 2017 15:14
i'm extremely noob :(
Abdullah-Al-Zubair
@a2-zubair
Dec 21 2017 15:14
@dmk1111 thanks man
CamperBot
@camperbot
Dec 21 2017 15:14
a2-zubair sends brownie points to @dmk1111 :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @dmk1111 |http://www.freecodecamp.org/dmk1111
Dmytro Holysh
@dmk1111
Dec 21 2017 15:15
@a2-zubair you're welcome
DecisiveIndecisive
@DecisiveIndecisive
Dec 21 2017 15:26

Finally finished with the Random Quote Game that I blew way out of scope for a freeCodeCamp project.

Would you guys mind sharing your feedback with me and letting me know what you think? Pretty optimized for mobile, the only real issue is lagging image API pull

https://codepen.io/DecisiveIndecisive/full/KXjXXd/

Tom
@moT01
Dec 21 2017 15:31
@DecisiveIndecisive looks great
it was a little confusing at first
could maybe use a title
like Who said it? or something
that should eliminate that initial confusion
it could also use some sort of indicator if i got it right or wrong
like for instance - instead of just making the one i click green or red
make all three of them change colors - the two wrong ones would be red - im guessing - and the right one would be green
the fact that i have to guess though - means im still a little confused
Tom
@moT01
Dec 21 2017 15:39
one of the better projects ive seen though - creative to make a game out of it - and the design is great
DecisiveIndecisive
@DecisiveIndecisive
Dec 21 2017 15:40
Thanks! I'm wondering what's a good way to convey that you're guessing the artist without a title, because the title might get a little funky on smaller screens..
DecisiveIndecisive
@DecisiveIndecisive
Dec 21 2017 16:33
@moT01 Added in the incorrect answers turning red
Tom
@moT01
Dec 21 2017 16:36
did you change the text on the landing page too?
DecisiveIndecisive
@DecisiveIndecisive
Dec 21 2017 16:36
There's also a score in the top left, if you hover over the little info button it'll point out various things with tooltips
Tom
@moT01
Dec 21 2017 16:36
yea, i saw that - thats nice
DecisiveIndecisive
@DecisiveIndecisive
Dec 21 2017 16:36
No, landing page still currently says Random Quote Guessing Game in cursive, is that where you were recommending change to "Who said it"
Tom
@moT01
Dec 21 2017 16:38
no - i forgot the landing page was there when i said that before
Zerka1982
@Zerka1982
Dec 21 2017 16:39
Hello guys I need your help :)
Check this example I made https://codepen.io/Zerka1982/pen/qpNVPa
Ben Line
@Benwebdev
Dec 21 2017 16:39
@Zerka1982 what do you need help with ?.
Zerka1982
@Zerka1982
Dec 21 2017 16:40
I want to make both tables responsive. The problem is that when I resize the page, it seems that the tables do not have the same height
If someone can edit my code, I ll appreciate it ;)
I am working since morning only on the left side of the page. I ll work on the left side tomorrow. At least I wish to finish the left part today ...
linkin-park
@linkin-park
Dec 21 2017 17:18
EJS is my favorite book of all time :)
Precious Madubuike
@PreciousME
Dec 21 2017 17:18

Wow, it seems I can’t upload images here

I’m reading Eloquent JavaScript, and have come accross binary code. I know they might not be relevant in today’s real world, but I know the author has a reason to include it in the book, and I think I need to understand it. Can anyone help me explain how these 0s and 1s are realized. Maybe the math. And why does the digits below count be the factor of 2. Also, where is 8 + 4 + 1 coming from? See this https://cl.ly/1g432V0a1H14 It’s a screenshot of the book. Thanks

linkin-park
@linkin-park
Dec 21 2017 17:23
what you didnt get it ?
it is very basic computer problem
Precious Madubuike
@PreciousME
Dec 21 2017 17:24
How is 00001101 = 13?
linkin-park
@linkin-park
Dec 21 2017 17:26
one of the base is 2 (left)
other is base 10 (right)
Precious Madubuike
@PreciousME
Dec 21 2017 17:26
Ok?
Precious Madubuike
@PreciousME
Dec 21 2017 17:29
Thanks Linkin Park. Will deifinatlet watch the video
Thanks again.
linkin-park
@linkin-park
Dec 21 2017 17:40
@NaijaMedia why cant i reach ur repo github ?
Yingjie (Iris) Hu
@huyingjie
Dec 21 2017 17:48
I am doing this challenge
Why does it not work?
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("h2")
      .data(dataset)
      .enter()
      .append("h2")
      .text((d) => (d + " USD"))
      // Add your code below this line
      .style("color", (d)->{
       if (d<20) return "red";
      else return "green";
    })


      // Add your code above this line
  </script>
</body>
Oh. I found the reason. I use “->” instead of “=>"
linkin-park
@linkin-park
Dec 21 2017 17:55
why they came up with fat arrow ?
why it cant be ->
VaseJS
@VaseJS
Dec 21 2017 18:28
he's back
Markus Kiili
@Masd925
Dec 21 2017 18:30
@linkin-park It is this Supersize It culture.
VaseJS
@VaseJS
Dec 21 2017 18:30
it looks better
Blake
@BadSenju
Dec 21 2017 18:35
ive got a question..does a <div class="content"> a thing?
VaseJS
@VaseJS
Dec 21 2017 18:35
that's older code with bad css practices from not understanding html5 well
so yes its a thing still. some people don't continue their education and keep coding like that
Blake
@BadSenju
Dec 21 2017 18:37
oh thanks..soo that wouldnt be needed in current in columns ?
Zerka1982
@Zerka1982
Dec 21 2017 18:37
Guys anybody here to help please
Blake
@BadSenju
Dec 21 2017 18:38
im doin that gallery portfolio still
pretty wet behind the ears still..havent really gotten on here for help
Alexandro Pequeno
@Argestis
Dec 21 2017 18:49
hi guys anyone available?
Markus Kiili
@Masd925
Dec 21 2017 18:49
@Argestis Post your question here. Usually someone answers.
Zerka1982
@Zerka1982
Dec 21 2017 18:51
@Masd925 could you please check this example. I want just a hint about 2 tables I created. The problem is related to the height of 2 tables. they don't remain the same when I resize the page https://codepen.io/Zerka1982/pen/qpNVPa
Darren
@DarrenfJ
Dec 21 2017 19:06
@Zerka1982 sure I'll take a quick look
@Zerka1982 you talking 'bout the 1st prize 2nd prize tables?
Zerka1982
@Zerka1982
Dec 21 2017 19:07
yes
Darren
@DarrenfJ
Dec 21 2017 19:08
@Zerka1982 wanted to view it fullview and got this message: "The owner of this Pen needs to verify their email address to enable Full Page View."
but in anycase. seem to size ok for me
Zerka1982
@Zerka1982
Dec 21 2017 19:09
is it really good ?
Darren
@DarrenfJ
Dec 21 2017 19:09
image.png
that's right before it moves on down on top of the other
Zerka1982
@Zerka1982
Dec 21 2017 19:10
The question is Am I able to make the size not change while resizing the page ???!!!
Darren
@DarrenfJ
Dec 21 2017 19:11
oooh! I thought you meant they don't stay the same with reach other...
hmmmm
Zerka1982
@Zerka1982
Dec 21 2017 19:11
just resize and see the height of each one ...
VaseJS
@VaseJS
Dec 21 2017 19:11
@Zerka1982 yes, that can be done. just fix the size.
css can do just about anything
Zerka1982
@Zerka1982
Dec 21 2017 19:12
Could you please make the changes ???
because I spent more than 3 hours building this part
:(((
I am not sure which part of the css is wrong !!!!
Darren
@DarrenfJ
Dec 21 2017 19:13
@Zerka1982 I'd say you have both boxes as classes on a div for each.. if you do a div 'around' both and then make each a specific pixel size inside that outter box they won't change
Zerka1982
@Zerka1982
Dec 21 2017 19:14
@DarrenfJ could you please specify exactly which class name I must deal with ????
Darren
@DarrenfJ
Dec 21 2017 19:14
@Zerka1982 you might have to think about how they change when you hit a very small screen resolution... using medi queries or something
@Zerka1982 you'de need a div around the 2 boxes together
Zerka1982
@Zerka1982
Dec 21 2017 19:15
I do have one called "box"
Darren
@DarrenfJ
Dec 21 2017 19:15
wait you do have one called box
ah a minute too late lol
Zerka1982
@Zerka1982
Dec 21 2017 19:15
line 18
Darren
@DarrenfJ
Dec 21 2017 19:16
@Zerka1982 for this, don't do a width as a % but as a px size:
.box1, .box2 {
  width: 44%;
  min-height: 200px;
  border: 2px solid #fff;
  display: inline-block;
  margin: 1%;
  position: relative;
}
it's staying 44% of the size of the div.box and when it shrinks, they shrink...
Zerka1982
@Zerka1982
Dec 21 2017 19:17
it is an extra css. I am not using in my html at all
Darren
@DarrenfJ
Dec 21 2017 19:18
but note if you set it to something like 100px when your page shrinks you want to do a media query or something to accommodate that

not sure I follow here?

it is an extra css. I am not using in my html at all

Zerka1982
@Zerka1982
Dec 21 2017 19:18
.box1, .box2 {
width: 44%;
min-height: 200px;
border: 2px solid #fff;
display: inline-block;
margin: 1%;
position: relative;
}
these 2 classes are not used in my HTML.
I am using 2 tables
Darren
@DarrenfJ
Dec 21 2017 19:19
you sure?
<div class="box1">
            <p>1<sup>st</sup> Prize</p>
            <hr>
           <!--  <div class="camera">
              <i class="fa fa-camera" aria-hidden="true"></i>
            </div>

              <p class="title-two"><strong>Trilens</strong> Lens holder</p>

            <p>www.friidesigns.com</p> -->
          </div>

          <div class="box2">
            <p>2<sup>nd</sup> Prize</p>
            <hr>
          </div>
this is what i got from your CodePen
Darren
@DarrenfJ
Dec 21 2017 19:20
seem to be there
Zerka1982
@Zerka1982
Dec 21 2017 19:21
There is div called Box and inside of it, there 2 tables.
Darren
@DarrenfJ
Dec 21 2017 19:21
ok.. got the new pen.. must have had an older one
Zerka1982
@Zerka1982
Dec 21 2017 19:21
@DarrenfJ sorry dude
Darren
@DarrenfJ
Dec 21 2017 19:24
yah, I don't see anything that mentions the width.. just defines a 'part1' height. so it's gonna size with the change in it's container.. as far as I can tell
@Zerka1982 oh ait found it.. you got a 5 width here again:
.part1 , .part2 {
  width: 46%;
  height: auto;
  min-height: 100vh;
}
Zerka1982
@Zerka1982
Dec 21 2017 19:25
so ?
What should I do with that ?
Darren
@DarrenfJ
Dec 21 2017 19:27
sorry no part1 and 2 are for the other content.. still only see the style you did inline for the table.. and no reference to width.. lemm paste it here so i can see it better ...
ah man CodePen can be so annoying to find code.. such a tiny bit of real estate.... ok found it.. has %'s
table {
    border-collapse: collapse;
    min-height: 200px;
    max-width: 40%;
    float: left;
    margin: 5%
}

th, td {
    width: 38%;
    border: 2px solid white;
    padding: 0;
    margin: 0
}
@Zerka1982 % widths will always try to stay that % of the parent container. so as it changes, they change
Zerka1982
@Zerka1982
Dec 21 2017 19:29
Yes ????
What do you suggest for these 2 HTML elements ( table, th, td ) ?
Darren
@DarrenfJ
Dec 21 2017 19:31
let me fork it and play around a bit
Zerka1982
@Zerka1982
Dec 21 2017 19:31
@DarrenfJ please do so
VaseJS
@VaseJS
Dec 21 2017 19:31
are the tables for layout or actual tables
Zerka1982
@Zerka1982
Dec 21 2017 19:32
Tables should remain in the center
both inline even if we switch to small devices
Darren
@DarrenfJ
Dec 21 2017 19:32
@Zerka1982 played around with the max-width you had.. made it a min-width and a fixed pixels:
table {
    border-collapse: collapse;
    min-height: 200px;
    min-width: 100px;
    float: left;
    margin: 5%
}
and it doesn't change.. but you have to consider what it does when yer screen is super tiny... and maybe do a media-query for that?
Zerka1982
@Zerka1982
Dec 21 2017 19:33
yes
Darren
@DarrenfJ
Dec 21 2017 19:33
yah as @VaseJS said I'd not use the tables if I'm using it for layout...
Zerka1982
@Zerka1982
Dec 21 2017 19:34
Sure dude, you try something different
If I don't have to use tables, that's fine. What other possibilities I do have ?
VaseJS
@VaseJS
Dec 21 2017 19:35
@Zerka1982 big no no. that has been tried so its not different. you're moving backwards. when css was young devs had to do that to hack it and make it work. that is no longer needed and causes a lot of issues
Zerka1982
@Zerka1982
Dec 21 2017 19:36
@VaseJS are we talking about tables here ?
VaseJS
@VaseJS
Dec 21 2017 19:36
yea
if the tables are used for layout purposes, vs the showing of tabular data
Darren
@DarrenfJ
Dec 21 2017 19:36
yah, I'd go back to what you were trying with the div with class 'box' and CSS style it the way you want.. but don't use width: 45% like you were using
Zerka1982
@Zerka1982
Dec 21 2017 19:37
@VaseJS The data is inside HTML , not from a database.... does it matter ?
Darren
@DarrenfJ
Dec 21 2017 19:37
give it a px width then responsively design it for when the screen get's super small
Zerka1982
@Zerka1982
Dec 21 2017 19:37
@DarrenfJ What should I use instead of width: 45% ?
VaseJS
@VaseJS
Dec 21 2017 19:37
@Zerka1982 no, as long as its tabular data you're fine
data ment to be view in table form
then its not for layout
Zerka1982
@Zerka1982
Dec 21 2017 19:38
@VaseJS I see
Darren
@DarrenfJ
Dec 21 2017 19:39
@Zerka1982 while this is about BootStrap 3.X.X it has some great info on media queries and screen sizes... https://stackoverflow.com/questions/22262311/container-fluid-vs-container
VaseJS
@VaseJS
Dec 21 2017 19:39
now that I have it open, you are using it for layout.
Darren
@DarrenfJ
Dec 21 2017 19:39

@Zerka1982

What should I use instead of width: 45% ?

VaseJS
@VaseJS
Dec 21 2017 19:39
we need to create some divs and fix their widths and heights. this will save you headache
Zerka1982
@Zerka1982
Dec 21 2017 19:39
@DarrenfJ thank u !
CamperBot
@camperbot
Dec 21 2017 19:39
zerka1982 sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
Darren
@DarrenfJ
Dec 21 2017 19:39

this:

give it a px width then responsively design it for when the screen get's super small

CamperBot
@camperbot
Dec 21 2017 19:39
:star2: 2322 | @darrenfj |http://www.freecodecamp.org/darrenfj
Darren
@DarrenfJ
Dec 21 2017 19:40
also thanks @VaseJS who is actually a way better CSS master than me... :D
CamperBot
@camperbot
Dec 21 2017 19:40
darrenfj sends brownie points to @vasejs :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @vasejs |http://www.freecodecamp.org/vasejs
Zerka1982
@Zerka1982
Dec 21 2017 19:40
We should create Divs ???
VaseJS
@VaseJS
Dec 21 2017 19:40
yes, brownie points!
Zerka1982
@Zerka1982
Dec 21 2017 19:40
it is a challenge
VaseJS
@VaseJS
Dec 21 2017 19:40
yes, divs with inner divs
Zerka1982
@Zerka1982
Dec 21 2017 19:40
I never built tables using Divs ...
Thank you guys for ur help. I appreciate it!
@VaseJS Thank you!
CamperBot
@camperbot
Dec 21 2017 19:42
:cookie: 375 | @vasejs |http://www.freecodecamp.org/vasejs
zerka1982 sends brownie points to @vasejs :sparkles: :thumbsup: :sparkles:
Darren
@DarrenfJ
Dec 21 2017 19:43
@Zerka1982 it looks like you started to build divs inside of divs.. you have .box and within it two divs .box1 and .box2 in the original pen you linked way way above
VaseJS
@VaseJS
Dec 21 2017 19:44
@Zerka1982 I'm trying to find a way to tell you the best way to do it, but FCC doesn't teach proper css. the techniques are dated
first we need to create your css components: o-pricing-table for the pricing table object (o).
then the components (c): c-pricing-tablebody, c-pricing-tableheader, c-pricing-table__footer
all classes, as IDs are kind of a css anti-pattern
and i'm using BEM notation
Darren
@DarrenfJ
Dec 21 2017 19:46
still hafta go over the BEM material.. on my list of thangs to do...
VaseJS
@VaseJS
Dec 21 2017 19:46
with hungarian notation added (the o-... and c-..., prefixes )
Darren
@DarrenfJ
Dec 21 2017 19:47
i hafta run off and work but yer in good hands @Zerka1982 with Vase.. he knows his stuff :D
VaseJS
@VaseJS
Dec 21 2017 19:47
@DarrenfJ work...holds us back! :D
Zerka1982
@Zerka1982
Dec 21 2017 19:47
Tank you guys
Darren
@DarrenfJ
Dec 21 2017 19:48
@VaseJS no kidding ;)
VaseJS
@VaseJS
Dec 21 2017 19:49
@Zerka1982 maybe i need to create a class on FCC
Zerka1982
@Zerka1982
Dec 21 2017 19:49
@VaseJS please do :)
VaseJS
@VaseJS
Dec 21 2017 19:49
I don't want to lose you with what i'm talking about. i can't do css any other way
so trying to show an antiquated way of using css is not easy.
Zerka1982
@Zerka1982
Dec 21 2017 19:50
That's a good point
VaseJS
@VaseJS
Dec 21 2017 19:50
but if you take what i've given you thus far...no, thats not true...ugh
we'll have to just create some divs and fix it. the current way people code css isn't wrong more than not scalable
Zerka1982
@Zerka1982
Dec 21 2017 19:51
True
and I am one of them :(
VaseJS
@VaseJS
Dec 21 2017 19:53
i got to run. be back in about 40 mins
hack away until then
Zerka1982
@Zerka1982
Dec 21 2017 19:53
Take care dude. Catch u later ;)
Jake
@JakeG6
Dec 21 2017 21:47

Here's an interesting problem. My React App has an issue.

I have a button which invokes getRandomQuote(). gets a line of text from an api and delivers it to the front end. I'd like the text opacity to be 0, then turn to 1 after the text has appeared. instead, the text app ears, then turns to 0 opacity, then appears.

getRandomQuote() {

    document.getElementById('quoteText').style.opacity = 0;

     axios.get('http://localhost:3100/quote').then(response => {

        console.log('1111111', response);

        this.setState( {quote: response.data[0].quote_text, quoteAuthor: response.data[0].author} );
        document.get
    document.getElementById('quoteText').style.opacity = 1;

      })
  }
.quoteText {
  transition: 1s ease-in-out;

}
Zerka1982
@Zerka1982
Dec 21 2017 22:08
guys
anybody here ???
Jacob Pieczynski
@JacobPie
Dec 21 2017 22:15
Hey
VaseJS
@VaseJS
Dec 21 2017 22:40
@Zerka1982 any luck
Zerka1982
@Zerka1982
Dec 21 2017 22:41
@VaseJS I did it ;)
I ave just 1 question please
VaseJS
@VaseJS
Dec 21 2017 22:41
no need for please, just ask away
Zerka1982
@Zerka1982
Dec 21 2017 22:41
about the size of the text. When resize the page, the text is getting smaller smoothly ...is it good or bad ?
VaseJS
@VaseJS
Dec 21 2017 22:43
is that what you want?
Zerka1982
@Zerka1982
Dec 21 2017 22:43
for the first part we spoke about earlier
I think i did it ;)
VaseJS
@VaseJS
Dec 21 2017 22:43
that's a design question. if its your intent, AND looks good or provides a good user experience, then its good.
Zerka1982
@Zerka1982
Dec 21 2017 22:43
you told me to use Divs instead of table
VaseJS
@VaseJS
Dec 21 2017 22:44
Yes, is it in the same codepen?
Zerka1982
@Zerka1982
Dec 21 2017 22:44
yes it is
no sorry , in my local project
now I am working on something else
VaseJS
@VaseJS
Dec 21 2017 22:44
it has changed on my end somewhat
it looked fine to me (but incomplete)
Zerka1982
@Zerka1982
Dec 21 2017 22:45
yes true
VaseJS
@VaseJS
Dec 21 2017 22:46
thats the website project right? the personal page?
Zerka1982
@Zerka1982
Dec 21 2017 22:46
@VaseJS one sec i ll update the code pen so you can see the latest version
VaseJS
@VaseJS
Dec 21 2017 23:09
that's much better
Richard
@rylew0925
Dec 21 2017 23:36
What do the in and prototype functions do?
SakisBal
@SakisBal
Dec 21 2017 23:47

so im in this frontend tutoriual where we need to get the weather forecast and it says that its an extra if we change the background immage depending on the weather,

so i found the data in the json file but i dont know what the keywords are for every weather type

like in my position ins cloudy and it says cloudy but what are the keyowords for every other weather?