Skip to content

Instantly share code, notes, and snippets.

@basquith16

basquith16/index.html

Last active November 4, 2015 19:22
Show Gist options
  • Save basquith16/e5b71bb379a0cce574f9 to your computer and use it in GitHub Desktop.
Save basquith16/e5b71bb379a0cce574f9 to your computer and use it in GitHub Desktop.
Download ZIP
final project
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TykeTyme</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="styles/activityList.css">
<link rel="stylesheet" href="styles/craftList.css">
<link rel="stylesheet" href="styles/calendar.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/responsive.css">
<link href='https://fonts.googleapis.com/css?family=Caveat' rel='stylesheet' type='text/css'>
<link href='schedule/fullcalendar.css' rel='stylesheet' />
<link href='schedule/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src="//www.parsecdn.com/js/parse-1.6.7.min.js"></script>
<script src="/bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<header>
<h3 class="text-muted">TykeTyme</h3>
<div class="login"><a href="#">Login</a></div>
<div class="register"><a href="#">Register</a></div>
</header>
<div class="container">
<div class="navTabs">
<ul class="nav nav-pills pull-right">
<li><a href="">Schedule</a></li>
<li><a href="#crafts">Crafts</a></li>
<li><a href="#activities">Activities</a></li>
<li><a href="#whatsAround">What's Around</a></li>
<li><a href="#meals">Meals</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="content"></div>
<div id='wrap'>
<div id='external-events'>
<h4>Plans</h4>
<ul id="dragList">
<li class='fc-event'>Elephant Plate Art</li>
<li class='fc-event'>Balance Exercises</li>
<li class='fc-event'>Sweet Potatoes and Apple Sauce</li>
<li class='fc-event'>Gymboree Class</li>
<li class='fc-event'>Playground</li>
<li class='fc-event'>Nap</li>
<li class='fc-event'>Baby Yoga Class</li>
<li class='fc-event'>Tummy Time</li>
<li class='fc-event'>Milk</li>
<li class='fc-event'>Dr. Appt</li>
</ul>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
</div>
<footer>
</footer>
<script type="text/template" id="craftTemplate">
<div class="craftListing">
<div class="title">{{ title }}</div>
<div class="materials">
<span>What you'll need:</span> {{ materials }}</div>
<div class="instruct">
<span>Instructions:</span> {{ instructions }}</div>
<div class="cost">
<span>Cost:</span> ${{ cost }}</div>
<div class="age">
<span>Age:</span> {{ age }}</div>
<button type="button" id="addItem">Add</button>
</div>
</script>
<script type="text/template" id="activityTemplate">
<div class="activityListing">
<div class="actTitle">{{ Title }}</div>
<div class="actDirect">{{ Directions }}</div>
<div class="actMaterials">{{ Materials }}</div>
<div class="actCost">{{ Cost }}</div>
<div class="actAge">{{ Age }}</div>
<button type="button" id="addItem">Add</button>
</div>
</script>
<script type="text/html" id="mealTemplate">
<div class="mealListing">
<div class="mealTitle">{{ Title }}</div>
<div class="mealIngred">{{ Ingredients }}</div>
<div class="mealDirect">{{ Directions }}</div>
<div class="mealCost">{{ Cost }}</div>
<div class="mealAge">{{ Age }}</div>
<button type="button" id="addItem">Add</button>
</div>
</script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function() {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src='schedule/lib/moment.min.js'></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src='schedule/lib/jquery-ui.custom.min.js'></script>
<script src='schedule/fullcalendar.min.js'></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/button.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.1/react.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.1/react-dom.js'></script>
<script src="scripts/main.jsx"></script>
<script src="scripts/parseLogin.jsx"></script>
<script src="scripts/router.jsx"></script>
<script src="scripts/models.jsx"></script>
<script src="scripts/views.jsx"></script>
</body>
</html>
Raw
views.jsx
"use strict";
Parse.initialize("jtKp70qF95AUOliYuurtfCASVEZr35aOs1pdNhHS", "orSL5zhN13Qqiamy3qbNbh9HlJMhxvR7f2DJRRv7");
_.templateSettings = {
interpolate: /\{\{(.+?)\}\}/g
};
class CraftView extends Backbone.View {
get template() {
return _.template($('#craftTemplate').text());
}
events() {
return {
'click #addItem': 'onButtonNewClick'
}
}
onButtonNewClick() {
return addView = new CraftView({model: craft})
}
render() {
this.$el.html(this.template(this.model.attributes));
return this.$el;
}
}
class ActivityView extends Backbone.View {
get template() {
return _.template($('#activityTemplate').text());
}
render() {
this.$el
.html(this.template(this.model.attributes));
return this.$el;
}
}
class MealView extends Backbone.View {
get template() {
return _.template($('#mealTemplate').text());
}
render() {
this.$el
.html(this.template(this.model.attributes));
return this.$el;
}
}
class CraftsView extends Backbone.View {
render() {
const self = this;
this.collection
.each((craft) => {
let view = new CraftView({
model: craft
});
self.$el
.append(view.render());
});
console.log(this.el)
return this.$el;
}
};
class ActivitiesView extends Backbone.View {
render() {
const self = this;
this.collection
.each((activity) => {
let view = new ActivityView({
model: activity
});
self.$el
.append(view.render());
});
console.log(this.el)
return this.$el;
}
};
class MealsView extends Backbone.View {
render() {
const self = this;
this.collection
.each((meal) => {
let view = new MealView({
model: meal
});
self.$el
.append(view.render());
});
console.log(this.el)
return this.$el;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment