These are chat archives for FreeCodeCamp/HelpFrontEnd

4th
Oct 2017
Long Nguyen
@longnt80
Oct 04 2017 01:02
/freecodecamp is a casual chat room, lots of stuffs unrelated to coding
Ken Haduch
@khaduch
Oct 04 2017 03:17
@kbaig :point_up: October 3, 2017 1:07 PM - I forgot to hit enter on my comment - your Game of LIfe looks great! I like the color scheme and layout of the controls is really nice. Good work!
linkin-park
@linkin-park
Oct 04 2017 05:07
its better to do alone than working with team
this is not the real world scenario , since if you dont work as a team you will be sacked.
@longnt80 took 2 branch for my repo
one is pure vanilla thing other is experiment-1 which is css grid thing
and i have another dev to help But that ssH! never comes to work.
Long Nguyen
@longnt80
Oct 04 2017 05:13

one is pure vanilla thing other is experiment-1 which is css grid thing

isn't css grid also vanilla css?

linkin-park
@linkin-park
Oct 04 2017 05:15
your right but this thing i have never done before @longnt80
need to clone this http://paperbot.ai/
Long Nguyen
@longnt80
Oct 04 2017 05:16
this site using bootstrap
linkin-park
@linkin-park
Oct 04 2017 05:16
i dont know bootstrap
ill add another experiment2 branch :/
how to know which font they are using @longnt80
Long Nguyen
@longnt80
Oct 04 2017 05:18
@linkin-park do you know the devtool
if you're using Chrome browser
linkin-park
@linkin-park
Oct 04 2017 05:18
ofcourse
Long Nguyen
@longnt80
Oct 04 2017 05:19
you can inspect the element and see which font they use
linkin-park
@linkin-park
Oct 04 2017 05:19
but it takes alot of time to find that is there any other tool to get it
Long Nguyen
@longnt80
Oct 04 2017 05:19
not a lot of time
Gersho
@Gersho
Oct 04 2017 05:19
you can search the css, there's a searchbox
Long Nguyen
@longnt80
Oct 04 2017 05:19
this is what I got: font-family: Merriweather Sans,sans-serif;
Gersho
@Gersho
Oct 04 2017 05:19
font-f (amily)
linkin-park
@linkin-park
Oct 04 2017 05:21
i got that too :P
hi @Gersho
Gersho
@Gersho
Oct 04 2017 05:22
hi @linkin-park :wave:
linkin-park
@linkin-park
Oct 04 2017 05:24
i joined recently to chingu with alot of disadvantage at the organization.
team mate never responds and never active.
f! them
Long Nguyen
@longnt80
Oct 04 2017 05:25
@linkin-park learn what you can and keep looking for another job
@linkin-park btw, if you don't know bootstrap, you can take a look at http://bulma.io
linkin-park
@linkin-park
Oct 04 2017 05:31
its an organization to work together and not for getting job . If that is what they require to get a job than i must be God :D
linkin-park @linkin-park googles bulma.io
longnt80 @longnt80 points at the link above
linkin-park
@linkin-park
Oct 04 2017 05:34
if i need to work on this need to create another branch!
which is out of question at our first sprint
Ghost
@ghost~56bd2077e610378809c105cd
Oct 04 2017 05:52
anybody working on podomoro timer?
Gersho
@Gersho
Oct 04 2017 05:53
not really but if you have a question go ahead
Ghost
@ghost~56bd2077e610378809c105cd
Oct 04 2017 05:54
i've been working through it mostly ok..ive been working all evening trying to be rid of my bugs...I just realized ive been using or instead of and...
Gersho
@Gersho
Oct 04 2017 05:54
haha, it happens ^^
Ghost
@ghost~56bd2077e610378809c105cd
Oct 04 2017 05:56
im checking..but I think I still have some bugs..
its working...mostly...I think..but when you restart it...its buggy going through the second cycle
Gersho
@Gersho
Oct 04 2017 05:57
you probably need to reset more things in your reset function
is your project on codepen ?
Ghost
@ghost~56bd2077e610378809c105cd
Oct 04 2017 05:57
at firstI thought its because the millisecs in my intervals werent clearing...and were ovrlapping or something...and then (just now) i realized I was using || instead of && for and
Gersho
@Gersho
Oct 04 2017 05:57
or something similar
Ghost
@ghost~56bd2077e610378809c105cd
Oct 04 2017 06:00
Gersho
@Gersho
Oct 04 2017 06:02
you should let the user set work time AND pause time before it starts
and show seconds too
Ghost
@ghost~56bd2077e610378809c105cd
Oct 04 2017 06:03
aye..
i'll show seconds
i had a start button set up for the break timer...but took it out because things werent working well..
I think I can safely put it back in now
Ghost
@ghost~56bd2077e610378809c105cd
Oct 04 2017 06:09
ok...ive implemented a start button for the break timer..lets see if it works
Henry
@GitHub-Henry
Oct 04 2017 06:25
@longnt80 bulma.io looks interesting, thanks for sharing
CamperBot
@camperbot
Oct 04 2017 06:25
github-henry sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 582 | @longnt80 |http://www.freecodecamp.com/longnt80
santhoshbalaguru001
@santhoshbalaguru001
Oct 04 2017 06:51
anyone knows Php?
linkin-park
@linkin-park
Oct 04 2017 06:56
this is frontend channel @santhoshbalaguru001 you wont get any specific questioned answer unless your lucky :)
join #HelpBackEnd
santhoshbalaguru001
@santhoshbalaguru001
Oct 04 2017 06:58
can you share the page of HELPBACK END
Fabien SHAN
@X140hu4
Oct 04 2017 07:01
Rafael Monroy
@rafaelmonroy
Oct 04 2017 07:18
hey guys, how would I have to slice my array to return an array split at each 27 number and remove the 27
$(function(){
    var text = "THIS IS A TEST"
    var map = { A:1, B:2, C:3, D:4, E:5, F:6, G:7, H:8, I:9, J:10, K:11, L:12, M:13, N:14, O:15, P:16, Q:17, R:18, S:19, T:20, U:21, V:22, W:23, X:24, Y:25, Z:26, ' ': 27};
    var holder = [];
    var letter = Object.keys(map)

    for (i=0;i<text.length;i++){
        for (j=0;j<letter.length;j++){
            if (text[i] === letter[j]){
                holder.push(map[letter[j]])
            }
        }
    }

    console.log(holder);
right now it returns [20, 8, 9, 19, 27, 9, 19, 27, 1, 27, 20, 5, 19, 20, i would like [20, 8, 9, 19], [ 9, 19], [1], [ 20, 5, 19, 20]
Fabien SHAN
@X140hu4
Oct 04 2017 07:31
Create an array with each word in your text.
Rafael Monroy
@rafaelmonroy
Oct 04 2017 07:33
@X140hu4 so split the array first
str*
text
Fabien SHAN
@X140hu4
Oct 04 2017 07:34
yes
Rafael Monroy
@rafaelmonroy
Oct 04 2017 08:07
@X140hu4 came with this crazy code lol but i still get one array with all numbers
function decode(str){

  var map = { A:1, B:2, C:3, D:4, E:5, F:6, G:7, H:8, I:9, J:10, K:11, L:12, M:13, N:14, O:15, P:16, Q:17, R:18, S:19, T:20, U:21, V:22, W:23, X:24, Y:25, Z:26};
  var holder = [];
  var holder2 = [];
  var letter = Object.keys(map);
  var words = str.split(' ');

  for (i=0;i<words.length;i++){
    holder.push([words[i]]);
  }

  for (j=0;j<holder.length;j++){
    for (k=0;k<holder[j].length;k++){
      for(l=0;l<holder[j][k].length;l++){
        for (m=0;m<letter.length;m++){
          if (holder[j][k][l] === letter[m]){
            holder2.push(map[letter[m]]);
          }
        }
      }
    }
  }

  return holder2;

}

decode("THIS IS A TEST”);
Fabien SHAN
@X140hu4
Oct 04 2017 08:15
You can use a temporary array to hold the values for each word
and iterate through each word with the code you had before
Rafael Monroy
@rafaelmonroy
Oct 04 2017 08:17
@X140hu4 i dont think I’m understanding lol
@X140hu4 this code
$(function(){
    var text = "THIS IS A TEST"
    var map = { A:1, B:2, C:3, D:4, E:5, F:6, G:7, H:8, I:9, J:10, K:11, L:12, M:13, N:14, O:15, P:16, Q:17, R:18, S:19, T:20, U:21, V:22, W:23, X:24, Y:25, Z:26, ' ': 27};
    var holder = [];
    var letter = Object.keys(map)

    for (i=0;i<text.length;i++){
        for (j=0;j<letter.length;j++){
            if (text[i] === letter[j]){
                holder.push(map[letter[j]])
            }
        }
    }

    console.log(holder);
@X140hu4 how can i set a temporary array to hold the values of each word?
Fabien SHAN
@X140hu4
Oct 04 2017 08:20
sending you pm
Zerka1982
@Zerka1982
Oct 04 2017 09:13
Good morning everyine
everyone
Could you please tell me, how can I access to mintemp_c ?
here is the json data
"forecast": {
"forecastday": [
{
"date": "2017-10-04",
"date_epoch": 1507075200,
"day": {
"maxtemp_c": 12.7,
"maxtemp_f": 54.9,
"mintemp_c": 9,
"mintemp_f": 48.2,
"avgtemp_c": 11.3,
"avgtemp_f": 52.4,
"maxwind_mph": 16.3,
"maxwind_kph": 26.3,
"totalprecip_mm": 4.9,
"totalprecip_in": 0.19,
"avgvis_km": 14.4,
"avgvis_miles": 8,
"avghumidity": 80,
"condition": {
"text": "Patchy rain possible",
"icon": "//cdn.apixu.com/weather/64x64/day/176.png",
"code": 1063
},
"uv": 1.2
},
"forecast": {
"forecastday": [
{
"date": "2017-10-04",
"date_epoch": 1507075200,
"day": {
"maxtemp_c": 12.7,
"mintemp_c": 9,
"avghumidity": 80,
"condition": {
"text": "Patchy rain possible",
"icon": "//cdn.apixu.com/weather/64x64/day/176.png",
"code": 1063
},
"uv": 1.2
},
Marat
@Marat89bluolyu
Oct 04 2017 10:23
hi all, recomend please ES-6 book, or something else for learn
Long Nguyen
@longnt80
Oct 04 2017 10:37
@Marat89bluolyu here's a useful list: https://github.com/mbeaudru/modern-js-cheatsheet
Marat
@Marat89bluolyu
Oct 04 2017 10:44
@longnt80 , @lydatech thanks!
CamperBot
@camperbot
Oct 04 2017 10:44
marat89bluolyu sends brownie points to @longnt80 and @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2490 | @lydatech |http://www.freecodecamp.com/lydatech
:cookie: 585 | @longnt80 |http://www.freecodecamp.com/longnt80
linkin-park
@linkin-park
Oct 04 2017 10:50
having hard time with image
when i say margin : 2opx
why my margin is not having my background-color
Long Nguyen
@longnt80
Oct 04 2017 11:00
@linkin-park use padding instead
linkin-park
@linkin-park
Oct 04 2017 11:01
why this behavior @longnt80
having hard time with images !
LydaTech
@lydatech
Oct 04 2017 11:01
@linkin-park margin affects the outside of the box. Padding the inside
Long Nguyen
@longnt80
Oct 04 2017 11:02
margin is the space outside of the element, and background-color wont go outside of the element
linkin-park
@linkin-park
Oct 04 2017 11:03
even after box-sizing: border-box;
Long Nguyen
@longnt80
Oct 04 2017 11:04
yes, margin is always outside
LydaTech
@lydatech
Oct 04 2017 11:06
Box Model.gif
@linkin-park box-sizing is just how the width and height are calculated
Zerka1982
@Zerka1982
Oct 04 2017 11:12
Hello guys
:)
linkin-park
@linkin-park
Oct 04 2017 11:12
i see :fire:
Zerka1982
@Zerka1982
Oct 04 2017 11:12
Could you please tell me how can I add a class name or ID in side this
$(".time1").html("<img alt='icon1' src=" + icon1 + ">");
@linkin-park @longnt80 What do you think my friends _
linkin-park
@linkin-park
Oct 04 2017 11:13
:) time to kill myself @Zerka1982
Zerka1982
@Zerka1982
Oct 04 2017 11:13
Please don't kill yourself
We need you :D
heroiczero
@heroiczero
Oct 04 2017 11:14
@Zerka1982 do you want a class/id inside the img?
Zerka1982
@Zerka1982
Oct 04 2017 11:14
please guys, this is very important question
exactly @heroiczero
inside this code : $(".time1").html("<img alt='icon1' src=" + icon1 + ">");
heroiczero
@heroiczero
Oct 04 2017 11:14
@Zerka1982 <img class="" alt='icon1' src=" + icon1 + ">
Zerka1982
@Zerka1982
Oct 04 2017 11:15
@heroiczero could you show me how to do it with this code please
$(".time1").html("<img alt='icon1' src=" + icon1 + ">");
$(".time1").html("<img class="Name" alt='icon1' src=" + icon1 + ">");
Is this correct ?
heroiczero
@heroiczero
Oct 04 2017 11:16
@Zerka1982 yes but you need to escape "" or use ' single quotes
Zerka1982
@Zerka1982
Oct 04 2017 11:16
Could you please write me the code how it should be please
you mean $(".time1").html("<img class='name' alt='icon1' src=" + icon1 + ">");
heroiczero
@heroiczero
Oct 04 2017 11:17
@Zerka1982 yes that works if you have a class name
Zerka1982
@Zerka1982
Oct 04 2017 11:17
@heroiczero Thanks Dude , I ll give it a try ;)
CamperBot
@camperbot
Oct 04 2017 11:17
zerka1982 sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1816 | @heroiczero |http://www.freecodecamp.com/heroiczero
linkin-park
@linkin-park
Oct 04 2017 11:18
unfair give me brownie points needs to cash that in Amazon :) @Zerka1982
Zerka1982
@Zerka1982
Oct 04 2017 11:18
How can I do that dude
heroiczero
@heroiczero
Oct 04 2017 11:18
@linkin-park TY. Here is a brownie :)
CamperBot
@camperbot
Oct 04 2017 11:18
heroiczero sends brownie points to @linkin-park :sparkles: :thumbsup: :sparkles:
:cookie: 37 | @linkin-park |http://www.freecodecamp.com/linkin-park
heroiczero
@heroiczero
Oct 04 2017 11:19
@Zerka1982 if you just @ and say thanks you give them brownies :)
CamperBot
@camperbot
Oct 04 2017 11:19
heroiczero sends brownie points to @zerka1982 :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @zerka1982 |http://www.freecodecamp.com/zerka1982
linkin-park
@linkin-park
Oct 04 2017 11:19
lol @heroiczero
css makes me cry
the channel makes me laugh
heroiczero
@heroiczero
Oct 04 2017 11:20
CSS is complicated and sometimes confusing, but repetition makes you learn
linkin-park
@linkin-park
Oct 04 2017 11:21
https://codepen.io/anon/pen/dVZpao @heroiczero @longnt80 please review this , http://paperbot.ai/
if i had a team things wont become easy
would**
heroiczero
@heroiczero
Oct 04 2017 11:24
@linkin-park well the page starts off nice but then it gets cut off from <p> Your team's knowledge is endless so are slack channels.</p> this line
linkin-park
@linkin-park
Oct 04 2017 11:25
i need to handle it via media query :( having bad time with images
i also working on with css grid
to make things simpler
now ?
should do position:absolute and work with left/right for images along with width/height in media query ? @heroiczero
@longnt80
your thoughts on this
heroiczero
@heroiczero
Oct 04 2017 11:30
@linkin-park try to make it work in a PC then start doing media query
linkin-park
@linkin-park
Oct 04 2017 11:35
okay i need to complete a lot :)
heroiczero
@heroiczero
Oct 04 2017 11:35
@linkin-park https://i.imgur.com/XVpYFzE.png this image is not displaying. look at https://www.reddit.com/r/FreeCodeCamp/comments/4ad3zl/imgur_and_codepen/
Matej Bošnjak
@mbosnjak01
Oct 04 2017 11:35
Hi. I gor an issue with Angular JS ... this is my controller ... https://i.imgur.com/ssuM7Lm.jpg ... http then function pushes user data in a scope ... the issue is, of 15 users i get from whole controller, i can call only first 10 (no matter which http is done first), while for the last 5 users i get an error TypeError: Cannot read property 'name' of undefined ... anyone could guees the issue of the problem? :|
heroiczero
@heroiczero
Oct 04 2017 11:36
@linkin-park i mean I could try to fix your mistakes, but you learn more if you fix your own. Try your best. I am rooting for you :+1: :smile:
linkin-park
@linkin-park
Oct 04 2017 11:37
thanks @heroiczero will make you proud :)
CamperBot
@camperbot
Oct 04 2017 11:37
linkin-park sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1817 | @heroiczero |http://www.freecodecamp.com/heroiczero
linkin-park @linkin-park going to buy a popcorn !
linkin-park
@linkin-park
Oct 04 2017 11:41
@heroiczero how do web designer think?
Fabien SHAN
@X140hu4
Oct 04 2017 11:49
In grid?
LydaTech
@lydatech
Oct 04 2017 11:51
@linkin-park content and structure first then display then Interactivity. HTML>CSS>JS
linkin-park
@linkin-park
Oct 04 2017 11:56
thanks @lydatech
CamperBot
@camperbot
Oct 04 2017 11:56
linkin-park sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2491 | @lydatech |http://www.freecodecamp.com/lydatech
Maria Theresa Arruda
@arrudamt
Oct 04 2017 12:09
hello guys!
i need a little help. I set my navigation bar as fixed, but when i'm selecting a section of my page part of it is being covered by the navigation bar. How can i correct it?
kirbyedy
@kirbyedy
Oct 04 2017 12:27
@arrudamt you have to push it down with javascript
offset top if I remember correctly
offset().top
Maria Theresa Arruda
@arrudamt
Oct 04 2017 12:31
@kirbyedy I haven't learned it yet. I'll check it. =)
thank you very much!
CamperBot
@camperbot
Oct 04 2017 12:31
arrudamt sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 2124 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
korzo
@korzo
Oct 04 2017 12:31
@arrudamt Or add element with id above the actual section with regard of navigation height
@arrudamt because when you click url with # in it, it will move page on top border of this element.
kirbyedy
@kirbyedy
Oct 04 2017 12:33
oh yea you can also make that div higher, more space at the top
Maria Theresa Arruda
@arrudamt
Oct 04 2017 12:34
@kirbyedy @korzo i tried it with margin, i haven't tried with height
kirbyedy
@kirbyedy
Oct 04 2017 12:35
padding-top ?
it might not look nice though, I just tried it...
Maria Theresa Arruda
@arrudamt
Oct 04 2017 12:35
@kirbyedy , i used padding-top, but the result is the same, it still "eat" a part of the content-image
can javascrip fix it latter? @kirbyedy
kirbyedy
@kirbyedy
Oct 04 2017 12:36
javascript or jquery
that offset().top I gave you is jquery
search for an example online, you might stumble upon a solution
Maria Theresa Arruda
@arrudamt
Oct 04 2017 12:37
@kirbyedy ok. the only things i know now is html and css, lol
santhoshbalaguru001
@santhoshbalaguru001
Oct 04 2017 12:43
I need web based inventory system has anyone done that project
rscales02
@rscales02
Oct 04 2017 12:54
thoughts on getting my center element to sit on top in the actual center?
nevermind
linkin-park
@linkin-park
Oct 04 2017 13:00
working in a team sc!z
niprobin
@niprobin
Oct 04 2017 13:05
guys, looks like a simple task but I am completely lost... https://codepen.io/niprobin/pen/RLjLjg
why is the blue box not going right next to the red one?
Tom
@moT01
Oct 04 2017 13:07
@niprobin they must be block elements by default
look into display types
niprobin
@niprobin
Oct 04 2017 13:09
@moT01 I will look into it thanks :)
CamperBot
@camperbot
Oct 04 2017 13:09
niprobin sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 868 | @mot01 |http://www.freecodecamp.com/mot01
Kaz Baig
@kbaig
Oct 04 2017 13:13
@khaduch Thanks so much!
CamperBot
@camperbot
Oct 04 2017 13:13
kbaig sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3338 | @khaduch |http://www.freecodecamp.com/khaduch
Kaz Baig
@kbaig
Oct 04 2017 13:22
@rscales02 would have to set position relative on container and position absolute on center-element, with top, left of 50% and transform: translate(-50%, -50%)
rscales02
@rscales02
Oct 04 2017 13:23
@kbaig I stumbled across the right answer a bit ago thanks though!
CamperBot
@camperbot
Oct 04 2017 13:23
rscales02 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 345 | @kbaig |http://www.freecodecamp.com/kbaig
Zerka1982
@Zerka1982
Oct 04 2017 15:30
Hello guys
Can I ask you something please
I've uploaded my project to GitHub, however I don't know how Can I see the web page in action :(
piteto
@piteto
Oct 04 2017 15:32
@Zerka1982 It's right here: https://zerka1982.github.io/
Zerka1982
@Zerka1982
Oct 04 2017 15:33
yes
i call it weatherApp
piteto
@piteto
Oct 04 2017 15:34
oh... go to https://github.com/Zerka1982/weatherApp and create a new branch called gh-pages
Then you can access it at: https://zerka1982.github.io/weatherApp
Zerka1982
@Zerka1982
Oct 04 2017 15:35
How Can I create new branch in the website ?
Zerka1982
@Zerka1982
Oct 04 2017 15:35
Or should I do it using commmand lines
piteto
@piteto
Oct 04 2017 15:35
click the branch menu, enter gh-pages and hit enter
Zerka1982
@Zerka1982
Oct 04 2017 15:37
done
piteto
@piteto
Oct 04 2017 15:38
looks like you need to use https for your link to jquery
Zerka1982
@Zerka1982
Oct 04 2017 15:39
How to do that ?
Can I simply add s to http ?
piteto
@piteto
Oct 04 2017 15:39
Mixed Content: The page at 'https://zerka1982.github.io/weatherApp/test.html' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.
Uncaught ReferenceError: $ is not defined at main.js:9
change http:// to https://
Zerka1982
@Zerka1982
Oct 04 2017 15:40
Can I change it directly in GitHub ?
I mean editing the file in GitHub
piteto
@piteto
Oct 04 2017 15:41
Yes, just make sure you do it in both branches if you do it that way
or get rid of your main branch if you only want to use the branch as a place to host your web page
Zerka1982
@Zerka1982
Oct 04 2017 15:43
both branches ????
Zerka1982
@Zerka1982
Oct 04 2017 15:48
Got it nw
@piteto TY
CamperBot
@camperbot
Oct 04 2017 15:48
zerka1982 sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 191 | @piteto |http://www.freecodecamp.com/piteto
piteto
@piteto
Oct 04 2017 15:49
You're welcome @Zerka1982
Zerka1982
@Zerka1982
Oct 04 2017 15:58
@piteto I've changed the code and make commit
but still changes do not appear
or delete the master branch and just use the gh-pages branch to simplify if you want
Zerka1982
@Zerka1982
Oct 04 2017 16:09
@piteto Got it now
can you see the page weather ?
piteto
@piteto
Oct 04 2017 16:10
Yes, it works for me
Zerka1982
@Zerka1982
Oct 04 2017 16:10
Can you see the weather ?
Please take screenshot and show me :)
if you don't mind ...
Eric Weiss
@eweiss17
Oct 04 2017 17:23
Hey guys i'm fixing my twitch api project and am struggling fixing the rows of the table to show in order of "active, inactive, unresponsive" , sometimes it spits it out right, but sometimes some of mixed inbetween, you can see it here https://codepen.io/eweiss17/pen/PKEPrR
looking for help on how to make it look better
Tom
@moT01
Oct 04 2017 17:39
@eweiss17 any idea what the problem is?
Eric Weiss
@eweiss17
Oct 04 2017 17:40
it's different any time lol, turning off async almost helped but not always
i really just need to set a priority for the table's classes
Tom
@moT01
Oct 04 2017 17:41
yea, you're on the right track
https://s.codepen.io/moT01/pen/KXyxGZ?editors=1112 i put some console.logs in there
basically your code runs all the through before any of the requests get returned
why you see all the users there before any of the data
using a forEach loop should fix that, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach - you might be able to change some of the async settings in your request to fix it as well, i see you were playing with it
Tom
@moT01
Oct 04 2017 17:46
another way to go might be to have 3 divs in the html, and append to each one based on the status
Eric Weiss
@eweiss17
Oct 04 2017 17:52
i know tables are a no-no, but i just figured i'd go with it to see as of why
Tom
@moT01
Oct 04 2017 17:53
what's wrong with tables?
Eric Weiss
@eweiss17
Oct 04 2017 17:54
just that in modern sites, they are not as flexable as just using divs everywhere
piteto
@piteto
Oct 04 2017 17:58

@eweiss17 add this at the top of your for loop:

      $("#main-table").append(
        '<tr id="activeStreamers"></tr>' +
        '<tr id="inactiveStreamers"></tr>' +
        '<tr id="unresponsiveStreamers"></tr>'
      );

And then, instead of appending to #main-table, append to #activeStreamers, #inactiveStreamers, and #unresponsiveStreamers

since you'll have some nesting going on - you may need to modify the CSS slightly to get it looking the same
Eric Weiss
@eweiss17
Oct 04 2017 18:02
i believe i spoke too soon, by just changing to forEach it looks better, i am refreshing to make sure it isn't just a fluke
piteto
@piteto
Oct 04 2017 18:02
that will only work as long as your array is ordered by their status
korzo
@korzo
Oct 04 2017 18:05
@moT01 You can get div's behave as table, but you can't change order/layout of rows/cells in table
Eric Weiss
@eweiss17
Oct 04 2017 18:08
oh i see i put brunofin first and it is messed up again
Tom
@moT01
Oct 04 2017 18:14
noted
quickspeedy
@quickspeedy
Oct 04 2017 18:15
I'm working on a portfolio webpage and I am having issue when you hover on the image in the portfolio section, the picture seems to slightly move. I don't understand why. Any help would be appreciated! Codepen: https://codepen.io/quickspeedy/pen/Jrrwqj
linkin-park
@linkin-park
Oct 04 2017 18:17
https://codepen.io/anon/pen/dVZpao having alot of issue meh!
piteto
@piteto
Oct 04 2017 18:19
@eweiss17 This seems to work well - but needed to change td element to display block and remove image floats. https://s.codepen.io/anon/pen/OxOBaZ?editors=0010
I'm not sure about SCSS, but in regular CSS, comments should be in / / not // like JS.
Tom
@moT01
Oct 04 2017 18:22
@quickspeedy you sure it moves?
i see it sort of changing resolution a little, during the hover effect
quickspeedy
@quickspeedy
Oct 04 2017 18:25
@moT01 I wouln't say move but it does look like it's moving during the hover effect.
linkin-park
@linkin-park
Oct 04 2017 18:26
==Help
any online screen sharing video conferencing site ?
can sign up .... :/
cant*
Tom
@moT01
Oct 04 2017 18:29
@quickspeedy it seems to change less if you shrink the picture you're getting .... https://static1.squarespace.com/static/56d77cec37013bbd82596472/t/588a3ceef7e0ab0d414897fd/1485454575406/portfolio-2.jpg?format=400w
if you remove the opacity transition - it doesn't change at all
nice page by the way
quickspeedy
@quickspeedy
Oct 04 2017 18:34
Could you show me a step on how you managed to get that link. I tried looking for it in the chrome console and couldn't find it. @moT01
Thank you by the way!
CamperBot
@camperbot
Oct 04 2017 18:34
quickspeedy sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 869 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Oct 04 2017 18:34
i just saw the number at the end
400w = 400 width
quickspeedy
@quickspeedy
Oct 04 2017 18:35
Oh ok all right.
Tom
@moT01
Oct 04 2017 18:35
you were using like 1500, since the images on the page are only like 300 wide anyway, no sense in loading a 1500 wide pic
linkin-park
@linkin-park
Oct 04 2017 18:35
anything wrong with my design ?
https://codepen.io/anon/pen/dVZpao @moT01
quickspeedy
@quickspeedy
Oct 04 2017 18:38
@moT01 So I should resize the image? And it should also help speed up the load too.
Tom
@moT01
Oct 04 2017 18:38
that should speed up the load, yes
quickspeedy
@quickspeedy
Oct 04 2017 18:38
Ok thanks @moT01
CamperBot
@camperbot
Oct 04 2017 18:38
quickspeedy sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
Tom
@moT01
Oct 04 2017 18:39
so the opacity transition makes the images do that - you're changing the opacity of the image, im wondering if you changed the way you did that, if it would fix it
instead of changing the opacity of the image - change the opacity of something sitting on top of the image
it looks like you already kind of have something there
so instead of changing the image from .3 to .7 opacity, -- change something sitting on top of the image from .7 to .3
or something like that, if that makes any sense
might not even fix it but, im thinking then the image itself wouldn't have to change and maybe it would fix it
@linkin-park the picture isn't showing up for me
you should move all your <style> into the css section
quickspeedy
@quickspeedy
Oct 04 2017 18:43
Yeah I removed the opacity as you mentioned and it seems to work but I can see the second row image moving a little so far. So what you mention is just create another layer on top of the image using opacity?
@moT01
Tom
@moT01
Oct 04 2017 18:43
the page itself looks pretty decent, ..has some work to do @linkin-park
what is this
figure.effect-bubba {
    background: #2B2828;
}
isn't that already like a layer on top of the image?
quickspeedy
@quickspeedy
Oct 04 2017 18:45
Yes and it helps darken the image.
Tom
@moT01
Oct 04 2017 18:46
so on hover you can change the opacity of that
to next to nothing
and the picture will then look clear
or bright
like i said, im not sure if that will fix it
but i feel like it might
quickspeedy
@quickspeedy
Oct 04 2017 18:48
Yeah but I want to keep the image dark so that when user hover it, the image brighten up.
Tom
@moT01
Oct 04 2017 18:49
yes, the effect will be the same
so let me try and explain again
right now the way you have it ....
the image opacity is at 0.3ish and on hover it goes to 1ish or something
and im suggesting that instead of changing the image's opacity
change the opacity of the layer on top of it
so the image will always have full opacity, but it will look dark from the layer on it
and the layer on it starts at .7 or something opacity, then goes to 0 opacity on hover
quickspeedy
@quickspeedy
Oct 04 2017 18:51
Ok. I get what you mean. Let me try it and fix it.
Tom
@moT01
Oct 04 2017 18:52
and for some reason i feel like that might give the browser an easier time dealing with that transition or something so that won't happen, but im not sure- the same thing might happen
@quickspeedy let me know if it works
krckyboy
@krckyboy
Oct 04 2017 19:06
How much would hosting cost per month if you were to upload videos to your website of 1080p quality? I know it's a vague question, but I really don't know how much would it cost me to run a website with the idea of having quite a few videos there, and keep uploading and whatnot. Any links or directions would be appreciated. Thanks in advance!
Gersho
@Gersho
Oct 04 2017 19:10

How much would hosting cost per month if you were to upload videos to your website of 1080p quality?

you should not count about what you put on it, but rather how many times it is accessed (total bandwith) and the speed you want you users to have (i suppose you want that 1080 to load smoothly)

apart from that i have no info sorry (have considered hosting them on youtube and using embed ?)

Dennis Daubney Jr
@MrOolong
Oct 04 2017 19:11
Anyone have some good resources for really understanding how to use an API?
Dennis Daubney Jr
@MrOolong
Oct 04 2017 19:17
@Gersho thank you very much
CamperBot
@camperbot
Oct 04 2017 19:17
mroolong sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 510 | @gersho |http://www.freecodecamp.com/gersho
piteto
@piteto
Oct 04 2017 19:37
@krckyboy To protect your videos, you need a secure hosting solution that encrypts at the various stages of delivery. VdoCipher is one example - about $350 USD / yr https://www.vdocipher.com/site/pricing
krckyboy
@krckyboy
Oct 04 2017 19:38
@piteto Thank you! I will look into it. :)
CamperBot
@camperbot
Oct 04 2017 19:38
krckyboy sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 194 | @piteto |http://www.freecodecamp.com/piteto
piteto
@piteto
Oct 04 2017 19:39
I just noticed their website uses bootstrap :p
Eric Hasegawa
@EricHasegawa
Oct 04 2017 20:32
Can anyone help me with a portfolio problem?
I'm trying to lay text over an image and I can't figure it out
piteto
@piteto
Oct 04 2017 20:36
@EricHasegawa sure, usually the image is a background image, and when that's not possible, use absolute or relative positioning
Eric Hasegawa
@EricHasegawa
Oct 04 2017 20:38
@piteto How could I use absolute/relative positioning in this case, I tried to set it's position to absolute and everything got messed up
piteto
@piteto
Oct 04 2017 20:42
@EricHasegawa do you have code to share?
piteto
@piteto
Oct 04 2017 20:42
the parent div uses relative positioning, the text element would use absolute position
@EricHasegawa what text do you want over which image? That's 200 lines of html/css :p
Eric Hasegawa
@EricHasegawa
Oct 04 2017 20:45
@piteto Hahaha fair enough, what I'm getting at is the first project image (the wikipedia viewer)

 <div class="multImgWrap">
<div class="singImgWrap"> 
    <a id= "imgLink" target="_blank" href="https://codepen.io/erichasegawa/full/Bdvgvm">
    <img class ="project fade" src="https://s19.postimg.org/5a9zdw583/Wikipedia_Viewer.png" > <div class="textWrap"> <h1> Test </h1> </div> 
    </a>
      </div>
So, your .singImgWrap class would be position: relative and your .textWrap class would have position: absolute
Eric Hasegawa
@EricHasegawa
Oct 04 2017 20:47
But I already have those in place? @piteto
piteto
@piteto
Oct 04 2017 20:53
@EricHasegawa Try this:
.singImgWrap {
  margin: 4% 10% 5% 10%;
  position: relative;
}

.textWrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 45%;
}
you had positon instead of position - took me a little while to see that :)
Eric Hasegawa
@EricHasegawa
Oct 04 2017 20:54
Oh awesome! Thank you so much @piteto
CamperBot
@camperbot
Oct 04 2017 20:54
erichasegawa sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 198 | @piteto |http://www.freecodecamp.com/piteto
Eric Hasegawa
@EricHasegawa
Oct 04 2017 20:54
Dumb mistake on my part
piteto
@piteto
Oct 04 2017 20:55
Those are hard to catch! Wish css had better debugging tools
Eric Hasegawa
@EricHasegawa
Oct 04 2017 20:55
what's the left:0 right: 0 and top: 45% for?
@piteto I have to go unfortunately, but thanks for the hand!
CamperBot
@camperbot
Oct 04 2017 20:57
erichasegawa sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
piteto
@piteto
Oct 04 2017 20:57
@EricHasegawa play around with those numbers and see :) it's for left, right, top, bottom positioning
left: 0, right: 0 puts it in the middle
alpox
@alpox
Oct 04 2017 21:30
@piteto vscode usually does a great job when it comes to such things. Also has css intellisense
piteto
@piteto
Oct 04 2017 21:36
@alpox yeah, the squiggly lines in vscode are nice!
J.Chechelski
@SupaSaiyan
Oct 04 2017 21:50
Hello, I'm totally newb with front-end frameworks like angular,react etc. Can I build app with for example logging system with angular without using backend language?
Sean Clarke
@Seanland
Oct 04 2017 23:15
@SupaSaiyan Where are you planning on keeping your logs?