These are chat archives for FreeCodeCamp/HelpFrontEnd

22nd
Apr 2018
Kingsley
@Kingwindie
Apr 22 2018 01:20
var table = document.createElement("table");
table.style.backgroundColor = "darkblue";
var columns = 6;

for (var i = 0; i < columns; i++) {
    /**table header */
    var tableHeader = document.createElement("th");
    tableHeader.style.width = "250px";
    tableHeader.style.height = "35px";
    tableHeader.style.lineHeight = "35px";
    tableHeader.style.borderStyle = "solid";
    tableHeader.style.borderColor = "black";
    tableHeader.style.backgroundColor = "red";
    tableHeader.style.borderWidth = "2px";
    tableHeader.style.color = "white ";
    tableHeader.style.textAlign = "center";
    tableHeader.textContent = "table header";
    table.appendChild(tableHeader);

}

for (i = 0; i < columns; i++) {

    /**table body */
    var tableBody = document.createElement("tbody");
    tableBody.style.width = "250px";
    tableBody.style.height = "350px";
    tableBody.style.lineHeight = "35px";
    tableBody.style.borderStyle = "solid";
    tableBody.style.backgroundColor = "gray";
    tableBody.style.borderWidth = "2px";
    tableBody.style.color = "white ";
    tableBody.style.textAlign = "center";
    tableBody.textContent = "images go here";
    table.appendChild(tableBody);
}

document.body.append(table);
can someone help me fix this table, i want the table body to go across the screen just like the table header
what am i doing wrong?
Vered Rekanati
@veredrec
Apr 22 2018 01:26
@Kingwindie wouldn't it be easier to give it a class and then define all the style in the class? Just an idea... I think it would make things clearer
Kingsley
@Kingwindie
Apr 22 2018 01:27
@veredrec yeah that would be easier,but it's a school project,i have to do it with javascript
Vered Rekanati
@veredrec
Apr 22 2018 01:28
Oh, got you! So never mind :)
Kingsley
@Kingwindie
Apr 22 2018 01:28
yeah,left for me,i would do this with css grid,it's much better
Mois├ęs Man
@moigithub
Apr 22 2018 01:29
probably u want like header
only 1 tbody 1 row.. and multple cells
https://www.w3schools.com/tags/tag_tbody.asp
zootechdrum
@zootechdrum
Apr 22 2018 01:49
hey guys trying to get json data what am i missing
this is for the weather app
Kingsley
@Kingwindie
Apr 22 2018 01:53
i found a fix for it
ehutchllew
@ehutchllew
Apr 22 2018 02:20
@zootechdrum still need help?
creator0323
@Amasian
Apr 22 2018 02:54

Could somebody check my code? I am working on Wiki viewer project and I got some problems. Once user type something in the search bar, the API supposed to bring the information but I think there is a problem related to CORS. what am I doing wrong? Thank you for you time and attention.

https://codepen.io/Amasian/pen/geNJWw?editors=0010

roxxlen
@roxxlen
Apr 22 2018 03:07
what kind of tool for firefox can make it looks formatted ? link:https://wind-bow.glitch.me/twitch-api/streams/KittyPlays?callback=?
they call it beautifier
when we want to make it hard to read, they call uglifier
roxxlen
@roxxlen
Apr 22 2018 03:32
haha, that's hilarious
chompoo500ml
@chompoo500ml
Apr 22 2018 03:32
dont know who invent that words, lol
roxxlen
@roxxlen
Apr 22 2018 03:34
@chompoo500ml thanks a lot
CamperBot
@camperbot
Apr 22 2018 03:34
roxxlen sends brownie points to @chompoo500ml :sparkles: :thumbsup: :sparkles:
:cookie: 70 | @chompoo500ml |http://www.freecodecamp.org/chompoo500ml
chompoo500ml
@chompoo500ml
Apr 22 2018 03:34
yvw
chompoo500ml
@chompoo500ml
Apr 22 2018 03:44
@Amasian first, i have to say that i am not familiar with wiki api, but after i run your pen, the CORS error you saw in browser is not from your code, it is from codepen.io
that mean your code not yet relate to that error at the time
secondly, i think you need to change onkeypress event in your html to onkeyup
because onkeypress might not send key number in event with some browser as mine is firefox
when i tested your pen the api never called; cuz 13 key never fired
chompoo500ml
@chompoo500ml
Apr 22 2018 03:49
calling wiki api might be tricky cuz i am not familiar with; and i think many people in FCC who passed that quest can share how they work with you further; then you might need to wait ;p
Thomas Tylek
@zippkidd
Apr 22 2018 04:11
@Amasian I think you need to request JSONP, not JSON, otherwise You end up with that CORS error
@Amasian , take a look at mine on codepen: https://codepen.io/zippkidd/pen/EQRrmQ
It's a little rough around the edges, but the API requests work
coderNewby
@coderNewby
Apr 22 2018 04:39
@darrenfj thanks for replying to my PM
CamperBot
@camperbot
Apr 22 2018 04:39
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2470 | @darrenfj |http://www.freecodecamp.org/darrenfj
tundeiness
@tundeiness
Apr 22 2018 05:45

