These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Jun 2018
Corey Lewis
@cursiv3
Jun 03 2018 00:01 UTC
weekdays[day - 1] would give you the current day
but since you have the getDays and getMonths calls all in the function that's being repeatedly called,t hose are going to be repeatedly called as well
just something to think about
Bjorn van de Peut
@bjorno43
Jun 03 2018 00:07 UTC
Actually, just myDates(months, Months[Month]); and myDates(days, weekdays[day]); will work just fine. Bot arrays and and the Date object start at 0
Abdus Samad
@asamad123
Jun 03 2018 00:09 UTC
nope
im lost haha
so what shall i do to return in letters
Bjorn van de Peut
@bjorno43
Jun 03 2018 00:10 UTC
Works fine here
image.png
Abdus Samad
@asamad123
Jun 03 2018 00:10 UTC
does it show the weekdays in words?
@bjorno43 interesting. Will give it a try on my side. Thanks for the help
Bjorn van de Peut
@bjorno43
Jun 03 2018 00:11 UTC
No problem :)
Abdus Samad
@asamad123
Jun 03 2018 00:11 UTC
@markclynch @bjorno43 thanks
time to sleep now. Mission Accomplished
Bjorn van de Peut
@bjorno43
Jun 03 2018 00:11 UTC
Gn8!
Abdus Samad
@asamad123
Jun 03 2018 00:11 UTC
G'night
Moisés Man
@moigithub
Jun 03 2018 00:12 UTC
i think weekdays start with sunday
(new Date("03 June 2018")).getDay()
// 0
Bjorn van de Peut
@bjorno43
Jun 03 2018 00:13 UTC
Ye probably. I made it work technically. Never said I fixed the arrays :P
I mean, I'd probably do it completely different, haha
Bjorn van de Peut
@bjorno43
Jun 03 2018 00:24 UTC

Something like:

new Date().toString()
// Sun Jun 03 2018 02:22:35 GMT+0200 (West-Europa (zomertijd))

Ghehe

Zack Adams
@mindforcode
Jun 03 2018 05:36 UTC
Whats happening code cowd
Lisa Copeland
@lisacopeland
Jun 03 2018 05:37 UTC
@mindforcode Hi
Zack Adams
@mindforcode
Jun 03 2018 05:37 UTC
Whats everyone working on?
Lisa Copeland
@lisacopeland
Jun 03 2018 05:37 UTC
Implementing Ecommerce
I'm feeling powerful because I can call an API to charge people's credit cards
Zack Adams
@mindforcode
Jun 03 2018 05:59 UTC
lol!
is there any advantage to a developer on a MS OS using powershell over git bash?
Im super new so all im doing is basically running simple node toy programs
But I suppose I am curious about future endevours
Aita Kane
@aita-kane
Jun 03 2018 08:03 UTC
hello can someone help me please, my php page are not using my css file . What can be the solution to that?
Dimitris Nik.
@dimitrissnk
Jun 03 2018 10:12 UTC
Hello, isn't there any HTML only code for clearing the previous word typed in an HTML input form? Do I have to use necessarily JS ?
aenkirch
@aenkirch
Jun 03 2018 10:37 UTC
@aita-kane Have you included the use or your CSS file in the <head> ?
include*engine
@newtothat
Jun 03 2018 11:09 UTC
what happened to fcc it kinda changed or what?
i see a little different everything in there
include*engine
@newtothat
Jun 03 2018 11:31 UTC
where can i find front-end and back end stuff?
aenkirch
@aenkirch
Jun 03 2018 11:50 UTC
@newtothat Yup, new version deployed
aenkirch
@aenkirch
Jun 03 2018 14:12 UTC
Guys, could you help me with the "Create Strings using Template Literals" level : I can't manage to pass it with this code : https://repl.it/repls/DizzyNiftyLocatorprogram
include*engine
@newtothat
Jun 03 2018 14:32 UTC
what it is called when you read a short story about a book in front page of it
@newtothat yea, they released the new version
hensn5250
@hensn5250
Jun 03 2018 14:38 UTC
anyone know how to log in to FCC without creating a new email?
use an old email?
theres an option to sign in with like github or something you have used in the past
@aenkirch maybe try not re-declaring the variable at the bottom - and just call the function
i suppose thats supposed to be there if you didnt add it
hensn5250
@hensn5250
Jun 03 2018 14:46 UTC
@aenkirch
//String literal syntax:    
//content of string literal is wraped in tick marks (`) instead of double(") or single(') quotes
//${ } ...  anything between the open and closing brackets can be treated as an expression  , e.g.   ${  1  + 2 * aNumber }
//`stringText ${aVariable }`
let greeting  = `Hello world. Toaday is ${ dayOfWeek}`;
hensn5250
@hensn5250
Jun 03 2018 15:00 UTC
@aenkirch i think you may be using the wrong for loop
aenkirch
@aenkirch
Jun 03 2018 15:00 UTC
@moT01 @hensn5250 Thanks guys for help, I managed to pass this exercise, I just had to use 'map' and not an array with 'push'
https://repl.it/repls/DizzyNiftyLocatorprogram here is my code if you are interested by the way I coded it ;)
hensn5250
@hensn5250
Jun 03 2018 15:03 UTC
@aenkirch cool. you could also use for...of which is for arrays
aenkirch
@aenkirch
Jun 03 2018 15:15 UTC
Any french user here ? Just looking for interested FCC users who would be up for creating an FCC telegram group for french (or international) users !
aenkirch
@aenkirch
Jun 03 2018 15:45 UTC
By the way, is there already an FCC Telegram group, and does anybody would be up for this ?
arowolodaniel
@arowolodaniel
Jun 03 2018 21:32 UTC
Yeah sure
arrayStartsAtOne
@arrayStartsAtOne
Jun 03 2018 21:59 UTC
+1 for the international group @aenkirch
DarkxPunk
@DarkxPunk
Jun 03 2018 22:52 UTC
Hey everyone, I am having one of those moments where I cant decide how to tackle page organization. Anyone wanna chat about this?
@DarkxPunk whats up
DarkxPunk
@DarkxPunk
Jun 03 2018 22:55 UTC
Well I am arguing with myself on how best to organize a page. I am trying to come up with a clean, versitile general layout that I can incorporate into a wordpress theme. There are so many ways to approach it I can’t seem to pick a single one.
by organize - you mean visual layout?
DarkxPunk
@DarkxPunk
Jun 03 2018 22:56 UTC
I mean semanticly
I am going to post a codepen with a bunch of the layouts, there are tons.
semantically meaning the code itself
DarkxPunk
@DarkxPunk
Jun 03 2018 22:58 UTC
Yeah
lets see the pen
Here is two as an example
This can get even more complicated once I start adding comments, post navigation, etc.
in my opinion - the elements you use aren't as important as how you use them - span vs div vs section - you could use a number of different elements and get almost the same thing - some might have some default style im not sure - but mostly its the style you apply
it does seem like you are maybe using some useless elements
for instance... why...
<header>
  <nav>
and not just <nav> by itself
DarkxPunk
@DarkxPunk
Jun 03 2018 23:08 UTC
Well I know well enough I can achieve visually what I want with far less code, but I am fighting with myself over proper semantics. Because yes some sections may be useless for visual purposes but lets add accessability into the mix, screen readers, or page summarizing software, etc.
Once we add those into the mix the necessity for proper nested headers, footers, articles, sections, whatever, become important to scope context etc.
Problem is the spec is so loose on how to use all of those things I am trying to justify to myself a logical organization XD
k, well if you have a purpose for them being there - then they aren't useless
yea, like i was saying - the names of the elements you use don't matter a whole lot if its just sort of a container
some obviously have specific purposes.... input - <a> - <img>
DarkxPunk
@DarkxPunk
Jun 03 2018 23:11 UTC
Yeah I agree, but this is for proper semantics, do you have a perfered structure?
the two you are showing there - theyre pretty similar, ...i like the first one cause there's less elements - but if you need more for laying things out or putting things in containers or something then you need to use what you need to use
i just use a <div> like 60% of the time so im not sure i have the best methods
DarkxPunk
@DarkxPunk
Jun 03 2018 23:15 UTC
Youre still thinking about visual. Think semantically especially if you consider accessability / screen readers.
arowolodaniel
@arowolodaniel
Jun 03 2018 23:16 UTC
@DarkxPunk can you help me with a jQuery code which is running please
im not sure i understand what you mean - or just dont know the difference
like do certain elements not work with screen readers or something?
DarkxPunk
@DarkxPunk
Jun 03 2018 23:18 UTC
Well visually we can quite easily build a page with just the title (h2), a couple <p> elements with classes and the like and have all the spacing and positions done quite easily. However for a screen reader (for someone that is blind) these are just random elements thrown onto a page with no context, to semantic reason to be there. That is partially why tags like <main> <section> <article> <header> <footer> <nav> <aside> were invented.
The tags provide context. However when is nested tags too much contaxt XD
That is what I am arguing with myself about.
yea, im not sure how much I can help you there
DarkxPunk
@DarkxPunk
Jun 03 2018 23:19 UTC
That’s fine. Maybe someone will come across this and have ideas XD
Thanks anyway.
ive never used a screen reader - they might not be universal - meaning some might put more emphasis on certain elements than others
arowolodaniel
@arowolodaniel
Jun 03 2018 23:20 UTC

