Last active
August 29, 2015 14:06
-
-
Save amonks/e60d511747ce701d73a6 to your computer and use it in GitHub Desktop.
in which I helped my friend izzy with her portfolio
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- saved from url=(0027)http://kathrynisabelle.com/ --> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> | |
| <title> | |
| portfolio | |
| </title> | |
| <meta name="description" content="portfolio"> | |
| <style> | |
| /* The <center> tag is not supported in html5, so let's | |
| use CSS instead. */ | |
| body { | |
| text-align: center; | |
| font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Using an image of text makes your website less accessible | |
| for people with slow conncetions, people who use screen | |
| readers, and search engines. Let's use styled text instead. --> | |
| <h1>Kathryn Isabelle Lawrence</h1> | |
| <input type="button" value="<<" onclick="portfolio.dwnDate()"/> | |
| <input type="button" value=">>" onclick="portfolio.upDate()"/> | |
| <div id="image"> | |
| <!-- the name attribute is not supported in html5 | |
| let's use id instead. --> | |
| <img id="imgDisplay"/> | |
| </div> | |
| <br /> | |
| <input type="text" id="txtTitle" /> | |
| <br /> | |
| <input type="text" id="txtSize" /> | |
| <br /> | |
| <input type="text" id="txtMdm" /> | |
| <br /> | |
| <input type="text" id="txtYr" /> | |
| <br /> | |
| <script> | |
| // by moving the <script> tag into the <body> tag, we | |
| // ensure that it won't execute until the body is loaded. | |
| // If you add other external scripts later (src='something.js') | |
| // putting them here will allow browsers to start rendering | |
| // the body while the external scripts are downloaded | |
| // if you declare a bunch of global variables, it can | |
| // create conflicts with javascript you might add later. | |
| // Let's make one global object, `portfolio`, and define | |
| // everything else as members of that object.thi | |
| portfolio = { | |
| counter: 0, | |
| // Since this stuff happens on both upDate() and | |
| // downDate(), let's put it in a function. | |
| // Index is the new counter number. | |
| newImage: function(index) { | |
| // `this` always refers back to the parent `portfolio` object. | |
| document.getElementById('imgDisplay').src = this.pictures[index].src; | |
| document.getElementById('txtTitle').value = this.pictures[index].title; | |
| document.getElementById('txtSize').value = this.pictures[index].size; | |
| document.getElementById('txtMdm').value = this.pictures[index].mdm; | |
| document.getElementById('txtYr').value = this.pictures[index].yr; | |
| }, | |
| upDate: function() { | |
| this.counter++; | |
| // by using pictures.length, we don't have to change | |
| // this if we add new pictures. | |
| if (this.counter > this.pictures.length - 1) { | |
| this.counter = 0; | |
| } | |
| this.newImage(this.counter); | |
| }, | |
| dwnDate: function() { | |
| this.counter--; | |
| if (this.counter < 0) { | |
| this.counter = this.pictures.length - 1; | |
| } | |
| this.newImage(this.counter); | |
| }, | |
| // If we use separate arrays, they might get out | |
| // of sync. Let's use one big array of objects | |
| // to make it easier to keep track of. | |
| pictures: [{ | |
| src: "moon0.jpg", | |
| title: "'Blue Moon'", | |
| size: "30 in x 30 in", | |
| mdm: "Oil on canvas", | |
| yr: "2012" | |
| }, { | |
| src: "seahorse0.jpg", | |
| title: "'Sea Horse'", | |
| size: "16 in x 20 in", | |
| mdm: "Oil on canvas board", | |
| yr: "2014" | |
| }, { | |
| src: "eagle0.jpg", | |
| title: "'Eagle'", | |
| size: "16 in x 20 in", | |
| mdm: "Oil on canvas board", | |
| yr: "2014" | |
| }, { | |
| src: "abstract0.jpg", | |
| title: "'Abstract 1'", | |
| size: "16 in x 20 in", | |
| mdm: "Oil on canvas board", | |
| yr: "2014" | |
| }, { | |
| src: "americanspirit0.jpg", | |
| title: "'American Spirit'", | |
| size: "12 in x 24 in", | |
| mdm: "Oil on canvas", | |
| yr: "2011" | |
| }, { | |
| src: "body0.jpg", | |
| title: "'Occupy Body'", | |
| size: "34 in x 62 in", | |
| mdm: "Oil on canvases", | |
| yr: "2011" | |
| }, { | |
| src: "bottle0.jpg", | |
| title: "'Bottle'", | |
| size: "8 in x 12 in", | |
| mdm: "Oil on paper", | |
| yr: "2013" | |
| }, { | |
| src: "fly0.jpg", | |
| title: "'Fly'", | |
| size: "9 in x 12 in", | |
| mdm: "Oil on canvas", | |
| yr: "2014" | |
| }, { | |
| src: "girls0.jpg", | |
| title: "'Girls'", | |
| size: "55 in x 16 in", | |
| mdm: "Oil on canvas", | |
| yr: "2012" | |
| }, { | |
| src: "hands10.jpg", | |
| title: "'Prayer Hands 1'", | |
| size: "16 in x 12 in", | |
| mdm: "Oil on paper", | |
| yr: "2013" | |
| }, { | |
| src: "hands20.jpg", | |
| title: "'Prayer Hands 2'", | |
| size: "16 in x 12 in", | |
| mdm: "Oil on paper", | |
| yr: "2013" | |
| }, { | |
| src: "layers0.jpg", | |
| title: "'Layers'", | |
| size: "24 in x 24 in", | |
| mdm: "Oil on canvas", | |
| yr: "2011" | |
| }, { | |
| src: "lotus0.jpg", | |
| title: "'Lotus'", | |
| size: "12 in x 12 in", | |
| mdm: "Oil on canvas", | |
| yr: "2013" | |
| }, { | |
| src: "SDB0.jpg", | |
| title: "'SDB'", | |
| size: "16 in x 20 in", | |
| mdm: "Oil on canvas board", | |
| yr: "2014" | |
| }, { | |
| src: "selfportrait0.jpg", | |
| title: "'Self Portrait'", | |
| size: "36 in x 36 in", | |
| mdm: "Oil on canvas", | |
| yr: "2013" | |
| }, { | |
| src: "seurat0.jpg", | |
| title: "'Seurat'", | |
| size: "16 in x 21 in", | |
| mdm: "Oil on paper", | |
| yr: "2011" | |
| }, { | |
| src: "stillife0.jpg", | |
| title: "'Still Life'", | |
| size: "31 in x 23 in", | |
| mdm: "Oil on canvas", | |
| yr: "2012" | |
| }, { | |
| src: "sunset0.jpg", | |
| title: "'Sunset'", | |
| size: "17 in x 24 in", | |
| mdm: "Oil on canvas", | |
| yr: "2014" | |
| }, { | |
| src: "teal0.jpg", | |
| title: "'Teal Study'", | |
| size: "12 in x 8 in", | |
| mdm: "Oil on paper", | |
| yr: "2013" | |
| }, { | |
| src: "toastr0.jpg", | |
| title: "'Toaster'", | |
| size: "23-17 in x 32 in", | |
| mdm: "Oil on canvas", | |
| yr: "2014" | |
| }, { | |
| src: "glammskelly.jpg", | |
| title: "'Glamour Portrait'", | |
| size: "340 px x 500 px", | |
| mdm: "Photoshop", | |
| yr: "2014" | |
| }, { | |
| src: "yolo0.jpg", | |
| title: "'Yolo Logo'", | |
| size: "? in x ? in", | |
| mdm: "Spray paint on ?", | |
| yr: "2013" | |
| }, { | |
| src: "turtle.png", | |
| title: "'Turtle'", | |
| size: "5 in x 7 in", | |
| mdm: "Linoprint", | |
| yr: "2010" | |
| }, ], | |
| }; | |
| // initialize the page with the first image | |
| portfolio.newImage(0); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment