Skip to content

Instantly share code, notes, and snippets.

@HaWyanHa

HaWyanHa/Ice Cream Joint

Created March 7, 2016 21:29
Show Gist options
  • Save HaWyanHa/964788d66566d698db79 to your computer and use it in GitHub Desktop.
Save HaWyanHa/964788d66566d698db79 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Ice Cream Joint
<!DOCTYPE html>
<html>
<head>
<title>Sundae School</title>
<style type="text/css">
body {
background-color: #75BBA8;
}
li {
list-style-type: none;
display: inline-block;
margin: 0px 100px 0px 100px;
text-align: center;
}
h1 {
text-align: center;
}
table {
border: 2px solid black;
}
td {
border: 2px solid black;
}
h2 {
text-align: center;
}
.about {
float: left;
max-width: 25%;
padding: 20px
}
.find {
float: left;
max-width: 25%;
padding: 20px
}
.contact {
float: left;
max-width: 25%;
padding: 20px
}
.flavor {
float: left;
max-width: 25%;
padding: 20px
}
.white {
background-color: white;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.btn {
clear: left;
text-align: center;
}
tr:hover {
background-color: yellow;
}
.a {
background-color: yellow;
}
.b {
background-color: yellow;
}
.c {
background-color: yellow;
}
.d {
background-color: yellow;
}
</style>
</head>
<body id="back">
<header>
<h1>Sundae School</h1>
<nav>
<ul>
<li>About</li>
<li>Find Us</li>
<li>Contact</li>
<li>Flavors</li>
</ul>
</nav>
<img src="http://www.themesltd.com/headers2/ice_cream_with_banner.png">
</header>
<main>
<div class="about">
<h2>About</h2>
<p>Hi, I am Ryan! I love ice cream because each of us has a wonderful, happy memory about it. To me, ice cream is how I celebrate love and togetherness. As a young boy, my dad often had to miss our family dinners to work extra hours. But as my sister and I were getting ready for bed, Dad would arrive home and call to us from downstairs, “I’m home! Who wants ice cream?” and we would race down to jump on him with hugs and choose our flavors for the night. Ice cream continues to be the perfect excuse to celebrate and create happy moments with family and friends. Sundae School is my way to bring joy to others through imaginative flavors and irrepressible smiles.</p>
</div>
<div class="find">
<h2>Find Us</h2>
<p>We are located at 1200 18th St NW #650, <br> Washington, DC 20036</p>
</div>
<div class="contact">
<h2>Contact</h2>
<p>Call me at 202 255 2538</p>
</div>
<div class="flavor">
<h2>Flavors</h2>
<table>
<thead>
<tr id=1>
<th>Flavor</th>
<th>Price</th>
<th>Calories</th>
</tr>
</thead>
<tbody>
<tr id="2" class="white">
<td>Choclate</td>
<td>2.00</td>
<td>100</td>
</tr>
<tr id=3>
<td>Vanilla</td>
<td>2.00</td>
<td>100</td>
</tr>
<tr id="4" class="white">
<td>Strawberry</td>
<td>2.00</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<div class="btn">
<button id="btn1">Red</button>
<button id="btn2">Blue</button>
<button id="btn3">Green</button>
<button id="btn4">White</button>
</div>
</main>
<script type="text/javascript">
var plus_btn = document.getElementById("btn1")
plus_btn.addEventListener("click", function(){
document.getElementById("back").classList.add("red")
document.getElementById("back").classList.remove("blue")
document.getElementById("back").classList.remove("green")
document.getElementById("back").classList.remove("white")
})
var plus_btn = document.getElementById("btn2")
plus_btn.addEventListener("click", function(){
document.getElementById("back").classList.add("blue")
document.getElementById("back").classList.remove("red")
document.getElementById("back").classList.remove("green")
document.getElementById("back").classList.remove("white")
})
var plus_btn = document.getElementById("btn3")
plus_btn.addEventListener("click", function(){
document.getElementById("back").classList.add("green")
document.getElementById("back").classList.remove("blue")
document.getElementById("back").classList.remove("red")
document.getElementById("back").classList.remove("white")
})
var plus_btn = document.getElementById("btn4")
plus_btn.addEventListener("click", function(){
document.getElementById("back").classList.add("white")
document.getElementById("back").classList.remove("blue")
document.getElementById("back").classList.remove("green")
document.getElementById("back").classList.remove("red")
})
var ryan = document.getElementById("1")
ryan.addEventListener("click", function(){
document.getElementById("1").classList.add("a")
document.getElementById("2").classList.remove("b")
document.getElementById("3").classList.remove("c")
document.getElementById("4").classList.remove("d")
document.getElementById("2").classList.add("white")
document.getElementById("4").classList.add("white")
})
var ryan = document.getElementById("2")
ryan.addEventListener("click", function(){
document.getElementById("2").classList.add("b")
document.getElementById("2").classList.remove("white")
document.getElementById("1").classList.remove("a")
document.getElementById("3").classList.remove("c")
document.getElementById("4").classList.remove("d")
document.getElementById("4").classList.add("white")
})
var ryan = document.getElementById("3")
ryan.addEventListener("click", function(){
document.getElementById("3").classList.add("c")
document.getElementById("2").classList.remove("b")
document.getElementById("1").classList.remove("a")
document.getElementById("4").classList.remove("d")
document.getElementById("2").classList.add("white")
document.getElementById("4").classList.add("white")
})
var ryan = document.getElementById("4")
ryan.addEventListener("click", function(){
document.getElementById("4").classList.add("d")
document.getElementById("4").classList.remove("white")
document.getElementById("2").classList.remove("b")
document.getElementById("3").classList.remove("c")
document.getElementById("1").classList.remove("a")
document.getElementById("2").classList.add("white")
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment