SASS BAR CHART: Bars not showing up

Projects
,
#1

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/learn-sass/projects/sass-bar-chart

<In what way does your code behave incorrectly? Include ALL error messages.>
The bars are not showing up in the browser. What’s going wrong? Similar thing happened in the last project. Getting no support from Codecademy team so far despite paying for pro.

index.html



<head>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
	<h1>Top Ten Most Produced Foods in the World, by Tonnes</h1>
	<rect></rect>
	<rect></rect>
	<rect></rect>
	<rect></rect>
	<rect></rect>
	<rect></rect>
	<rect></rect>
	<rect></rect>
	<rect></rect>
	<rect></rect>
	<rect></rect>
</body>
main.scss ```

$top-foods: (“Sugar Cane” 1898),
(“Corn” 1017),
(“Rice” 738),
(“Wheat” 711),
(“Cow Milk” 635),
(“Potatoes” 374),
(“Vegetables” 279),
(“Soy Beans” 278),
(“Cassava” 263),
(“Sugar Beets” 247);
@each $food, $tons-produced in $top-foods{
$i: index($top-foods,($food $tons-produced))
rect:nth-child(#{$i + 1}) {
height: #{$tons-produced} / 3px;
@if($i % 2 == 0){
color: fade-out($sea-green, $i5/100);
}
@else if($i % 3 == 0){
color: fade-out($pale-green, $i5/100);
}
@else{
background-color: fade-out($diamond-blue, $i*5/100);
}
&:before {
content: $food;
}
&:after {
content : $tons-produced + “m”;
}
}
}
$diamond-blue: rgba(0, 159, 255, .6);
$sea-green: rgba(10, 165, 153, .6);
$pale-green: rgba(167, 240, 213, .6);
h1 {
font-family: ‘Montserrat’, sans-serif;
font-size: 18px;
padding-bottom: 20px;
color: #434444;
}

span {
display: block;
}

rect {
width: 24px;
float: left;
padding-left: 25px;
padding-top: 7px;
white-space: nowrap;
word-break: break-all;
position: relative;
bottom: 0px;
font-size: 12px;
color: #707070;
font-family: ‘Montserrat’, sans-serif;
&:before {
display: inline-block;
-webkit-transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}
&:after {
position: absolute;
top: -15px;
left: 0px;
}
}

<do not remove the three backticks above>
#2

Change every instruction inside your if,else if, else statement to “background”:

@if($i % 2 == 0){
background: fade-out($sea-green, $i5/100);
}
@else if($i % 3 == 0){
background: fade-out($pale-green, $i5/100);
}
@else{
background: fade-out($diamond-blue, $i*5/100);
}

Also, your height line should look like this:

height: #{$tons-produced/3}px;

This lesson is broken, and hints guide you in the wrong direction. You should report that you found a bug.

8 Likes
#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.