Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Zeeshan Dawood
7,210 PointsI'm trying to use jquery to take a list of colors from an index and apply them to the backgrounds of my list items.
(not in random order, but in order in which they are in the index)The list items each are separated using a flex container. I'm not sure why its not working. In theory: I would run a loop that goes through the li . and every time it went through the loop it would apply the a specific color from the index. to one of the li.
Have I link the JQuery correctly. WHat am I missing?
<doc html>
<head>
<title>Zeeshan Dawood</title>
<link rel="stylesheet" type="text/css" href="mystylesheet1.css">
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<div class="main-wrapper">
<div class="color-boxes" id="color-strip">
<ul class="flex-container">
<li class="flex-item">1</p></li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
</div>
<div class="main-header">
<h1>Zeeshan</h1>
<h1>Dawood</h1>
<ul>
<li>Artist</li>
<li>Designer</li>
<li>Developer</li>
</ul>
</div>
<div class="main-bottom">
<p>places to place the links</p>
</div>
</div>
<script src="myscript.js"></script>
<script src="jquery.js"></script>
</body>
</html>
*{
padding:0px;
margin:0px;
}
/********************************
BACKGROUND
*********************************/
.main-wrapper{
background-color:white;
width:90%;
height:90%;
margin:auto;
}
/********************************
Color Boxes Bar
*********************************/
.color-boxes{
background-color:red;
}
.flex-container{
background-color:yellow;
padding:0;
margin:0;
list-style:none;
display: flex;
justify-content: space-around;
}
.flex-item{
background-color:blue;
padding:0px;
width:auto;
height:100%;
/*I am not understanding what happens here when the height is turned on ***/
margin:0px;
flex-grow:1;
color:white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
/********************************
Main Header
*********************************/
.main-header{
background-color:black;
color:white;
padding:0;
text-align:center;
text-transform:uppercase;
}
.main-header li
{
display:inline-block;
}
/********************************
Main bottom
*********************************/
.main-bottom{
background-color:gray;
color:white;
margin:0;
padding:0;
border:none;
padding: 1px;
height:45%;
}
/********************************
Media Query 1
*********************************/
$(document).ready(function(){
var color=['red','green','blue','yellow'];
$('.flex-item').each(function(i){
$(this).css('backgroundColor',color[i]);
});
});
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Zeeshan,
You need to have jquery linked before your script. Try reversing your script tags.
I tested your jquery against the list and it seems to be doing what you want. Only the 1st four list items have colors though because that's all you have in your array.
anthony crowell
Courses Plus Student 10,953 PointsHi, first if you are running this you have a </p> in your first <li></li>, may cause an issue. As for the height 100% it allows the list grow dynamically if more list items are added. An alternative would be to give it a fixed size but only if your list never changes.
anthony crowell
Courses Plus Student 10,953 PointsSorry my post didn't fully print out, you have a closing p tag in your first list item.
Zeeshan Dawood
7,210 PointsAwesome! Thank you guys!! I appreciate it!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsAlso, just noticed your css files. You want to have normalize.css first. Then you'll override what's in normalize with your own custom styles. You don't want the reverse happening. :)