In this exercise, you will learn and use some new elements:
- <section>
  - The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header and possibly a footer.
- <header>
  - The header element represents the header of a section, typically containing headings and subheadings, and other metadata about the section.
- <footer>
  - The footer element represents a footer of a section, typically containing information such as who wrote it, links to related documents, and copyright notices.
- <article>
  - The article element represents an independent section of a document, page, or site. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, or any other independent item of content.
Inside the <body> tag, add a <section> tag with the id: wrapper
- Inside that section tag:
  - Add a <header> tag that contains an <h1> with the title of the page.
  - After the header, add an <article> tag that contains:
    - A paragraph stating to drop something in the drop zone
    - A div with the id: imgHolder
  - After that article, add a second article tag that contains:
    - A section tag
      - Set the id to: editable
      - Set the attribute contenteditable equal to true
      - inside the section, put a h2, a couple p tags, and an ordered list
    - A div tag
      - inside the div, put an <input>
        
        type: button
        
        id: clear
        
        value: Clear Your Changes
  - After the second article, put a <footer> that contains your contact info.
CSS
- /* body tag */
  body {font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:normal; background:#ddddff; margin:0px; margin-top:40px; padding:0px;}
  
  /* section, header, and footer tags */
  section, header, footer {display:block;}
  
  /*
  -moz-border-radius is for Mozilla CSS Extensions (Gecko)
  -webkit-border-radius is for Webkit (Safari and Chrome)
  border-radius is CSS3 (supposed to be, anyway)
  */
  #wrapper {width:600px; margin:0px auto; background:#ffffff; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border-top: 1px solid #fff; padding-bottom: 76px;}
  
  /* heading tags */
  h1 {padding-top:10px;}
  h2 {font-size:100%; font-style:italic;}
  
  /* the greater than sign is the 'direct child selector combinator'
  article > * means: anything that is a direct child of the article tag
  footer > * means: anything that is a direct child of the footer tag
  thus, any tags inside an article tag will have a margin of 20 pixels
  */
  header, article > * {margin:20px;}
  footer > * {margin:20px; color:#666666;}
  
  /* image holder */
  #imgHolder { border: 3px solid #ccffcc; width: 300px; height: 300px; margin: 20px auto;}
  #imgHolder.hover { border: 3px dashed #ccffcc; }
  
  /* editable text */
  #editable {border: 1px solid #ccffcc;}
  #editable.hover { border: 1px dashed #ccffcc;}
JavaScript
- Add a <script> tag inside of the wrapper
- Inside the script tags, add this code to handle the editable text:
  - var editable = document.getElementById('editable');
    
    editable.addEventListener('blur', function () {
    localStorage.setItem('contenteditable', this.innerHTML);
    document.designMode = 'off';
    }, false);
    
    editable.addEventListener('focus', function () {
    document.designMode = 'on';
    }, false);
    
    document.getElementById('clear').addEventListener('click', function () {
    localStorage.clear();
    window.location = window.location; // refresh
    }, false);
    
    if (localStorage.getItem('contenteditable')) {
    editable.innerHTML = localStorage.getItem('contenteditable');
    }
    //end contentEditable
- Then add this code to handle the viewing of images:
  - //begin file view
    var imgHolder = document.getElementById('imgHolder');
    
    imgHolder.ondragover = function () { this.className = 'hover'; return false; };
    imgHolder.ondragend = function () { this.className = ''; return false; };
    imgHolder.ondrop = function (e) {
    this.className = '';
    e.preventDefault();
    
    var file = e.dataTransfer.files[0],
    reader = new FileReader();
    reader.onload = function (event) {
    imgHolder.style.background = 'url(' + event.target.result + ') no-repeat center';
    };
    reader.readAsDataURL(file);
    
    return false;
    };

Exercise Specifications

Finalization