<!DOCTYPE html>

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poller+One" rel="stylesheet">
<style>
.beep {
width: 5px;
height: 0;
border: 5px solid transparent;
border-top: 10px solid yellow;
border-bottom: 80px solid red;
position:relative;
left: 140px;
}
@keyframes blink {
50% {
background: radial-gradient(circle, red 15%, transparent 40%), #cc5;
}
}
@-webkit-keyframes blink {
50% {
background: -webkit-radial-gradient(circle, red 15%, transparent 40%), #cc5;
}
}
@-moz-keyframes blink {
50% {
background: -moz-radial-gradient(circle, red 15%, transparent 40%), #cc5;
}
}
.laser {
animation: blink .5s infinite;
-webkit-animation: blink .5s infinite;
-moz-animation: blink .5s infinite;
}
.brain {
background: radial-gradient(circle, red 15%, transparent 40%), yellow;
background: -webkit-radial-gradient(circle, red 15%, transparent 40%), yellow;
background:-moz-radial-gradient(circle, red 15%, transparent 40%), yellow;
background-size: 75px 150px;
height: 150px;
width: 150px;
border-bottom:40px double blue;
border-radius: 60px 60px 10px 10px;
position: relative;
left: 70px;
}
.torso {
height: 0;
width: 140px;
border-top: 300px solid rgba(225, 225, 0,1);
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-radius: 20px 20px 100px 100px;
}
.foot {
height: 40px;
width: 40px;
background: red;
border-radius: 40px;
border: 15px solid cyan;
position:relative;
left:110px;
top:-10px;
z-index: -1;
}
.robot {
position: relative;
left:200px;
z-index: 1;
}
.left {
font-family:'Poller One', verdana, arial, sans-serif;
font-weight: bold;
font-size: 250px;
color: red;
transform: rotate(200deg);
-webkit-transform: rotate(200deg);
-moz-transform: rotate(200deg);
position: relative;
left: -190px;
top: -320px;
z-index:-1;
}
.right {
font-family:'Poller One', verdana, arial, sans-serif;
font-weight: bold;
font-size: 250px;
color: red;
transform: scaleY(-1) rotate(20deg);
-webkit-transform: scaleY(-1) rotate(20deg);
-moz-transform: scaleY(-1) rotate(20deg);
position: relative;
right: -190px;
top: -620px;
z-index:-1;
}
@keyframes dance {
from {
left: 800px;
}
}
-@-webkit-keyframes dance {
from {
left: 800px;
}
}
-@-moz-keyframes dance {
from {
left: 800px;
}
}

img {
position : absolute;
top: 200px;
left: 400px;
animation: dance 4s infinite;
-webkit-animation: dance 4s infinite;
-moz-animation: dance 4s infinite;
}
</style>
</head>

