These are chat archives for FreeCodeCamp/Help

13th
May 2018
Bjorn van de Peut
@bjorno43
May 13 2018 02:07
:wave:
Kyle Holm
@thekholm80
May 13 2018 02:14
@bjorno43 hi bob
Henry
@GitHub-Henry
May 13 2018 03:08
@thekholm80 :wave:
Kyle Holm
@thekholm80
May 13 2018 03:08
@GitHub-Henry :wave:
Henry
@GitHub-Henry
May 13 2018 03:12
Tinkering with Notepad++. Doesn't work with OM. Works with Fira Code. I think it looks OK.
image.png
Kyle Holm
@thekholm80
May 13 2018 03:14
oh neat
Henry
@GitHub-Henry
May 13 2018 03:15
I was surprised, to see it look as good as it does.
Sandip Shrestha
@saninmersion
May 13 2018 06:08
made this minesweeper game in react, check it out.
https://codepen.io/saninmersion/full/xWqaxJ/
Nazar
@IsaakNazar
May 13 2018 13:37
@saninmersion very nice, I like it :+1:
Stephen James
@sjames1958gm
May 13 2018 14:03
@saninmersion :+1:
Moisés Man
@moigithub
May 13 2018 15:04
@saninmersion nice, .. what IF all mines are placed all together ? ie. all 9 on same corner
ashk0n
@ashk0n
May 13 2018 15:19
is there a way I can download all videos at once
Nazar
@IsaakNazar
May 13 2018 16:27
@ashk0n 18+ videos?
Akhil Kaithoju
@akhilkaithoju_twitter
May 13 2018 17:20
How to add fallback values?
can you give any synatx ?
like,
background: var(--penguin-skin, black);
Kyle Holm
@thekholm80
May 13 2018 17:25
@akhilkaithoju_twitter according to this what you have is correct
Akhil Kaithoju
@akhilkaithoju_twitter
May 13 2018 17:27
@thekholm80
background: var(--penguin-skin, black); this should be wrong.
Any correction ?
Kyle Holm
@thekholm80
May 13 2018 17:28
why should it be wrong?
The first argument to the function is the name of the custom property to be substituted. The second argument to the function, if provided, is a fallback value, which is used as the substitution value when the referenced custom property is invalid.
Akhil Kaithoju
@akhilkaithoju_twitter
May 13 2018 17:30

@thekholm80 <style>
.penguin {
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}

.penguin-top {
top: 10%;
left: 25%;

/* change code below */
background: var(--penguin-skin, black);
/* change code above */

width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;

}

.penguin-bottom {
top: 40%;
left: 23.5%;

/* change code below */
background: var(--secondary-color,black);
/* change code above */

width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;

}

.right-hand {
top: 0%;
left: -5%;
background: var(--penguin-skin, black);
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(45deg);
z-index: -1;
}

.left-hand {
top: 0%;
left: 75%;
background: var(--penguin-skin, black);
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}

.right-cheek {
top: 15%;
left: 35%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}

.left-cheek {
top: 15%;
left: 5%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}

.belly {
top: 60%;
left: 2.5%;
background: var(--penguin-belly, white);
width: 95%;
height: 100%;
border-radius: 120% 120% 100% 100%;
}

.right-feet {
top: 85%;
left: 60%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
}

.left-feet {
top: 85%;
left: 25%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
}

.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}

.left-eye {
top: 45%;
left: 25%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}

.sparkle {
top: 25%;
left: 15%;
background: white;
width: 35%;
height: 35%;
border-radius: 50%;
}

.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}

.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}

.beak-top {
top: 60%;
left: 40%;
background: var(--penguin-beak, orange);
width: 20%;
height: 10%;
border-radius: 50%;
}

.beak-bottom {
top: 65%;
left: 42%;
background: var(--penguin-beak, orange);
width: 16%;
height: 10%;
border-radius: 50%;
}

body {
background:#c6faf1;
}

.penguin * {
position: absolute;
}
</style>

<div class="penguin">
<div class="penguin-bottom">
<div class="right-hand"></div>
<div class="left-hand"></div>
<div class="right-feet"></div>
<div class="left-feet"></div>
</div>
<div class="penguin-top">
<div class="right-cheek"></div>
<div class="left-cheek"></div>
<div class="belly"></div>
<div class="right-eye">
<div class="sparkle"></div>
</div>
<div class="left-eye">
<div class="sparkle"></div>
</div>
<div class="blush-right"></div>
<div class="blush-left"></div>
<div class="beak-top"></div>
<div class="beak-bottom"></div>
</div>
</div>

Add a fallback value of black to the background property of penguin-top and penguin-bottom classes. This style will be applied because of a typo in the variable name.
this is the question
Kyle Holm
@thekholm80
May 13 2018 17:33
  .penguin-top {
    top: 10%;
    left: 25%;

    /* change code below */
    background: var(--pengiun-skin, black);
    /* change code above */

    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }

  .penguin-bottom {
    top: 40%;
    left: 23.5%;

    /* change code below */
    background: var(--pengiun-skin, black);
    /* change code above */

    width: 53%;
    height: 45%;
    border-radius: 70% 70% 100% 100%;
  }
this passed for me
you might need to reset the challenge and try again
make sure you're just typing in the fallback color, not copy/pasting the example code from the instructions
you have to leave their typo in the css
Akhil Kaithoju
@akhilkaithoju_twitter
May 13 2018 17:39
@thekholm80 is this penguin or pengiun ?
Kyle Holm
@thekholm80
May 13 2018 17:39
it is supposed to be mis-spelled as pengiun
as indicated in the instructions
Akhil Kaithoju
@akhilkaithoju_twitter
May 13 2018 17:42
@thekholm80 yeah! thank you.
CamperBot
@camperbot
May 13 2018 17:42
akhilkaithoju_twitter sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
:star2: 1787 | @thekholm80 |http://www.freecodecamp.org/thekholm80
Kyle Holm
@thekholm80
May 13 2018 17:43
:+1:
Akhil Kaithoju
@akhilkaithoju_twitter
May 13 2018 18:03

<style>
:root {
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
}

body {
background: var(--penguin-belly, #c6faf1);
}

.penguin {

/* add code below */

/* add code above */

position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;

}

.right-cheek {
top: 15%;
left: 35%;
background: var(--penguin-belly, pink);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}

.left-cheek {
top: 15%;
left: 5%;
background: var(--penguin-belly, pink);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}

.belly {
top: 60%;
left: 2.5%;
background: var(--penguin-belly, white);
width: 95%;
height: 100%;
border-radius: 120% 120% 100% 100%;
}

.penguin-top {
top: 10%;
left: 25%;
background: var(--penguin-skin, gray);
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}

.penguin-bottom {
top: 40%;
left: 23.5%;
background: var(--penguin-skin, gray);
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}

.right-hand {
top: 0%;
left: -5%;
background: var(--penguin-skin, gray);
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(45deg);
z-index: -1;
}

.left-hand {
top: 0%;
left: 75%;
background: var(--penguin-skin, gray);
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}

.right-feet {
top: 85%;
left: 60%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
}

.left-feet {
top: 85%;
left: 25%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
}

.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}

.left-eye {
top: 45%;
left: 25%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}

.sparkle {
top: 25%;
left: 15%;
background: white;
width: 35%;
height: 35%;
border-radius: 50%;
}

.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}

.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}

.beak-top {
top: 60%;
left: 40%;
background: var(--penguin-beak, orange);
width: 20%;
height: 10%;
border-radius: 50%;
}

.beak-bottom {
top: 65%;
left: 42%;
background: var(--penguin-beak, orange);
width: 16%;
height: 10%;
border-radius: 50%;
}

Change the value of --penguin-belly to white in the penguin class.
May Kittens Devour Your Soul
@diomed
May 13 2018 18:27
hail codewall
Bjorn van de Peut
@bjorno43
May 13 2018 19:10
@akhilkaithoju_twitter Please use services like Pastebin or Codepen when posting large walls of code. They come across as spamming and disrupt the chat for other members and are therefor against our Code of Conduct
Gulsvi
@gulsvi
May 13 2018 22:02
You'd think admins could add a custom max-message length in gitter
I think the default is pretty generous considering the codewall above :)
Bjorn van de Peut
@bjorno43
May 13 2018 22:19
@gulsvi We can't. We can only set the welcome message, kick / ban users and delete the room. Ye and obviously we could make the room private, but that's it. The only way something like that would be possible is adding a bot that automaticly deletes messages that are too large and posts them somewhere online with a link to it
Gulsvi
@gulsvi
May 13 2018 22:24
Yeah, hopefully gitlab adds some cool new features to make gitter more competitive