i need help her please...

pre.innerHTML += "<div class='row listing'><div class='col-sm-3 logo'><img class = 'img-responsive src=' " + data.logo +  " '></div>" + "<div class='row text'>
            <div class='col-sm-12 name'><p><a href=" ' + data.url + ' " target = "_blank">  + data.display_name + "</a></p></div><div class='row status'>
            <div class='col-sm-12 worx'><p class='neon'>ON-AIR</p></div>
         </div>
         </div></div>"

i want to turn these html element into strings

Jefferson
@jeffersonnnn
Apr 22 2018 07:36
hi guys, i need help rendering a fresh call to an API housed in another component onClick. Can i get help, please?
Jefferson
@jeffersonnnn
Apr 22 2018 08:30
okay okay, what about a guide on how to change state to trigger an api call in reactjs? Help? Anybody?
Michael Grienauer
@mgrienauer
Apr 22 2018 09:24
https://mgrienauer.github.io/twitch_streamers/ what do you guys think of my twitch streamers project? any feedback is welcome...i know in chrome the search button isnt color filling properly but cant figure out why
chompoo500ml
@chompoo500ml
Apr 22 2018 09:48
@mgrienauer very interesting project
Aditya
@ezioda004
Apr 22 2018 09:53
@mgrienauer To fix the search button, you can remove height: 100% from .btn and add
.btn {
   align-self: stretch;
}
Michael Grienauer
@mgrienauer
Apr 22 2018 09:58
@ezioda004 ok, that worked. Awesome haha ive been trying to figure that out for a while. thanks!
CamperBot
@camperbot
Apr 22 2018 09:58
mgrienauer sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 544 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Su yang
@gitchimera
Apr 22 2018 10:23
new world ~
mustimuu
@mustimuu
Apr 22 2018 10:53
Hello can someone help me out?
i want my menu to float to the right, but it doesent work
Ken Haduch
@khaduch
Apr 22 2018 11:44
@mgrienauer - your twitch streamer project is nice! I don't know why it wasn't obvious to me at first who was online or offline at first glance. After selecting them via the buttons then I saw it. It might be because most of the screen was occupied by offline (all the same color) users. One thing that would be a nice touch is if you could just add the functionality to have the "Enter" key trigger the search.
I just tried one random string in the search box and it found nothing and returned no indication, although in the devtools console there was a 404 error displayed. It would be good to handle that error and display a status in some way? All-in-all it's a nice implementation of that project!
mustimuu
@mustimuu
Apr 22 2018 13:44
Hello
Can someone help me with something in wordpress?
creator0323
@Amasian
Apr 22 2018 14:35
@chompoo500ml OMG thank you so much for your kind advice! it was so helpful! Now I will keep working on my project! thank you again!
CamperBot
@camperbot
Apr 22 2018 14:35
amasian sends brownie points to @chompoo500ml :sparkles: :thumbsup: :sparkles:
:cookie: 71 | @chompoo500ml |http://www.freecodecamp.org/chompoo500ml
creator0323
@Amasian
Apr 22 2018 14:37
@zippkidd yeah when I examine some CORS articles, I studied that concept too! but I did not consider it because they said it is not a complete tool. but I think I need to be more flexible occasionally lol thank you for your advice and reply!
CamperBot
@camperbot
Apr 22 2018 14:37
amasian sends brownie points to @zippkidd :sparkles: :thumbsup: :sparkles:
api offline
chompoo500ml
@chompoo500ml
Apr 22 2018 14:41
@Amasian yvw!
Michael Grienauer
@mgrienauer
Apr 22 2018 15:16
@khaduch thanks ken. yea i tried working in a sort algorithm to show the online players first but it was getting messy so i decided it was necessary lol. ill try to add something to handle those errors and maybe highlight the search box as red if the player isnt found
CamperBot
@camperbot
Apr 22 2018 15:16
mgrienauer sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3895 | @khaduch |http://www.freecodecamp.org/khaduch
Thomas Tylek
@zippkidd
Apr 22 2018 15:26
@mgrienauer , very nice project. You've inspired me for my own twitch streamer app
Michael Grienauer
@mgrienauer
Apr 22 2018 15:32
@zippkidd thats awesome, thanks for the praise! good luck on your project!
CamperBot
@camperbot
Apr 22 2018 15:32
mgrienauer sends brownie points to @zippkidd :sparkles: :thumbsup: :sparkles:
api offline
Marc
@MWBauer
Apr 22 2018 15:38
Hey guys/gals. Can I get a clue as to how to call something onto my page?
hr.style-seven { overflow: visible; /* For IE */ height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px; } hr.style-seven:before { /* Not really supposed to work, but does */ display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; border-width: 0 0 1px 0; border-radius: 20px; }
hr.style-seven { overflow: visible; /* For IE */ 
height: 30px; 
border-style: solid; 
border-color: black; 
border-width: 1px 0 0 0;
 border-radius: 20px; } 
