ProjectSept12/16

by Angeli Schwartz

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSCI E-3 Unit #1 Project</title>
    <link rel="stylesheet" type="text/css" href="css/SeptTwelve.css">

    <!-- Latest compiled and minified CSS -->
  </head>
  <body class="hw">

    <!--
     Here you'll add your own DIV tag with your name inside it, and with the id and class
     attributes set as described in section 5 of this page.
     -->
     <div id="studentname" class="namedata">Angeli
</div>
   

      <h2>CSCI E-3 Unit #1 Project</h2>
      <h3 class="whatlearn">What you're learning:</h3>
      <p>This project is designed to help you get your development
        environment for HTML/CSS/Javascript set up, and to demonstrate that
        you've got the basic set up for modifying and writing code, debugging,
        and submitting your assignments. By the end of this project, you'll
        have installed some tools, debugged and fixed some code, and packaged it
        for handing in. Note: The tasks 1–5 below are completed in the PartA folder; task 6 is completed in the PartB folder. </p>
      <h3>What you need to do:</h3>
      <ol>
        <li>Examine this package</li>
        <li>Get a code editor</li>
        <li>Get Firefox &amp; Firebug</li>
        <li>Find and fix the bugs</li>
        <li>Prepare your homework package to submit</li>
        <li>Convert a JSFiddle example into local code</li>
      </ol>
      <h4>1. Examine this package</h4>
      <p>Unzip this package into a folder. Look at its structure&mdash;all of the
        homework projects will be distributed in this way, and it's typical of
        how the various resources used by a web page are organized.&nbsp; You'll submit your assignments in a zip file
        with this exact file/folder structure. </p>
      <h4>2. Get a code editor</h4>
      <p>Download a code editor of your choice. Notepad and TextEdit aren't code
        editors. See the Week 1, Lesson 2 in Canvas and Chapter 3 of the textbook for advice. I'm partial...

CSS

#studentname{
	border:1px solid darkgray;
	padding:.7em;
	background-color: gray;
	width:20%;
}

.namedata{
	color: maroon;
	font-weight:bold;
}

body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.hint {
	display:none;
	color:red;
}

.hwbutton {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

.hwbutton:hover {
	background-color:#d29105;
	cursor: hand;
	cursor: pointer;
}
.hwbutton:active {
	position:relative;

JavaScript

/* CSCI E-3 Introduction to Web Programming Using Javascript
 * Spring 2015
 *
 * Unit #1 Project
 *
 * Don't worry if you don't understand all the code in these examples. We're exploring a very specific
 * skill in these examples: using Firebug to find and correct errors in your code.
 *
 * By the end of the course you'll be writing stuff like this in your sleep, but for now, just focus on
 * the question at hand: why don't these work as intended?
 *
 */
"use strict";

 var clickme1Btn = document.getElementById("clickme1");
 clickme1Btn.onclick = function(){
 		// This is the code that will be executed when the button is clicked.
 		// It should pop up an 'alert' box that says "Hello"!
 		alert("Hi! (This is the first of three messages)");
 		//then it will pop up an alert that says "Welcome to CSCI E-3!"
 		alert("Welcome to CSCI E-3! (This is the second of three messages)");
 		//then it will pop up one more alert to say "You did it!"
 		alert("You did it! (This is the third of three messages)");
 }



 var clickme2Btn = document.getElementById("clickme2");
 clickme2Btn.onclick = function(){

        /*
         *       This function access and manipulates the HTML structure of the Web page
         *        in order to do its business. The manipulations are very simple.
         *
         *        The HTML looks something like this:
         *
         *         <input id="input1" type="number">
         *         <input id="input2" type="number">
         *         <input id="input3" type="number"><br>
         *            <div>Your total is: <span id="resultArea"></span></div>
         *            <div id="clickme2" class="hwbutton">Click Me #2</div>
         *
         *       Don't worry about understanding it all. Just look for a very simple
         *       error in my code for adding three numbers. It's not code that the browser
         *       chokes on - it's syntactically correct and runnable code. It just doesn't do
         *       what I...