Codeacademy.com: Practice Makes Perfect

Codeacademy.com is a fantastic resource for those new to the world of coding. Be it HTML, CSS, jQuery, Ruby, or Python, this website is catered to those who are willing to take the time and make the effort to learn new digital skills.

badges

My badges

I have previously used this site for another course and so have acquired a few badges covering HTML, CSS and some jQuery. To try something new I decided I wanted to tackle PHP (hypertext processor), a programming language which I found to be just as straight-forward as those coding scripts I’ve learned previously. As the entire PHP course was a bit lengthy I decided to base my coding project off my existing coding experience to refresh my skills.


projectCoding project

Above is a screenshot of a working “pick-a-date” or basic calendar option for choosing a flight plan.

Code for project is as follows:

index.html

<!DOCTYPE html>
<html>
<head>
<title>Pick a Date</title>
<link rel=’stylesheet’ type=’text/css’ href=’stylesheet.css’/>
<link rel=’stylesheet’ type=’text/css’ href=’http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css’/&gt;
<script type=’text/javascript’ src=’script.js’></script>
<script src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js”></script>
</head>
<body>
<div id=”header”>
<h2><br/>Select a Destination</h2>
</div>
<div class=”left”>
<p>Departing: <input type=”text” id=”departing”></p>
</div>
<div class=”right”>
<p>Returning: <input type=”text” id=”returning”></p>
</div><br/>
<div id=”main”>
<p>Destination: <select id=”dropdown”>
<option value=”newyork”>New York</option>
<option value=”london”>London</option>
<option value=”beijing”>Beijing</option>
<option value=”moscow”>Moscow</option>
</select></p>
<button>Submit</button>
</div>
</body>
</html>

stylesheet.css

h2 {
font-family: Verdana, Arial, sans-serif;
text-align: center;
color: #FFFFFF;
}

#header {
width: 100%;
height: 70px;
position: relative;
top: -40px;
background-color: #7FC7AF;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

p {
font-family: Verdana, Arial, sans-serif;
font-size: 1em;
}

.left {
position: relative;
top: -40px;
float: left;
}

.right {
position: relative;
top: -40px;
float: right;
}

#main {
position: relative;
top: 170px;
float: left;
}

script.js

$(document).ready(function() {
$(“#departing”).datepicker();
$(“#returning”).datepicker();
$(“button”).click(function() {
var selected = $(“#dropdown option:selected”).text();
var departing = $(“#departing”).val();
var returning = $(“#returning”).val();
if (departing === “” || returning === “”) {
alert(“Please select departing and returning dates.”);
} else {
confirm(“Would you like to go to ” + selected + ” on ” + departing + ” and return on ” + returning + “?”);
}
});
});

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s