<body>
<div class="robot">
<div class="laser"></div>
<div class="beep"></div>
<div class="brain"></div>
<div class="torso">
<div class="left">j</div>
<div class="right">j</div>
</div>
<div class="foot"></div>
</div>
<button class="flash"> laser eyes on/off</button>
<button class="color"> change color!</button>
<button class="moves"> break dance!</button>
<img src="https://i.imgur.com/FfNxebt.gif">
<script>
//on ever click on the button, put on/off the blink
$(".flash").click(function() {
$(".brain").toggleClass('laser');
});
/$(".color").click(function() {
var red = Math.floor(Math.random()
255);
var green = Math.floor(Math.random() 255);
var blue = Math.floor(Math.random()
255);
// display the number in an alert window
alert(red + "," + green + "," + blue);
});
/
$(".color").click(function() {
// assign each named color a random number 0-255
var red = Math.floor(Math.random()
255);
var green = Math.floor(Math.random() 255);
var blue = Math.floor(Math.random()
255);
// generate an RGBa value from red,green,blue
var randomRGBA = 'rgba('+red+','+green+','+blue+',1)';
//Display the three values in an alert window
//alert(randomRGBA);
});
$("body").css("background", (randomRGBA) {
alert(randomRGBA);
});
$(".moves").click(function() {
$("img").toggle();
});
</script>
</body>

i would try and find a site that explains how the readers interpret different elements
arowolodaniel
@arowolodaniel
Jun 03 2018 23:20 UTC
can someone help me with that code
Its not running
@arowolodaniel go edit the message and put three ` (top left key) before and after the code so it looks like...
this
formatted so we can read it
arowolodaniel
@arowolodaniel
Jun 03 2018 23:22 UTC
Okay thanks.... Bellow
DarkxPunk
@DarkxPunk
Jun 03 2018 23:22 UTC
@moT01 I have been doing that, read through at least 6 blogs just today on the subject but everyone has different opinions XD
arowolodaniel
@arowolodaniel
Jun 03 2018 23:22 UTC
``
DarkxPunk
@DarkxPunk
Jun 03 2018 23:22 UTC
This is why it is so hard to decide which system to use.
arowolodaniel
@arowolodaniel
Jun 03 2018 23:22 UTC

`<!DOCTYPE html>

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poller+One" rel="stylesheet">
<style>
.beep {
width: 5px;
height: 0;
border: 5px solid transparent;
border-top: 10px solid yellow;
border-bottom: 80px solid red;
position:relative;
left: 140px;
}
@keyframes blink {
50% {
background: radial-gradient(circle, red 15%, transparent 40%), #cc5;
}
}
@-webkit-keyframes blink {
50% {
background: -webkit-radial-gradient(circle, red 15%, transparent 40%), #cc5;
}
}
@-moz-keyframes blink {
50% {
background: -moz-radial-gradient(circle, red 15%, transparent 40%), #cc5;
}
}
.laser {
animation: blink .5s infinite;
-webkit-animation: blink .5s infinite;
-moz-animation: blink .5s infinite;
}
.brain {
background: radial-gradient(circle, red 15%, transparent 40%), yellow;
background: -webkit-radial-gradient(circle, red 15%, transparent 40%), yellow;
background:-moz-radial-gradient(circle, red 15%, transparent 40%), yellow;
background-size: 75px 150px;
height: 150px;
width: 150px;
border-bottom:40px double blue;
border-radius: 60px 60px 10px 10px;
position: relative;
left: 70px;
}
.torso {
height: 0;
width: 140px;
border-top: 300px solid rgba(225, 225, 0,1);
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-radius: 20px 20px 100px 100px;
}
.foot {
height: 40px;
width: 40px;
background: red;
border-radius: 40px;
border: 15px solid cyan;
position:relative;
left:110px;
top:-10px;
z-index: -1;
}
.robot {
position: relative;
left:200px;
z-index: 1;
}
.left {
font-family:'Poller One', verdana, arial, sans-serif;
font-weight: bold;
font-size: 250px;
color: red;
transform: rotate(200deg);
-webkit-transform: rotate(200deg);
-moz-transform: rotate(200deg);
position: relative;
left: -190px;
top: -320px;
z-index:-1;
}
.right {
font-family:'Poller One', verdana, arial, sans-serif;
font-weight: bold;
font-size: 250px;
color: red;
transform: scaleY(-1) rotate(20deg);
-webkit-transform: scaleY(-1) rotate(20deg);
-moz-transform: scaleY(-1) rotate(20deg);
position: relative;
right: -190px;
top: -620px;
z-index:-1;
}
@keyframes dance {
from {
left: 800px;
}
}
-@-webkit-keyframes dance {
from {
left: 800px;
}
}
-@-moz-keyframes dance {
from {
left: 800px;
}
}

