Sinatra wave 3

README.md

@@ -18,8 +18,8 @@ The requirements for this wave are:
     - Feel free to use some of the static HTML pages made for the previous exercise
   - At least **one** of the static pages must include at least **two** images
 
-<!--
-## Wave 2: Use CSS to apply style and struture to our website
+
+## Wave 2: Use CSS to apply style and structure to our website
 
 The requirements for this wave are:
 - Add `class` and/or `id` attributes to your html tags where appropriate
@@ -32,13 +32,14 @@ The requirements for this wave are:
   - Style your headings (`<h1>`, `<h2>`, etc.) so they are visually distinct.
   - don't use `<br>` tags to separate content; apply `margin` and `padding` where appropriate to space out content.
 
+
+
 ## Wave 3: DRY up your markup by utilizing layouts and ERB
 
 The requirements for this wave are:
+- Include a copyright/copyleft statement in your website footer. Utilize Ruby/ERB to ensure the year of the notice will always be current.
+- Utilize at least _two additional_ examples where you use ERB to interpret some Ruby code within your templates
 - Extract the common elements of your html pages into a _layout_.
-- Change your Sinatra app to serve ERB _views_ instead of static html.
+- Change your Sinatra app to serve ERB _views_ instead of static html (if you weren't already -- most folks were already doing this).
 - Extract your repeating `<header>` and `<footer>` code into a _partial_.
-- Use ERB to include your _partial_ in your _layout_.
-- Add and style a new page to your website using a Sinatra route and ERB view (content your choice).
-- Include a copyright/copyleft statement in your website footer. Utilize Ruby/ERB to ensure the year of the notice will always be current.
--->
+- Use ERB to include your `<header>` and `<footer>` _partial_ in your _layout_.

my-site.rb

@@ -7,15 +7,58 @@ class MySite < Sinatra::Base
   end
 
   get "/candies" do
+    @h1 = "Emily Loves Candies!!!"
+    @candies = ["White Chocolate", "Gummy Bear", "Snickers", "Cotton Candy", "Pink Gum", "Caramel Candy", "Peanut butter"]
+    random = rand(7)
+    @rand_candy = @candies[random]
+    @candies.delete_at(random)
     erb :candies
   end
 
   get "/stickers" do
+    @h1 = "Rona Loves Stickers!"
+    @title_array = ["___Theme___", "____color____", "_love measure 1-10_" ]
+    @array_stickers = [["princess", "pink", 9], ["Baloon", "blue with yellow dots", 8.5], ["broken umbrella", "green", 3], ["Hello Kitty", "pink", 10]]
     erb :stickers
   end
 
   get "/about" do
+    bday = Time.new(1984, 9, 28)
+    age = Time.new.year - bday.year
+    fact1 = "I am a mother of two amazing daughers"
+    fact2 = "I am a student in Ada Developer Academy"
+    fact3 = "I hate spiders but love cats"
+    fact4 = "I live in Seattle. I mean Kirkland"
+    fact5 = "I am #{age} years old"
+    @facts_array = [fact1, fact2, fact3, fact4, fact5]
+    @h1 = "about"
+
     erb :about
   end
 
+  get "/projects" do
+    h2_1 = "Have 3 kids"
+    h2_2 = "Teach Emily to ride on bikes"
+    h2_3 = "Become a software developer"
+    p_1 = "Growing up as a single child, I always new that someday I will have a big family" +
+          "so as much as it sounds weird, yes! \"Have 3 kids\" is a project that I'm working on" +
+          "(and not an easy one.... trust me). with 2 daughter , I have one more to go :-)"
+    p_2 = "Emily loves her bikes, but she needs instructions and help so she can feel" +
+          "safe and comfrtable. with a 1 year old baby at home it's hard to find time every" +
+          "weekend to learn her. So it's a project in process."
+    p_3 ="This is my dream job, the thing that I always wanted to achive." +
+          "Now this HUGE project is happening, and I couldn't be happier. 11 more months"
+    @h1 = "my projects"
+    @array_h2_p =[[h2_1, p_1],[h2_2, p_2], [h2_3, p_3]]
+    @verb =["cook", "build", "make", "create", "throw away", "destroy"]
+    @adjective =["sweet", "beautiful", "ugly", "green", "tall", "wet"]
+    @none =["boat", "table", "diaper", "tv", "pillow", "computer"]
+    erb :projects
+  end
+
+  get "/index" do
+    @h1 ="Welcome to our website"
+    erb :index
+  end
+
 end

public/css/stickers_candies.css

@@ -0,0 +1,167 @@
+body {
+  font-family: fantasy;
+  margin: 0 auto;
+  font-size: 14px;
+  padding: 50px;
+  background: #FFCCFF;
+  width: 960px;
+}
+
+#menu {
+  margin-bottom: 100;
+  height: 35px;
+  font-size: 16px;
+  font-family: Tahoma, Geneva, sans-serif;
+  font-weight: bold;
+  text-align: center;
+  text-shadow: 3px 2px 3px #9933CC;
+  background-color: #FFFFCC;
+      border-radius: 8px;
+}
+
+#menu a:hover {
+    color: #9900CC;
+    background-color: #FFF;
+}
+
+#menu ul {
+  height: auto;
+  padding: 8px 0px;
+  margin: 0px;
+}
+
+#menu li {
+display: inline;
+padding: 20px;
+}
+
+#menu a {
+    text-decoration: none;
+    color: #9900CC;
+    padding: 8px 8px 8px 8px;
+}
+
+#me {
+  text-align: center;
+  margin: auto;
+}
+
+#space {
+    margin-bottom: 300;
+}
+
+
+ul {
+  list-style:georgian;
+  font-family: fantasy;
+  font-size: 20px;
+  color: purple;
+}
+
+head {
+  font-family: inherit;
+
+}
+
+#candy-pic {
+  width: 400;
+}
+
+h2 {
+  color: #990099;
+  font-size: 18px;
+}
+
+.candies {
+  color: #FF99CC;
+}
+
+#favorite {
+  font-size: 28px;
+  color: #FF0099;
+  text-align: center;
+}
+
+h1{
+  text-align: center;
+}
+
+#family {
+  width: 600;
+}
+
+table {
+  width:70%;
+  margin-left:15%;
+  margin-right:15%;
+  border: 5px solid #006144;
+  border-collapse: collapse;
+  color: #CC6699;
+  text-align: center;
+  background-color: #330033;
+}
+
+#candies {
+  color: #FFFFCC;
+  font-weight: bold;
+  font-size: 40px;
+}
+/*
+div {
+  text-align: center;
+}*/
+
+div {
+  text-align: center;
+  display: block;
+  padding-top: 10;
+  margin: 0 auto;
+}
+
+.nav {
+  font-size: 16px;
+  font-family: serif;
+  background-color: bisque;
+}
+
+#kitty {
+  width: 400;
+}
+
+.heart {
+  width: 20;
+  margin-right: 10;
+}
+
+ul {
+  list-style: none
+}
+
+.image {
+  text-align: center;
+}
+
+
+section {
+  width: 960px;
+  height: 750px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+footer  {
+  display: block;
+  text-align: center;
+  font-size: 0.9em;
+  background-color: bisque;
+  margin-top: 90;
+}
+
+img {
+  width: 200;
+}
+
+p{
+  font-size: 19px;
+}

views/about.erb

@@ -1,20 +1,17 @@
-<html>
-  <body>
 
-    <h1>About</h1>
+<div id="me">
+  <img src="me.jpg"/>
+</div>
+<div id="space">
+  <p>
+   Hi! my name is Tamar, but I mostly go by "Tammy".
+    Here are some fun facts about myself <3
+  </p>
 
-    <p>
-      Hi! my name is Tamar, but I mostly go by "Tammy".
-      Here are some facts about myself
-    </p>
-    <ul style="list-style-type:square">
-       <li>I am a mother of two amazing daughers</li>
-       <li>I am a student in Ada Developer Academy</li>
-       <li>My favorite color is pink</li>
-       <li>I love sushi => Rainbow roll  </li>
-       <li> Currently I live in Seattle </li>
-       <li> I am marry to the most incredible person on earth </li>
-       <li> Love, but also allergic to cats </li>
-    </ul>
-  </body>
-</html>
+
+  <ul>
+    <% @facts_array.each do |fact| %>
+     <li> <img class="heart" src="heart-03.jpg"/> <%= fact %> </li>
+    <% end %>
+  </ul>
+</div>

views/candies.erb

@@ -1,21 +1,21 @@
-<html>
-  <body>
-    <img src="gummy_candies.jpg"/>
+  <section>
 
-    <h1> I LOVE </h1>
-    <H1>CANDIES</H1>
+    <p id="favorite">
+      My favorite candy today is: <strong> <%= @rand_candy %> </strong>
+    </p>
+    <div>
+      <img class:"image" id="candy-pic" src="yum.jpg" />
+    </div>
 
     <div>
-      I love candies SO much! here some of my favorite ones
+      <h2>but I love so many more like... </h2>
       <ul>
-        <li> White Chocolate </li>
-        <li> Cotton Candy </li>
-        <li> Gummi Candy </li>
-        <li> peanut butter Candy </li>
-        <li> Caramel Candy </li>
+      <% @candies.each do |candy| %>
+        <li> <%= candy %> </li>
+      <% end %>
       </ul>
     </div>
-
-    <img src="yum.jpg" />
-  </body>
-</html>
+    <div>
+      <img class:"image" id="candy-pic" src="yum.jpg" />
+    </div>
+  </section>

views/index.erb

@@ -0,0 +1,4 @@
+
+<div>
+<img id="family" class="image" src="emily_rona.jpg"/>
+</div>

views/layout.erb

@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <link href = "css/stickers_candies.css" rel="stylesheet">
+    <link rel="icon" type="image" href="/.Pear.ico" />
+    <div id="menu">
+      <ul>
+        <li><a href="http://localhost:9292/stickers">Rona loves</a></li>
+        <li><a href="http://localhost:9292/candies">Emily loves</a></li>
+        <li><a href="http://localhost:9292/projects">My projects</a></li>
+        <li><a href="http://localhost:9292/about">About</a></li>
+        <li><a href="http://localhost:9292/index">Home</a></li>
+      </ul>
+    </div>
+    <h1> <%= @h1 %> </h1>
+  </head>
+
+  <body>
+    <%=yield %>
+  </body>
+
+  <footer>
+    <p>Posted by: Tamar Hershenbaum</p>
+    <p>Contact information: <a href="mailto:[email protected]">
+    [email protected]</a>.</p>
+    <p>On Twitter: <a href="https://twitter.com/TamarHershi"> Twitter Page.</a>
+    <p> &copy; <%= Time.new.year %> </p>
+  </footer>
+
+</html>

views/projects.erb

@@ -0,0 +1,13 @@
+
+<div>
+  <% @array_h2_p.each do |h2_p| %>
+      <h2> <img class="heart" src="heart-03.jpg"/> <%= h2_p[0].to_s %> </h2>
+      <p> <%= h2_p[1].to_s %> </p>
+  <% end %>
+</div>
+
+
+  <div>
+    <h2><img class="heart" src="heart-03.jpg"/> My next secret project </h2>
+    <p> <%= @verb[rand(6)]%> a new <%= @adjective[rand(6)] %> <%= @none[rand(6)] %> </p>
+  </div>