CODEWITHSUNDEEP
htmlcssruby-on-railsruby
shanekrusen
shanekrusen

Reputation: 11

Random Background Color for each instance of a div in Ruby on Rails

I've been working on a small web-app that is like a yelp-clone and on the front page it lists all of the places in the database in their own div:

<% @places.each do |place| %>
  <div class="booyah-box <%= place.id %> col-xs-10 col-xs-offset-1">
    <h1><%= place.name %></h1>`
    <i><%= place.address %></i><br /><br />
    <p><%= place.description %></p><br />
    <p><%= place.id %></p>
  </div>
<% end %>

I have set up an array with html color codes as an instance variable for the front page:

class PlacesController < ApplicationController
  def index
    @places = Place.all
    @background_colors = ["#df494e", "#68a5b7", "#8f978e", "#d8b6ad", "#677b94", "#677b94F", "#66be98", "#fcd06d", "#f8a427", "#d42b14"]
  end
end

I have also included this style tag in my index.html.erb to dictate the style of the div that wraps each database entry on the front page:

<style type="text/css">
  .booyah-box {
    background-color: <%= @background_colors.sample %>;
    -moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
    -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
    box-shadow: 1px 1px 2px 0 #d0d0d0;
    border: 1px solid #ccc;
    border-color: #eccbaa;
    margin-top: 10px;
  }
</style>

Every time the page loads, the code works and the div wrapper has a different background color each time. However, I am trying to make it so that each instance of the div wrapper is a different color from the array, but I'm not sure how to go about it. I've tried all kinds of enumerations and using instance variables, but I can't get it to work. I'm trying to do this using just Ruby, if at all possible. How would I go about it?

Upvotes: 1

Views: 1141

Answers (1)

thanhnha1103
thanhnha1103

Reputation: 1055

Try this: places_controller.rb

class PlacesController < ApplicationController
  def index
    @places = Place.all
  end
end

index.html.erb

<% @places.each do |place| %>
  <div class="booyah-box <%= place.id %> col-xs-10 col-xs-offset-1 color-<%= (1..10).to_a.sample %>">
    <h1><%= place.name %></h1>`
    <i><%= place.address %></i><br /><br />
    <p><%= place.description %></p><br />
    <p><%= place.id %></p>
  </div>
<% end %>

css

.booyah-box {
  -moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
  -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
  box-shadow: 1px 1px 2px 0 #d0d0d0;
  border: 1px solid #ccc;
  border-color: #eccbaa;
  margin-top: 10px;
}
.booyah-box.color-1 { background-color: #df494e;}
.booyah-box.color-2 { background-color: #68a5b7;}
.booyah-box.color-3 { background-color: #8f978e;}
.booyah-box.color-4 { background-color: #d8b6ad;}
.booyah-box.color-5 { background-color: #677b94;}
.booyah-box.color-6 { background-color: #677b94;}
.booyah-box.color-7 { background-color: #66be98;}
.booyah-box.color-8 { background-color: #fcd06d;}
.booyah-box.color-9 { background-color: #f8a427;}
.booyah-box.color-10 { background-color: #d42b14;}

Hope this help. :)

Upvotes: 2

Related Questions