Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

kb-react #3

Open
wants to merge 15 commits into
base: gh-pages
Choose a base branch
from
Open

kb-react #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f21ba02
test
Oct 2, 2014
0bedf19
test2
Oct 2, 2014
5ba3ca6
MousePointerFinder
Oct 2, 2014
634ad46
update
Oct 2, 2014
0515008
New, much improved react attempt (newreact.html)
Oct 7, 2014
5bf3b48
update file names
Oct 7, 2014
6086108
how to use codify
Oct 8, 2014
b8fc0a3
updated css
Oct 8, 2014
0036568
updated css 2
Oct 8, 2014
1162f2c
blue text
Oct 8, 2014
f0dd516
new title
Oct 8, 2014
c3d849e
#
Oct 8, 2014
6d2990b
!
Oct 8, 2014
3d0c8f6
new html
Oct 8, 2014
68b2669
margin
Oct 8, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 122 additions & 0 deletions HOW TO USE CODIVVY TEST.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How does CoDivvy work?</title>


<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

<style type="text/css">
*{
margin: 20
px;
padding: 0px;
font-family: Garamond;
}

body {
background-color: rgb(245,205,30);

}

html {
margin: 50;
padding: 50;
}
h1
{
text-align:center;
font-size:20pt;
font-family: "Rockwell Extra Bold", "Rockwell Bold", monospace;
color:#black;
}

h2
{
text-align:left;
font-size:15pt;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;

color:#black;
}

body
{
text-align:center;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size:12pt;
color:#black;

p.one
{
border-style:solid;
border-width:5px;


</style>



<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>

<div id="accordion">
<h3> <b> For owners: How to rent out your equipment on CoDivvy </b>
</h3>
<div>
<p>
<B> Get started and create a profile: </B>
Sign up with facebook or email, and then create your profile! Make sure to add links to your social media accounts in your profile and say a little about you do; this will help prospective renters trust you & be more confident that you’re not a dog.
<BR><BR>
<B>Create listings: </B>
Create new listings in minutes! Tell us about your equipment with as many details as possible and add a photo.
<BR><BR>
<B>Respond to requests: </B>
You’ll get an email when someone wants to rent your equipment. Check out their profile to make sure they look legit & contact them if you have any questions. <BR><BR>

<B> Set up a time to meet, confirm, and meet!</B>
When you meet, make sure the renter checks that the equipment is what they expected + in good working condition. <BR><BR>

<B> Review: </B>
After your equipment is returned, pay it forward and don’t forget to leave a review of your renter! This really helps other users
</p>
</div>
<h3> <b> For renters: How to rent equipment on CoDivvy </b> </h3>
<div>
<p>
<B> Get started and create a profile: </B>
Sign up with facebook or email, and then create your profile! Make sure to add links to your social media accounts in your profile and say a little about you do; this will help prospective renters trust you & be more confident that you’re not a dog.
<BR><BR>
<B>Search listings: </B>
Hopefully self-explanatory! Don't find what you want? Check out our resources page for CoDivvy alternates, and invite more friends to join so we can increase our options at CoDivvy! <BR><BR>
<B>Contact the owner: </B>
Message the owner and specify what you want to rent and when. It helps to say a sentence or two about yourself and your project to build credibility. <BR><BR>

<B> Set up a time to meet, confirm, and meet!</B>
When you meet, make sure to check the equipment to make sure it’s what was advertised & in good working condition. <BR><BR>

<B> Review: </B>
After your equipment is returned, pay it forward and don’t forget to leave a review! This really helps other users

</p>
</div>
<h3><b> Questions? </b></h3>
<div>
<p>
Check out our FAQ or email us at contact@codivvy.com! </p>
</div>

</div>


</body>
</html>
122 changes: 122 additions & 0 deletions NEWreact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@

<html>
<!--new react assignement; code adapted from http://videofortheweb.org/code example -->

<head>
<title>Learn About Meditation</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
*{
margin: 20
px;
padding: 0px;
font-family: Garamond;
}

/*BUTTON STYLING*/
.buttonContainer{
position: fixed;
margin-left: 5px;
z-index: 100px;
}
.button{
color: black;
border-style: solid;
border-width: 5px;
border-color: grey;
width: 125px;
text-align: center;
padding: 5px;
margin: 5px;
}
.button:hover{
background-color: rgb(177,207,118);
}

/*VIDEO STYLING*/
.videoContainer{
clear: left;
margin-top: 60px;
width: 100%;
}
#videoTitle{
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
font-size: 24px;
}
#video{
margin: auto;
width: 640px;
}
#videoDescription{
margin-top: 20px;
text-align: center;
font-size: 16px;
}

