These are chat archives for FreeCodeCamp/Help

2nd
Jun 2018
Smootimus
@Smootimus
Jun 02 2018 00:01
Sorry I been in and out
What's up man
Karma Drukpa
@coderkarma
Jun 02 2018 00:02
feeling so weird asking simple questions
@keyframes star-1 {
    50% {
   }
}
@thekholm80
Smootimus
@Smootimus
Jun 02 2018 00:05
I haven't touched the applied visual design at all
Karma Drukpa
@coderkarma
Jun 02 2018 00:05
okay
Kyle Holm
@thekholm80
Jun 02 2018 00:05
Alter the animation rate for the element with the class name of star-1 by changing its @keyframes rule to 50%.
star-1's animation is animation-name: twinkle-1;
so you should be changing
  @keyframes twinkle-1 {
    20% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }
not creating a whole new keyframe rule named star-1
Kyle Holm
@thekholm80
Jun 02 2018 00:11
@coderkarma i'm heading out for the night. i'll probably be around for a bit tomorrow if you get stuck again. or there's usually others around, most are smarter than me
best of luck
Karma Drukpa
@coderkarma
Jun 02 2018 00:12
hahahahah thank you man.
but still i couldn't get it @thekholm80
Karma Drukpa
@coderkarma
Jun 02 2018 00:24
Have a Good Friday night out Kyle.
Kingsley
@Kingwindie
Jun 02 2018 01:09
var output = document.querySelector(".output");
var input = document.querySelector("#inputVal");
var inputVal = input.value;
var activate = document.querySelector("#activate");

function start() {

    for (var i = Number(inputVal); i >= 0; i--) {
        var countdownP = document.createElement("p");
        if (Number(inputVal) === 0) {
            countdownP.textContent = "Number must be greater than 0"; //here i am checking if the number entered is 0,it does not work
        }

        if (i === Number(inputVal)) {
            countdownP.textContent = "Countdown " + i + " initiated";
        } else if (i === 0) {
            countdownP.textContent = "Blast off!";
        } else {
            countdownP.textContent = "Blast off in " + i + "...";
        }
        output.appendChild(countdownP);
        input.focus();
        inputVal.textContent = " ";  //this line does not work
    }
}

activate.addEventListener("click", start);
can someone look at the comments in this code,i'm not sure why the if statement and the last textContent is not working
Gulsvi
@gulsvi
Jun 02 2018 01:28
@Kingwindie your input.value appears to be running on document load, before there's a value in the input. Do a console.log(inputVal) at the beginning of your start function
Joseph
@revisualize
Jun 02 2018 01:29
Anyone able to access Twich.tv streams?
I get a Network Error 2000
And Twitch apps using the standard API are all working for me in codepen @revisualize
Joseph
@revisualize
Jun 02 2018 01:44
@gulsvi Thanks.. I'm having issues just one stream channel then.
mstellaluna
@mstellaluna
Jun 02 2018 01:56
@thekholm80 https://venturebeat.com/2018/06/01/microsoft-reportedly-wants-to-acquire-github/ <-- THIS WOULD BE PERFECT !! HHAHAHHAH... AHAHAHHAAH ... MS :heart:
Kyle Holm
@thekholm80
Jun 02 2018 02:29
@mstellaluna oh awesome! i've always wished github would be worse and cost more
:smirk_cat:
Smootimus
@Smootimus
Jun 02 2018 02:42
:smile:
What a night
Kyle Holm
@thekholm80
Jun 02 2018 02:46
@Smootimus :wave:
Karma Drukpa
@coderkarma
Jun 02 2018 02:47
@thekholm80 for a audio tag , do we have to put id for id and attributes?
Smootimus
@Smootimus
Jun 02 2018 02:48
@thekholm80 :wave:
Karma Drukpa
@coderkarma
Jun 02 2018 02:48
<audio id="audio" controls>
      <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg" />
    </audio>
