Seeking guidance from the more experienced individuals here as I am just starting out. Any help would be greatly appreciated! This might seem simple to many of you, but for me it's quite challenging.
This is how my HTML code looks:
<html>
<head>
<title> Div, class, id </title>
<link rel="stylesheet" href="stylesheets/style.css"/>
<script type="text/javascript" src="javascripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="javascripts/jFunc.js"></script>
</head>
<body>
<div id="Blue" class="yellow"></div>
<div id="Red" class="Green"></div>
</body>
Here's a snippet from my CSS file:
body {
color: #a280e2;
font: 1.2em/1.4em 'Myriad Pro', Helvetica, Arial, Sans-serif,;
text-align: left;
margin: 0px;
}
.yellow {
background: yellow;
margin: 100 auto;
padding: 20px;
width: 100px;
height: 100px;
}
.green {
background: green;
margin: 100 auto;
padding: 20px;
width: 100px;
height: 100px;
}
#Blue {
background: #2700ff;
margin: 100 auto;
padding: 20px;
width: 100px;
height: 100px;
}
#Red {
background: #ff0000;
margin: 100 auto;
padding: 20px;
width: 100px;
height: 100px;
}
I've also attempted some javascript:
$(".yellow").on("click", function () {
$(this).toggleClass(".yellow");});
Essentially, my goal is to change the blue square to yellow when clicked and the red square to green. Additionally, a popup alert should appear indicating that the colors have changed upon clicking.
Thank you in advance for all your assistance :)