</style>

<script type="text/javascript">

var videos = [
{
title: "Beginner meditation",
Test Test Test
},
{
title: "Mindfulness meditation",
iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/3nwwKbM_vJc?rel=0" frameborder="0" allowfullscreen></iframe>',
description: "This video will teach you about the history, theory, and practice of mindfulness meditation."
},
{
title: "Transcendental meditation",
iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/ZjT831cjaUY?rel=0" frameborder="0" allowfullscreen></iframe>',
description: "This video will teach you about transcendental meditation techniques."
}
];

$( document ).ready( function(){

$('#buttonOne').click(function(){
console.log("We clicked Button One!");
$('#videoTitle').html(videos[0].title);
$('#video').html(videos[0].iframe);
$('#videoDescription').html(videos[0].description);
});

$('#buttonTwo').click(function(){
console.log("We clicked Button Two!");
$('#videoTitle').html(videos[1].title);
$('#video').html(videos[1].iframe);
$('#videoDescription').html(videos[1].description);
});

$('#buttonThree').click(function(){
console.log("We clicked Button Three!");
$('#videoTitle').html(videos[2].title);
$('#video').html(videos[2].iframe);
$('#videoDescription').html(videos[2].description);
});

});

</script>
</head>

<body>
<div class="buttonContainer">
<div class="button" id="buttonOne">Beginner meditation</div>
<div class="button" id="buttonTwo">Mindfulness meditation</div>
<div class="button" id="buttonThree">Another kind of meditation
</div>
</div>

<div class="videoContainer">
<div id="videoTitle">Select A Video To Learn About Meditation!</div>
<div id="video"></div>
<div id="videoDescription"></div>
<div>
</body>
</html>
130 changes: 122 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,123 @@
<!DOCTYPE html>

<html>
<head>
<title>So-and-so's React Assignment</title>
</head>
<body>
YOUR PROJECT HERE
</body>
</html>
<!--new react assignement; code adapted from http://videofortheweb.org/code example -->

<head>
<title>Learn About Meditation</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
*{
margin: 20
px;
padding: 0px;
font-family: Garamond;
}

/*BUTTON STYLING*/
.buttonContainer{
position: fixed;
margin-left: 5px;
z-index: 100px;
}
.button{
color: black;
border-style: solid;
border-width: 5px;
border-color: grey;
width: 125px;
text-align: center;
padding: 5px;
margin: 5px;
}
.button:hover{
background-color: rgb(177,207,118);
}

/*VIDEO STYLING*/
.videoContainer{
clear: left;
margin-top: 60px;
width: 100%;
}
#videoTitle{
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
font-size: 24px;
}
#video{
margin: auto;
width: 640px;
}
#videoDescription{
margin-top: 20px;
text-align: center;
font-size: 16px;
}

</style>

<script type="text/javascript">

var videos = [
{
title: "Beginner meditation",
iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/8a5fO8jE7mc?rel=0" frameborder="0" allowfullscreen></iframe>',
description: "This video teaches you how to start meditating!"
},
{
title: "Mindfulness meditation",
iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/3nwwKbM_vJc?rel=0" frameborder="0" allowfullscreen></iframe>',
description: "This video will teach you about the history, theory, and practice of mindfulness meditation."
},
{
title: "Transcendental meditation",
iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/ZjT831cjaUY?rel=0" frameborder="0" allowfullscreen></iframe>',
description: "This video will teach you about transcendental meditation techniques."
}
];

$( document ).ready( function(){

$('#buttonOne').click(function(){
console.log("We clicked Button One!");
$('#videoTitle').html(videos[0].title);
$('#video').html(videos[0].iframe);
$('#videoDescription').html(videos[0].description);
});

$('#buttonTwo').click(function(){
console.log("We clicked Button Two!");
$('#videoTitle').html(videos[1].title);
$('#video').html(videos[1].iframe);
$('#videoDescription').html(videos[1].description);
});

$('#buttonThree').click(function(){
console.log("We clicked Button Three!");
$('#videoTitle').html(videos[2].title);
$('#video').html(videos[2].iframe);
$('#videoDescription').html(videos[2].description);
});

});

</script>
</head>

<body>
<div class="buttonContainer">
<div class="button" id="buttonOne">Beginner meditation</div>
<div class="button" id="buttonTwo">Mindfulness meditation</div>
<div class="button" id="buttonThree">Another kind of meditation
</div>
</div>

<div class="videoContainer">
<div id="videoTitle">Select A Video To Learn About Meditation!</div>
<div id="video"></div>
<div id="videoDescription"></div>
<div>
</body>
</html>
Loading