Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
finished
  • Loading branch information
Steve Cartagena authored and Steve Cartagena committed Feb 27, 2017
1 parent 7ed2c2c commit 5d3dac8
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 65 deletions.
61 changes: 32 additions & 29 deletions css/main.css
Expand Up @@ -10,7 +10,7 @@
Base styles: opinionated defaults
========================================================================== */

html {
html {
color: #222;
font-size: 1em;
line-height: 1.4;
Expand All @@ -24,7 +24,7 @@ html {
* Customize the background color to match your design.
*/

::-moz-selection {
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
Expand All @@ -38,7 +38,7 @@ html {
* A better looking default horizontal rule
*/

hr {
hr {
display: block;
height: 1px;
border: 0;
Expand All @@ -53,20 +53,20 @@ hr {
* https://github.com/h5bp/html5-boilerplate/issues/440
*/

audio,
canvas,
iframe,
img,
svg,
video {
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}

/*
* Remove default fieldset styles.
*/

fieldset {
fieldset {
border: 0;
margin: 0;
padding: 0;
Expand All @@ -76,15 +76,15 @@ fieldset {
* Allow only vertical resizing of textareas.
*/

textarea {
textarea {
resize: vertical;
}

/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */

.browserupgrade {
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
Expand All @@ -95,7 +95,10 @@ textarea {
Author's custom styles
========================================================================== */


.class1 {
background-color:red;
height: 20vh;
}



Expand All @@ -119,7 +122,7 @@ textarea {
* Hide visually and from screen readers
*/

.hidden {
.hidden {
display: none !important;
}

Expand All @@ -128,7 +131,7 @@ textarea {
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/

.visuallyhidden {
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
Expand All @@ -145,8 +148,8 @@ textarea {
* https://www.drupal.org/node/897638
*/

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
Expand All @@ -159,7 +162,7 @@ textarea {
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
.invisible {
visibility: hidden;
}

Expand All @@ -175,8 +178,8 @@ textarea {
* `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
Expand All @@ -191,14 +194,14 @@ textarea {
Modify as content requires.
========================================================================== */

@media only screen and (min-width: 35em) {
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}

Expand All @@ -208,15 +211,15 @@ textarea {
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */

@media print {
@media print {
*,
*:before,
*:after,
*:first-letter,
*:first-line {
background: transparent !important;
color: #000 !important; /* Black prints faster:
http://www.sanbeiji.com/archives/953 */
http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important;
}
Expand All @@ -239,8 +242,8 @@ textarea {
* or use the `javascript:` pseudo protocol
*/

a[href^="#"]:after,
a[href^="javascript:"]:after {
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}

Expand All @@ -255,7 +258,7 @@ textarea {
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/

thead {
thead {
display: table-header-group;
}

Expand Down
78 changes: 42 additions & 36 deletions index.html
@@ -1,40 +1,46 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></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','auto');ga('send','pageview');
</script>
</body>
</html>
<![endif]-->

<!-- Add your site or application content here -->
<p id="item">

</p>

<div id="container">

</div>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></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','auto');ga('send','pageview');
</script>
</body>
</html>
43 changes: 43 additions & 0 deletions js/main.js
@@ -0,0 +1,43 @@
/* 1)
Write a function that calcuates and RETURNS the product of two
numbers. I should be able to use the function like the code below:
*/
function getProduct(num1, num2) {
result = num1 * num2
return result
}

var prod = getProduct(5,8);
console.log(prod+5);

/* 2)
Write a Javascript function that takes TWO parameters: element and class.
The element should be a DOM object, NOT a string. The class can be a string.
The function should add the designated class to the element. The code below should work */
function addClassToElement(ele, cl) {
ele.className += " " + cl;
}

// function fancyLog(text, element) {
// console.log(text);
// // Now what goes in here?
// var element = document.createElement(element);
// element.innerHTML = text;
// document.querySelector("#log").appendChild(element);
// }

var p = document.getElementById("item");
addClassToElement(p, "class1");

/* 3)
A function that creates any type of element given, adds content to it, and adds it to the page in an intended parent. The code below should work. The PARENT should be a DOM object, not a selector. */

function addItemToParent(ele, text, parent) {
var ele = document.createElement(ele);
ele.innerHTML = text;
parent.appendChild(ele);
}

var parent = document.getElementById("container");
addItemToParent("h1", "This is some content",parent);

0 comments on commit 5d3dac8

Please sign in to comment.