hr.style-seven:before { /* Not really supposed to work, but does */ 
display: block; 
content: "";
 height: 30px; 
margin-top: -31px; 
border-style: solid;
 border-color: black;
 border-width: 0 0 1px 0;
 border-radius: 20px; }
I mostly understand what's being done here, but how do call that to be my <hr/> ?
Jefferson
@jeffersonnnn
Apr 22 2018 15:50
can i get perf optimisation tips for my react sample app?
Marc
@MWBauer
Apr 22 2018 15:50
Aint no one here
Marc
@MWBauer
Apr 22 2018 15:56
gonna go play with VirtualBox
br3ntor
@br3ntor
Apr 22 2018 17:46
is it just me or did the main fcc chat room disapear?
niniyzni
@niniyzni
Apr 22 2018 17:57

Hi,

  • I am new to js.
  • I am trying to iterate json structure.
  • when I see isDefault: true, I need to show as a default name.
  • I tried but right now I am getting an error .
  • can you tell me how to fix it.
  • providing my relevant code below.
  • code is very big so I am pasting in gist
    https://gist.github.com/niniyzni/5c19f385b35f9418086125799803efe7

TypeError: sportsRecord.find is not a function
at birdLionUpdate.setTigers (bird-Lion-update.ts:981)
at SafeSubscriber.eval [as _next] (bird-Lion-update.ts:367)

setTigers(sportsRecord: any) {

    let that = this;
    let tempObj = {};
    //tempObj['TigerNo'] = 237;
    //tempObj['Lion'] = getDefault(playermoons).Lion

   // tempObj['TigerNo'] = this.getDefault(sportsRecord).TigerNo;
    let defauktTigerNOsportsRecord =  sportsRecord.find((elem) => { return elem.isDefault; });




    tempObj['TigerNo'] = sportsRecord.playerTigers[0].TigerNo;
    tempObj['TigerName'] = 'Nail Sports Bay Area';
    // tempObj['TigerNo'] = sportsRecord.selectedTigerNo;
    // tempObj['TigerName'] = sportsRecord.selectedTigerName;
    this.TigerTempArray = [];
    this.TigerTempArray.push(tempObj);
    let TigerssportsRecord = sportsRecord.playerTigers;
    let TigerssportsRecordList = this.TigerTempArray;
    let selectedTiger = TigerssportsRecord.find(elem => elem.TigerNo == 237);
    this.playerLionUpdateVal.TigerNo = 237;
    // let selectedTiger = TigerssportsRecord.find(elem => elem.TigerNo == sportsRecord.selectedTigerNo);
    // this.LionCreateVal.TigerNo = sportsRecord.selectedTigerNo;
    this.selectedTigerArr = selectedTiger;
    this.TigerCarousel.setTigersportsRecord(TigerssportsRecord, TigerssportsRecordList, 237);
    //this.TigerCarousel.setTigersportsRecord(TigerssportsRecord, TigerssportsRecordList, sportsRecord.selectedTigerNo);
    $("#TigerCarouselLabel .TigerHint").css("display", "none");
    setTimeout(function () {
        $("#unSelectedTigersLogoBox1 .currentNwLogo").bind("click", function (e) {
            e.stopPropagation();
            that.singleSelection(sportsRecord, e);
        });
    }, 100);
}T
DerMann97
@DerMann97
Apr 22 2018 18:15
Hello guys !
DerMann97
@DerMann97
Apr 22 2018 18:25
is there a software engineer here ?
Ken Haduch
@khaduch
Apr 22 2018 19:02
@br3ntor - hello, I just saw your note. They did disband the main freeCodeCamp chatroom. I don't know if I've seen a reason, maybe it was just not too productive in terms of discussion of programming problems? It did seem to be a popular room, but oftentimes it did seem to be fast and free-flowing conversations about a wide variety of topics, not strictly related to the freeCodeCamp lessons, challenges or projects.
@DerMann97 - there aren't too many people around at the moment, it seems. You can post your question and details, someone (maybe I could help?) will come along and follow up.
Brad
@bradtaniguchi
Apr 22 2018 19:08
@DerMann97 does it need to be a software engineer haha?
DerMann97
@DerMann97
Apr 22 2018 19:22
Hello @bradtaniguchi
Yea no need to be a software engineer i guess :p
I need to answer to many questions and i m not sure about 2 of them
1) what s the difference between modeling and programming
2) Why does change happen in software development? Provide examples from your
own experience and discuss them in the 3 areas of requirements changes,
technology changes and organization change.
Brad
@bradtaniguchi
Apr 22 2018 21:06
@DerMann97 Hey sorry for being slow ( was eating), I have the title of "Software Engineer" but idk if my answers would be 100% correct. These seem like Homework-type questions, where the "right" answer is probably somewhere in the coursework, but I'll try my best.
  1. Modeling is generally the step performed before programming anything. I usually say there's a few steps to programing something. Usually the first step is to understand what the use-case/problem is, and the next step is to boil it down to what actually matters. Where you boil it down can be considered were you model your problem down to its bare parts.
  2. Change happens for a number of reasons (I really would look into your coursework if this is a HW problem, there has to be better examples in there).
  3. A requirement change is pretty simple, say your software supports only English users, but your company off-shored the division to China (just as an example) and now the software needs to also be available in Mandarin.
  4. A technology change usually is related to the environment, or dependencies. Say you application doesn't work on the newest release of Chrome, as you used a depreciated API in an earlier release.
  5. An organizational change is usually a lot more specific to the company, taking a previous example where the division was off-shored, this also means dealing with new people, management, and possibly company structure. What if all the "users" allowed in the app now are split between two different "user-directories"? (Just 2 different lists of users) how would your application load a list of user's available within the system from 2 different lists?
    Hopefully that helps and isn't totally off the mark. I really do recommend researching more if this is a HW problem, since my answers can be totally off-base from what would be considered "correct". Goodluck :D
