These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Jun 2018
Corey Lewis
@cursiv3
Jun 03 2018 00:01
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
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
nope
im lost haha
so what shall i do to return in letters
Bjorn van de Peut
@bjorno43
Jun 03 2018 00:10
Works fine here
image.png
Abdus Samad
@asamad123
Jun 03 2018 00:10
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
No problem :)
Abdus Samad
@asamad123
Jun 03 2018 00:11
@markclynch @bjorno43 thanks
time to sleep now. Mission Accomplished
Bjorn van de Peut
@bjorno43
Jun 03 2018 00:11
Gn8!
Abdus Samad
@asamad123
Jun 03 2018 00:11
G'night
Moisés Man
@moigithub
Jun 03 2018 00:12
i think weekdays start with sunday
(new Date("03 June 2018")).getDay()
// 0
Bjorn van de Peut
@bjorno43
Jun 03 2018 00:13
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

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
Whats happening code cowd
Lisa Copeland
@lisacopeland
Jun 03 2018 05:37
@mindforcode Hi
Zack Adams
@mindforcode
Jun 03 2018 05:37
Whats everyone working on?
Lisa Copeland
@lisacopeland
Jun 03 2018 05:37
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
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
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
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
@aita-kane Have you included the use or your CSS file in the <head> ?
include*engine
@newtothat
Jun 03 2018 11:09
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
where can i find front-end and back end stuff?
aenkirch
@aenkirch
Jun 03 2018 11:50
@newtothat Yup, new version deployed
aenkirch
@aenkirch
Jun 03 2018 14:12
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
what it is called when you read a short story about a book in front page of it
Tom
@moT01
Jun 03 2018 14:38
@newtothat yea, they released the new version
hensn5250
@hensn5250
Jun 03 2018 14:38
anyone know how to log in to FCC without creating a new email?
Tom
@moT01
Jun 03 2018 14:39
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
@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
@aenkirch i think you may be using the wrong for loop
aenkirch
@aenkirch
Jun 03 2018 15:00
@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
@aenkirch cool. you could also use for...of which is for arrays
aenkirch
@aenkirch
Jun 03 2018 15:15
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
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
Yeah sure
arrayStartsAtOne
@arrayStartsAtOne
Jun 03 2018 21:59
+1 for the international group @aenkirch
DarkxPunk
@DarkxPunk
Jun 03 2018 22:52
Hey everyone, I am having one of those moments where I cant decide how to tackle page organization. Anyone wanna chat about this?
Tom
@moT01
Jun 03 2018 22:54
@DarkxPunk whats up
DarkxPunk
@DarkxPunk
Jun 03 2018 22:55
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.
Tom
@moT01
Jun 03 2018 22:55
by organize - you mean visual layout?
DarkxPunk
@DarkxPunk
Jun 03 2018 22:56
I mean semanticly
I am going to post a codepen with a bunch of the layouts, there are tons.
Tom
@moT01
Jun 03 2018 22:57
semantically meaning the code itself
DarkxPunk
@DarkxPunk
Jun 03 2018 22:58
Yeah
Tom
@moT01
Jun 03 2018 23:00
lets see the pen
Here is two as an example
This can get even more complicated once I start adding comments, post navigation, etc.
Tom
@moT01
Jun 03 2018 23:06
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
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
Tom
@moT01
Jun 03 2018 23:09
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
Yeah I agree, but this is for proper semantics, do you have a perfered structure?
Tom
@moT01
Jun 03 2018 23:13
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
Youre still thinking about visual. Think semantically especially if you consider accessability / screen readers.
arowolodaniel
@arowolodaniel
Jun 03 2018 23:16
@DarkxPunk can you help me with a jQuery code which is running please
Tom
@moT01
Jun 03 2018 23:16
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
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.
Tom
@moT01
Jun 03 2018 23:19
yea, im not sure how much I can help you there
DarkxPunk
@DarkxPunk
Jun 03 2018 23:19
That’s fine. Maybe someone will come across this and have ideas XD
Thanks anyway.
Tom
@moT01
Jun 03 2018 23:20
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

<!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>

Tom
@moT01
Jun 03 2018 23:20
i would try and find a site that explains how the readers interpret different elements
arowolodaniel
@arowolodaniel
Jun 03 2018 23:20
can someone help me with that code
Its not running
Tom
@moT01
Jun 03 2018 23:21
@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
Okay thanks.... Bellow
DarkxPunk
@DarkxPunk
Jun 03 2018 23:22
@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
``
DarkxPunk
@DarkxPunk
Jun 03 2018 23:22
This is why it is so hard to decide which system to use.
arowolodaniel
@arowolodaniel
Jun 03 2018 23:22

`<!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
I dont think this bloke gets it XD
Tom
@moT01
Jun 03 2018 23:23
is your project sort of targeted towards blind?
arowolodaniel
@arowolodaniel
Jun 03 2018 23:23
this
Tom
@moT01
Jun 03 2018 23:23
cause blind are probly a very very small percent of people that will use your site
DarkxPunk
@DarkxPunk
Jun 03 2018 23:23
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

`<!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>`

Tom
@moT01
Jun 03 2018 23:24
@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
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.
Tom
@moT01
Jun 03 2018 23:25
@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
I can't see it... Am on Mobile App
DarkxPunk
@DarkxPunk
Jun 03 2018 23:26
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.
Tom
@moT01
Jun 03 2018 23:27
three ticks (`) => new line (shift+enter) => code => new line => three more ticks
DarkxPunk
@DarkxPunk
Jun 03 2018 23:27
@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
<!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
Hey hey he figured it out clap
Tom
@moT01
Jun 03 2018 23:29
@arowolodaniel so whats the problem
arowolodaniel
@arowolodaniel
Jun 03 2018 23:29
please help me check the code
the code is running
is not running rather
Tom
@moT01
Jun 03 2018 23:32
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
okay gonna check it out.... @moT01
thanks