img {
position : absolute;
top: 200px;
left: 400px;
animation: dance 4s infinite;
-webkit-animation: dance 4s infinite;
-moz-animation: dance 4s infinite;
}
</style>
</head>

<body>

<div class="robot">
<div class="laser"></div>
<div class="beep"></div>
<div class="brain"></div>
<div class="torso">
<div class="left">j</div>
<div class="right">j</div>
</div>
<div class="foot"></div>
</div>

<button class="flash"> laser eyes on/off</button>

<button class="color"> change color!</button>

<button class="moves"> break dance!</button>
<img src="https://i.imgur.com/FfNxebt.gif">

<script>
//on ever click on the button, put on/off the blink
$(".flash").click(function() {
$(".brain").toggleClass('laser');
});
/$(".color").click(function() {
var red = Math.floor(Math.random()
255);
var green = Math.floor(Math.random() 255);
var blue = Math.floor(Math.random()
255);
// display the number in an alert window
alert(red + "," + green + "," + blue);
});
/
$(".color").click(function() {
// assign each named color a random number 0-255
var red = Math.floor(Math.random()
255);
var green = Math.floor(Math.random() 255);
var blue = Math.floor(Math.random()
255);
// generate an RGBa value from red,green,blue
var randomRGBA = 'rgba('+red+','+green+','+blue+',1)';
//Display the three values in an alert window
//alert(randomRGBA);
});
$("body").css("background", (randomRGBA) {
alert(randomRGBA);
});
$(".moves").click(function() {
$("img").toggle();
});
</script>
</body> `

DarkxPunk
@DarkxPunk
Jun 03 2018 23:23 UTC
I dont think this bloke gets it XD
is your project sort of targeted towards blind?
arowolodaniel
@arowolodaniel
Jun 03 2018 23:23 UTC
this
cause blind are probly a very very small percent of people that will use your site
DarkxPunk
@DarkxPunk
Jun 03 2018 23:23 UTC
Well I am trying to experiment with building accessible themes for Wordpress.
Dipping my toes in this XD
arowolodaniel
@arowolodaniel
Jun 03 2018 23:23 UTC

`<!DOCTYPE html>

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poller+One" rel="stylesheet">
<style>
.beep {
width: 5px;
height: 0;
border: 5px solid transparent;
border-top: 10px solid yellow;
border-bottom: 80px solid red;
position:relative;
left: 140px;
}
@keyframes blink {
50% {
background: radial-gradient(circle, red 15%, transparent 40%), #cc5;
}
}
@-webkit-keyframes blink {
50% {
background: -webkit-radial-gradient(circle, red 15%, transparent 40%), #cc5;
}
}
@-moz-keyframes blink {
50% {
background: -moz-radial-gradient(circle, red 15%, transparent 40%), #cc5;
}
}
.laser {
animation: blink .5s infinite;
-webkit-animation: blink .5s infinite;
-moz-animation: blink .5s infinite;
}
.brain {
background: radial-gradient(circle, red 15%, transparent 40%), yellow;
background: -webkit-radial-gradient(circle, red 15%, transparent 40%), yellow;
background:-moz-radial-gradient(circle, red 15%, transparent 40%), yellow;
background-size: 75px 150px;
height: 150px;
width: 150px;
border-bottom:40px double blue;
border-radius: 60px 60px 10px 10px;
position: relative;
left: 70px;
}
.torso {
height: 0;
width: 140px;
border-top: 300px solid rgba(225, 225, 0,1);
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-radius: 20px 20px 100px 100px;
}
.foot {
height: 40px;
width: 40px;
background: red;
border-radius: 40px;
border: 15px solid cyan;
position:relative;
left:110px;
top:-10px;
z-index: -1;
}
.robot {
position: relative;
left:200px;
z-index: 1;
}
.left {
font-family:'Poller One', verdana, arial, sans-serif;
font-weight: bold;
font-size: 250px;
color: red;
transform: rotate(200deg);
-webkit-transform: rotate(200deg);
-moz-transform: rotate(200deg);
position: relative;
left: -190px;
top: -320px;
z-index:-1;
}
.right {
font-family:'Poller One', verdana, arial, sans-serif;
font-weight: bold;
font-size: 250px;
color: red;
transform: scaleY(-1) rotate(20deg);
-webkit-transform: scaleY(-1) rotate(20deg);
-moz-transform: scaleY(-1) rotate(20deg);
position: relative;
right: -190px;
top: -620px;
z-index:-1;
}
@keyframes dance {
from {
left: 800px;
}
}
-@-webkit-keyframes dance {
from {
left: 800px;
}
}
-@-moz-keyframes dance {
from {
left: 800px;
}
}