GRIMROOT
@grimroot23
Apr 22 2018 22:45
im having issues with my webpage, all my html files have the correct height, but my portfolio page is glitchy.. help please https://codepen.io/GRIMROOT/project/editor/DNKmKk
pal-crystal
@pal-crystal
Apr 22 2018 22:48
@grimroot23 what means glithy ?
GRIMROOT
@grimroot23
Apr 22 2018 22:49
the portfolio document when displaying fullscreen has my footer in the middle of the page
lol i meant glitchy
pal-crystal
@pal-crystal
Apr 22 2018 22:49
@grimroot23 ah its because of the size of the main content
GRIMROOT
@grimroot23
Apr 22 2018 22:50
but every other document is fine..
pal-crystal
@pal-crystal
Apr 22 2018 22:50
@grimroot23 yeah because they got more content then the main content is bigger
GRIMROOT
@grimroot23
Apr 22 2018 22:51
how do i get its to stick to the bottom with bootstrap?
pal-crystal
@pal-crystal
Apr 22 2018 22:51
@grimroot23 height adjusts with size of content
@grimroot23 apllying css to the footer
GRIMROOT
@grimroot23
Apr 22 2018 22:51
ikr i put html{height: 100%}
pal-crystal
@pal-crystal
Apr 22 2018 22:51
@grimroot23 something like footer { bottom: 0px; }
GRIMROOT
@grimroot23
Apr 22 2018 22:52
ok one sec
<div style="position: bottom"class="navbar navbar-default navbar-fixed-bottom"> didnt work
pal-crystal
@pal-crystal
Apr 22 2018 22:53
@grimroot23 ok one minute i look your code
GRIMROOT
@grimroot23
Apr 22 2018 22:53
im using divs instead of <footer>
Eric Weiss
@eweiss17
Apr 22 2018 22:55
code pen project .... haven't seen one of those
GRIMROOT
@grimroot23
Apr 22 2018 22:55
i love codepen
best editor besides dreamweaver if you ask me
Eric Weiss
@eweiss17
Apr 22 2018 22:57
talking specifically about the project manager section. usually just see pens
GRIMROOT
@grimroot23
Apr 22 2018 22:58
yeah i figured you can use projects to integrate multiple files. i just found out this weekend.
Eric Weiss
@eweiss17
Apr 22 2018 23:00
looks nice
GRIMROOT
@grimroot23
Apr 22 2018 23:01
its freeeee
pal-crystal
@pal-crystal
Apr 22 2018 23:03
@grimroot23 <div style="position: bottom"class="navbar navbar-default fixed-bottom">
@grimroot23 it's juste "fixed-bottom" class u have to use
GRIMROOT
@grimroot23
Apr 22 2018 23:03
i did that, no luck
Eric Weiss
@eweiss17
Apr 22 2018 23:04
i'v had stuff like that happen to me before
pal-crystal
@pal-crystal
Apr 22 2018 23:04
@grimroot23 no u did navbar-fixed-bottom
GRIMROOT
@grimroot23
Apr 22 2018 23:05
ohhhh im blind lol let me try thanks
pal-crystal
@pal-crystal
Apr 22 2018 23:05
@grimroot23 np ;)
GRIMROOT
@grimroot23
Apr 22 2018 23:06
@pal-crystal it worked XD
pal-crystal
@pal-crystal
Apr 22 2018 23:08
@grimroot23 =)
Eric Weiss
@eweiss17
Apr 22 2018 23:09
nice let me know if u need any more help, pretty rusty and helping people gets me back into it
GRIMROOT
@grimroot23
Apr 22 2018 23:11
actually i need a different solution, i just want on the bottom of the page not fixed positioning
Eric Weiss
@eweiss17
Apr 22 2018 23:13
html, body {
padding: 0;
margin: 0;
}
would remove any unwanted spacing
pal-crystal
@pal-crystal
Apr 22 2018 23:15
@grimroot23 u need to qdd on id to your footer, positionning it with absolute, and apply bottom : 0 property
GRIMROOT
@grimroot23
Apr 22 2018 23:15
html, body {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
font-family: Orbitron;
}
i need padding
pal-crystal
@pal-crystal
Apr 22 2018 23:16
to add an id*
GRIMROOT
@grimroot23
Apr 22 2018 23:16
to where
Eric Weiss
@eweiss17
Apr 22 2018 23:16
absolute positioning is risky as it takes it off the normal flow of the page
GRIMROOT
@grimroot23
Apr 22 2018 23:17
true
Eric Weiss
@eweiss17
Apr 22 2018 23:17
what do you need to do? I looked and it looks fine atm
pal-crystal
@pal-crystal
Apr 22 2018 23:18
@eweiss17 yeah but its ok for the footer, he just need to add a bottom padding to the rest of the page
Eric Weiss
@eweiss17
Apr 22 2018 23:18
i think i'v used that before
yeah just stick it to the bottom
just do absolute bottom 0
pal-crystal
@pal-crystal
Apr 22 2018 23:21
my mistake its a wrong idea
GRIMROOT
@grimroot23
Apr 22 2018 23:22
i did fixed-bottom and fixed top then just adjusted my h1 padding, and it seems to be fine
Eric Weiss
@eweiss17
Apr 22 2018 23:22
oh god
the color scheme hurts lol sorry
first and second are the same thing!
GRIMROOT
@grimroot23
Apr 22 2018 23:23
oh yes tom foolery right there lol this is not actually for a job hahahaha
Eric Weiss
@eweiss17
Apr 22 2018 23:24
I like your how page
but it goes html, css, JAVA
javascript?
GRIMROOT
@grimroot23
Apr 22 2018 23:25
yes my i dont start java till fall, i want to really engrain html /css first
Eric Weiss
@eweiss17
Apr 22 2018 23:25
not learning js?
GRIMROOT
@grimroot23
Apr 22 2018 23:27
not yet its weird but that the pathway for my degree
@grimroot23 this is your solution
Eric Weiss
@eweiss17
Apr 22 2018 23:28
online degree?
GRIMROOT
@grimroot23
Apr 22 2018 23:29
its at a community college but the pace is soooo slow, and the footer from that page does not extend the length of the page
Information Technology Web Administration and Design Special
thats the degree
Nikolai A Leeds
@nic9075
Apr 22 2018 23:30
hi
Eric Weiss
@eweiss17
Apr 22 2018 23:30
they justh ave the width 75% on the link
if u make it 100% it goes full way
java can be difficult to learn if you have no experience. but if you are already practicing you should be fine
Nikolai A Leeds
@nic9075
Apr 22 2018 23:32
I am studying python along with freecodecamp
GRIMROOT
@grimroot23
Apr 22 2018 23:33
weve been poking at python and i took some classes awhile ago but i think i understand the basics
Eric Weiss
@eweiss17
Apr 22 2018 23:33
python is a good starting language as it is very loose
the joke is that you can write pseudo code in python and it will still work
GRIMROOT
@grimroot23
Apr 22 2018 23:34
i mess up most with syntax
Eric Weiss
@eweiss17
Apr 22 2018 23:34
once u do it enough it
it's second nature
Rafal
@eggnaro
Apr 22 2018 23:37
hi. I have a quick question. does anyone using 'Atom'? And is it possible to connect Atom with browser like in Brackets to see how the html, css and js code looks like in real time?
GRIMROOT
@grimroot23
Apr 22 2018 23:37
yeah seriously this project, took me less than 2 days, im really used to html/css by now im sure java will be not as difficult this time thru
use codepen.io
Eric Weiss
@eweiss17
Apr 22 2018 23:38
just use brackets?
?
Rafal
@eggnaro
Apr 22 2018 23:39
@eweiss17 have some issues with brackets
Eric Weiss
@eweiss17
Apr 22 2018 23:39
alright go ahead and use atom, try that package
@grimroot23 i really wouldn't even compare html/css to java
too different
GRIMROOT
@grimroot23
Apr 22 2018 23:42
its all fixed now
pal-crystal
@pal-crystal
Apr 22 2018 23:43
@grimroot23 good job
GRIMROOT
@grimroot23
Apr 22 2018 23:44
thanks, im probably beef it up now make it "legit"
Eric Weiss
@eweiss17
Apr 22 2018 23:45
i always see parallax pics when people want to beef up
heres a good site for high res photos https://unsplash.com/
this is nice if u want to add colors https://webkul.github.io/coolhue/
GRIMROOT
@grimroot23
Apr 22 2018 23:48
i use uigradients
GRIMROOT
@grimroot23
Apr 22 2018 23:53
nice