Kyle Holm
@thekholm80
Jun 02 2018 02:49
@coderkarma which challenge is this?
Karma Drukpa
@coderkarma
Jun 02 2018 02:50
confusion @thekholm80 why do we have to put id in that audio tag and in closing source element why do we need forward slash.
let me sent you link. hold on
Kyle Holm
@thekholm80
Jun 02 2018 02:50
doing <tag /> is basically the same thing as <tag></tag>
kind of a short-hand
some elements are self-closing and don't require a closing tag or a slash, others don't have inner html so you can use the slash to close them
Karma Drukpa
@coderkarma
Jun 02 2018 02:51
hahahah really. good to know
Kyle Holm
@thekholm80
Jun 02 2018 02:53
i don't see anything in the instructions asking you to add an id
Karma Drukpa
@coderkarma
Jun 02 2018 02:55
that's right .
<audio controls >
      <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg" />
    </audio>
Kyle Holm
@thekholm80
Jun 02 2018 02:55
yeah, that's how i did it
Karma Drukpa
@coderkarma
Jun 02 2018 02:56
but in example why did they put id there ?
Kyle Holm
@thekholm80
Jun 02 2018 02:56
dunno
Karma Drukpa
@coderkarma
Jun 02 2018 02:56
and my one test didn't pass.?
Kyle Holm
@thekholm80
Jun 02 2018 02:57
maybe it doesn't like the trailing space after controls
Karma Drukpa
@coderkarma
Jun 02 2018 02:57
true.
have you finished all FCC courses? @thekholm80
Kyle Holm
@thekholm80
Jun 02 2018 03:00
no, not even close. most of the stuff just came out Tuesday
i've only got 3 certs
and 2 of them are legacy
Karma Drukpa
@coderkarma
Jun 02 2018 03:01
alright.
I need to get those Cert to..
sdenboer
@sdenboer
Jun 02 2018 05:54
wrong link?
image.png
reply Everyone is sleeping
Alexandar B
@ace1122sp
Jun 02 2018 12:40
@AnmolSoni you need to create a new object called lookup and then just asign the right value to the result.. you don't need switch...
AnmolSoni
@AnmolSoni
Jun 02 2018 14:52
@ace1122sp thanx alex I have done it
function phoneticLookup(val) {
var result = "";
// Only change code below this line
var lookup = {
alpha: "Adams", bravo: "Boston", charlie: "Chicago", delta: "Denver", echo: "Easy", foxtrot: "Frank"
};
result = lookup[val];
return result;
}
print(phoneticLookup("charlie"));
Alexandar B
@ace1122sp
Jun 02 2018 15:06
:+1: :smiley:
Smootimus
@Smootimus
Jun 02 2018 18:23
Hello :smile:
Alexandar B
@ace1122sp
Jun 02 2018 18:34
:wave:
easy saturday :smile:
Nadia
@nadiaschutz
Jun 02 2018 19:17
:wave: people
Alexandar B
@ace1122sp
Jun 02 2018 19:18
:wave:
Nadia
@nadiaschutz
Jun 02 2018 19:19
@ace1122sp nice selfie
Alexandar B
@ace1122sp
Jun 02 2018 19:21
thanks, but :alien: took a photo :D
Nadia
@nadiaschutz
Jun 02 2018 19:26
@ace1122sp ah...you have nice friends
Alexandar B
@ace1122sp
Jun 02 2018 19:29
:smile: .. i suppose that's the result of watching all those sci-fi shows lol
Smootimus
@Smootimus
Jun 02 2018 19:48
:wave:
Alexandar B
@ace1122sp
Jun 02 2018 19:49
:wave:
Kyle Holm
@thekholm80
Jun 02 2018 19:51
:wave:
anthonygallina1
@anthonygallina1
Jun 02 2018 20:00
epic!
Nikolaos Tsigkros
@NikosTsigkros
Jun 02 2018 20:19
Hello everyone
Alexandar B
@ace1122sp
Jun 02 2018 20:19
:wave:
diomed @diomed bans wavers
anthonygallina1
@anthonygallina1
Jun 02 2018 20:43
:smile:
Smootimus
@Smootimus
Jun 02 2018 21:13
just ordered a pizza and I have a ton of reading I wanna do
Got like 4 O'Reilly books I wanna chew thru
Alexandar B
@ace1122sp
Jun 02 2018 21:16
what are you reading about?
i'm building voting app for fcc backend
Smootimus
@Smootimus
Jun 02 2018 21:19
C++, Javascript, SQL, Server Administration
I haven't touched any of the new FCC content or anything
I logged on and saw they released it but haven't done anything.
Been tied up with stuff at my University
Alexandar B
@ace1122sp
Jun 02 2018 21:20
cool
yeah, they added a bunch of new stuff.. but voting app is from previous version, though it has been moved to 'take home projects'
Smootimus
@Smootimus
Jun 02 2018 21:22
Ah I see
Nice how's it comin'
I'm gonna end up pushing all my school C++ assignments onto Github
It's a project I've been wanting to get going
Alexandar B
@ace1122sp
Jun 02 2018 21:26
ok, but atm i'm struggling to organize all the stuff about the project and to figure out what actions and reducers i need in the app. . currently working on client side and SPA..
i have a plan to learn C++ in not so distant future.. :satisfied:
Alexandar B
@ace1122sp
Jun 02 2018 21:50
so, if simplicity is a virtue, should then our commits also be simple and not to big?
Karma Drukpa
@coderkarma
Jun 02 2018 22:41
@thekholm80
I need a help on this.
grid-template-columns: minmax(90px, 1fr);
Moisés Man
@moigithub
Jun 02 2018 22:47
wheres the repeat function ? @coderkarma
u still need to have 3 columns at the end
Karma Drukpa
@coderkarma
Jun 02 2018 22:54
hahahah@ i got it thanks @moigithub
grid-template-columns: repeat (3, minmax(90px, 1fr))
Moisés Man
@moigithub
Jun 02 2018 22:57
:+1:
Christopher McCormack
@cmccormack
Jun 02 2018 23:11
Anyone complete this exercise successfully? I feel like I've done this 1000 times in my own code but for some reason it doesn't seem to work on FCC and want to see if anyone else got it before submitting bug report
Karma Drukpa
@coderkarma
Jun 02 2018 23:14
@media (min-width: 400px){ .container{ /* change the code below this line */ grid-template-columns: grid-template-rows: grid-template-areas: "advert header" "advert content" "advert footer";
@moigithub I didn't get this one.
@media (min-width: 400px){
    .container{
      /* change the code below this line */
     grid-template-columns:
     grid-template-rows: 
      grid-template-areas:
        "advert header"
        "advert content"
        "advert footer";
little confuse to put value on grid-template-columns and rows
@thekholm80 @moigithub
Moisés Man
@moigithub
Jun 02 2018 23:17
@cmccormack works for me
class Camper extends React.Component {
  render(){
    return (
      <p>{this.props.name}</p>
    );
  }
}

Camper.propTypes={
  name: PropTypes.string.isRequired
};

Camper.defaultProps = {
  name: 'CamperBot'
};
Christopher McCormack
@cmccormack
Jun 02 2018 23:18
@moigithub maybe I'm not reading it right, I added
class Camper extends React.Component {
  render() {
    return(
      <p>{this.props.name}</p>
    )
  }
}

Camper.propTypes = {
  name: PropTypes.string.isRequired,
}

Camper.defaultProps = {
  name: "CamperBot,
}
@moigithub
Christopher McCormack
@cmccormack
Jun 02 2018 23:21
I don't see any real difference in ours, weird
I've reset several times, reloaded, still same error:
// running test
The Camper component should include default props which assign the string CamperBot to the key name.
The Camper component should include prop types which require the name prop to be of type string.
// tests completed
oh! it was the dangling comma!
Why would that cause it to fail though??
Moisés Man
@moigithub
Jun 02 2018 23:24
dunno :)
tried es7 syntax.. but didnt work
class Camper extends React.Component {
  static propTypes={
    name: PropTypes.string.isRequired
  };

  static defaultProps = {
    name: 'CamperBot'
  };

  render(){
    return (
      <p>{this.props.name}</p>
    );
  }
}
Christopher McCormack
@cmccormack
Jun 02 2018 23:24
@moigithub did yours fail to run at all using statics? That's what I experienced, no tests were even tried
Moisés Man
@moigithub
Jun 02 2018 23:25
says Camper is not defined
Christopher McCormack
@cmccormack
Jun 02 2018 23:25
I completed other exercises using dangling commas, maybe I'll submit a bug report
@moigithub I wonder if we have to allow that syntax
help needed?
Moisés Man
@moigithub
Jun 02 2018 23:29

@coderkarma

When the viewport width is 400px or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely

soo u still need to have 2 colums (at middle)

■■■■■■ <-- header
■■__■■ <-- advert + content
■■■■■■ <-- footer
soo what changes is the layout only. / distribution...
using grid-template-areas
Karma Drukpa
@coderkarma
Jun 02 2018 23:32

``` @media (min-width: 400px){
.container{
/ change the code below this line /
grid-template-columns:
grid-template-columns:
grid-template-rows:

    "advert header"
    "advert content"
    "advert footer";

```

 @media (min-width: 400px){
    .container{
      /* change the code below this line */
     grid-template-columns: 
     grid-template-columns: 
     grid-template-rows: 

        "advert header"
        "advert content"
        "advert footer";
Moisés Man
@moigithub
Jun 02 2018 23:33

make the header area occupy the top row completely

soo header should ocupy 2 columns.. u can do like this
"header header"

    grid-template-columns: 
     grid-template-columns:
this no needed
when use media queries.. u only change the part u want to affect
Karma Drukpa
@coderkarma
Jun 02 2018 23:34
so the value has to be header header
Moisés Man
@moigithub
Jun 02 2018 23:34
yep... and using grid-template-areas attribute (and ofcourse u need to complete the rest )
Karma Drukpa
@coderkarma
Jun 02 2018 23:36
guess I am not understading, i am confused on this.
Moisés Man
@moigithub
Jun 02 2018 23:36

on previous media query,, the grid structure is already defined
as

  grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;

so it have 2 columns.. and 3 rows
when use grid-template-areas u distribute the sections across that structure

Karma Drukpa
@coderkarma
Jun 02 2018 23:39
what do i need to do with advert header and advert content
Moisés Man
@moigithub
Jun 02 2018 23:43

soo once u have the grid structure.. u can place the sections .. lets say.. u want header ocupy the whole grid..
which have 6 cells
u can write

grid-template-areas:
"header header"
"header header"
"header header"

because.. as the colums and rows says u have 2 columns and 3 rows

soo ur task is to make header ocupy 2 cols at top...
and footer take 2 cols at bottom
and leave advert +content untouched
Karma Drukpa
@coderkarma
Jun 02 2018 23:48
so i can do something like this
grid-template-columns: header
grid-template-columns: header
Moisés Man
@moigithub
Jun 02 2018 23:48
the only property u need to use is grid-template-areas
to distribute ur content/sections
grid-template-colums is used to "split" ur grid on columns ( like writing a box with vertical lines )
grid-template-rows is used to "split" ur grid on rows ( like writing a box with horizontal lines )
easier if u pick pen and paper... and paint with some colors <-- grid-template-areas
@coderkarma https://webwhiteboard.com/board/88qhchbz (updated the image) not sure if u understand.. else u can check some youtube videos :P