Earlier today I was totally upset. Now, I'm on the other side of my struggle and I'm thrilled. All that I was trying to do was add video to a simple page. Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Jon's video experiment</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<h1>My First Video Block</h1>
<div id="container">
<!--<video width="640" height="360" controls>
<source src="video/first_trackstand.mp4" type="video/mp4">
</video>-->
<button type="button" id="loader">Load</button>
</div>
<script src="java/controls.js"></script>
</body>
</html>
The video tag in the file has been commented out after I started trying to load in the video with javascript. I didn't save any of my failed js attempts, but here is the one that worked:
//Give user ability to load videos to window
//save div to load video too
var container = document.getElementById('container');
//create function to add video to container div
function addVideo () {
//create a new video element
var videlem = document.createElement("video");
videlem.controls = "controls";
videlem.autoplay = "autoplay";
//create source element
var sourceMP4 = document.createElement("source");
sourceMP4.type = "video/mp4";
sourceMP4.src = "video/first_trackstand.mp4";
//add source to the variable holding the new video tag
videlem.appendChild(sourceMP4);
//add the video to the div
container.appendChild(videlem);
};
//create function to remove the button
function deleteButton () {
var loading = document.getElementById('loader');
//get parent of button
var parentEl = loading.parentNode;
//remove button
parentEl.removeChild(loading);
};
//save button in a variable
var loading = document.getElementById('loader');
//add function trigger to button
loading.addEventListener("click", addVideo);
//remove button with function
loading.addEventListener("click", deleteButton);
The root of my problem with writing this function is that I have not rigorously applied the information that I learned from my Treehouse lessons. What that means is that I've' gone through the lessons without building anything on my own with the things the material taught me. Sometimes I had to go back and review the videos or I would use the code from the workspace where I followed along with the instructor to complete the tests. Thats basicly cutting and pasting and does almost nothing for retention of the material. In the end, my approach to my Treehouse lessons has hurt my progress. That and not applying the material to personal projects are things that I need to change.
I am re-committing myself to being a better student and squeezing the maximum amount of applicable knowledge out of my Treehouse education.
Cheers,
Jon.
No comments:
Post a Comment