img {
position : absolute;
top: 200px;
left: 400px;
animation: dance 4s infinite;
-webkit-animation: dance 4s infinite;
-moz-animation: dance 4s infinite;
}
</style>
</head>

<body>

<div class="robot">
<div class="laser"></div>
<div class="beep"></div>
<div class="brain"></div>
<div class="torso">
<div class="left">j</div>
<div class="right">j</div>
</div>
<div class="foot"></div>
</div>

<button class="flash"> laser eyes on/off</button>

<button class="color"> change color!</button>

<button class="moves"> break dance!</button>
<img src="https://i.imgur.com/FfNxebt.gif">

<script>
//on ever click on the button, put on/off the blink
$(".flash").click(function() {
$(".brain").toggleClass('laser');
});
/$(".color").click(function() {
var red = Math.floor(Math.random()
255);
var green = Math.floor(Math.random() 255);
var blue = Math.floor(Math.random()
255);
// display the number in an alert window
alert(red + "," + green + "," + blue);
});
/
$(".color").click(function() {
// assign each named color a random number 0-255
var red = Math.floor(Math.random()
255);
var green = Math.floor(Math.random() 255);
var blue = Math.floor(Math.random()
255);
// generate an RGBa value from red,green,blue
var randomRGBA = 'rgba('+red+','+green+','+blue+',1)';
//Display the three values in an alert window
//alert(randomRGBA);
});
$("body").css("background", (randomRGBA) {
alert(randomRGBA);
});
$(".moves").click(function() {
$("img").toggle();
});
</script>
</body>`

@arowolodaniel the three little dots at the top right of your message allow you to edit/delete messages
DarkxPunk
@DarkxPunk
Jun 03 2018 23:25 UTC
Oh I am quite aware. But ontop of accessibility there is also SEO conciderations that come with building a site that follows good semantic layout XD. There are reasons to come to some sort of conclusion for it, but I dont think that will be today. Hopefully this bloke figures out this chat XD. Thanks for the input. Peace.
@DarkxPunk yea, i dont know what to tell ya - i would build both layouts and try to find a screen reader or two and see what the result it
arowolodaniel
@arowolodaniel
Jun 03 2018 23:25 UTC
I can't see it... Am on Mobile App
DarkxPunk
@DarkxPunk
Jun 03 2018 23:26 UTC
I’m on mobile now myself. Yeah you kinda are limited in how you can post stuff. If you are on mobile I’d recommend throwing it onto a code pen and posting that.
three ticks (`) => new line (shift+enter) => code => new line => three more ticks
DarkxPunk
@DarkxPunk
Jun 03 2018 23:27 UTC
@moT01 Sadly he can’t do that with mobile XD
Why would they limit the mobile chat so much
arowolodaniel
@arowolodaniel
Jun 03 2018 23:28 UTC
<!DOCTYPE html>

<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Poller+One" rel="stylesheet">
<style>
.beep {
     width: 5px;
     height: 0;
    border: 5px solid transparent;
    border-top: 10px solid yellow;
    border-bottom: 80px solid red;
    position:relative;
    left: 140px;
      }
     @keyframes blink {
  50% {
    background: radial-gradient(circle, red 15%, transparent 40%), #cc5;
  }
}
@-webkit-keyframes blink {
  50% {
    background: -webkit-radial-gradient(circle, red 15%, transparent 40%), #cc5;
  }
}
@-moz-keyframes blink {
  50% {
    background: -moz-radial-gradient(circle, red 15%, transparent 40%), #cc5;
  }
}
.laser {
    animation: blink .5s infinite;
      -webkit-animation: blink .5s infinite;
      -moz-animation: blink .5s infinite;
}
  .brain {
          background: radial-gradient(circle, red 15%, transparent 40%), yellow;
     background: -webkit-radial-gradient(circle, red 15%, transparent 40%), yellow;
      background:-moz-radial-gradient(circle, red 15%, transparent 40%), yellow;
      background-size: 75px 150px;
    height: 150px;
  width: 150px;
  border-bottom:40px double blue;
  border-radius: 60px 60px 10px 10px;
  position: relative;
  left: 70px;
  }
  .torso {
  height: 0;
  width: 140px;
  border-top: 300px solid rgba(225, 225, 0,1);
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-radius: 20px 20px 100px 100px;
    }
  .foot {
  height: 40px;
  width: 40px;
  background: red;
  border-radius: 40px;
  border: 15px solid cyan;
  position:relative;
  left:110px;
  top:-10px;
  z-index: -1;
}
  .robot {
              position: relative;
              left:200px;
              z-index: 1;
      }
      .left {
font-family:'Poller One', verdana, arial, sans-serif;
font-weight: bold;
font-size: 250px;
color: red;
transform: rotate(200deg);
-webkit-transform: rotate(200deg);
-moz-transform: rotate(200deg);
position: relative;
left: -190px;
top: -320px;
z-index:-1;
}
.right {
    font-family:'Poller One', verdana, arial, sans-serif;
font-weight: bold;
font-size: 250px;
color: red;
transform: scaleY(-1) rotate(20deg);
-webkit-transform: scaleY(-1) rotate(20deg);
-moz-transform: scaleY(-1) rotate(20deg);
position: relative;
right: -190px;
top: -620px;
z-index:-1;
}
@keyframes dance {
  from {
    left: 800px;
  }
}
-@-webkit-keyframes dance {
  from {
    left: 800px;
  }
}
-@-moz-keyframes dance {
  from {
    left: 800px;
  }
}

img {
  position : absolute;
  top: 200px;
  left: 400px;
  animation: dance 4s infinite;
  -webkit-animation: dance 4s infinite;
  -moz-animation: dance 4s infinite;
}
</style>
</head>

<body>
<div class="robot">
    <div class="laser"></div>
    <div class="beep"></div>
    <div class="brain"></div>
    <div class="torso">
        <div class="left">j</div>
        <div class="right">j</div>
    </div>
    <div class="foot"></div>
</div>
<button class="flash"> laser eyes on/off</button>
<button class="color"> change color!</button>
<button class="moves"> break dance!</button>
<img src="https://i.imgur.com/FfNxebt.gif">
<script>
    //on ever click on the button, put on/off the blink
    $(".flash").click(function() {
  $(".brain").toggleClass('laser');
});
    /*$(".color").click(function() {
  var red = Math.floor(Math.random() * 255);
  var green = Math.floor(Math.random() * 255);
  var blue = Math.floor(Math.random() * 255);
  // display the number in an alert window
  alert(red + "," + green + "," + blue);
});
*/
$(".color").click(function() {
  // assign each named color a random number 0-255
  var red = Math.floor(Math.random() * 255);
  var green = Math.floor(Math.random() * 255);
  var blue = Math.floor(Math.random() * 255);
  // generate an RGBa value from red,green,blue
  var randomRGBA = 'rgba('+red+','+green+','+blue+',1)';
  //Display the three values in an alert window
  //alert(randomRGBA);
});
$("body").css("background", (randomRGBA) {
alert(randomRGBA);
});
$(".moves").click(function() {
  $("img").toggle();
});
</script>
</body>
I got it 😊
DarkxPunk
@DarkxPunk
Jun 03 2018 23:29 UTC
Hey hey he figured it out clap
@arowolodaniel so whats the problem
arowolodaniel
@arowolodaniel
Jun 03 2018 23:29 UTC
please help me check the code
the code is running
is not running rather
this part is giving me an error on codepen
$("body").css("background", (randomRGBA) {
alert(randomRGBA);
});
not proper syntax
this might work...
$("body").css("background", randomRGBA);
arowolodaniel
@arowolodaniel
Jun 03 2018 23:36 UTC
okay gonna check it out.... @moT01
thanks