<!-- This section or div is a container for the entire body of the website. Refer to the #body-container part of the CSS for styling we have applied to this section -->
<div id="body-container">
  <div id="heading-container">
    <div class="heading">
      <h1>My Photo Blog</h1>
    </div>
  </div>
  
  <!-- This section is the overall container for creating a new post. It includes a button that will show or hide the form to create a new post as well as the form itself. -->
  <div id="add-new-post-container">
    <!-- This section is the button to show the new post form -->
    <button class="new-post-button" onclick="showNewPostForm('new-post');">New Post</button>
    <!-- This section holds the form for creating a new blog post -->
    <div id="new-post">
      <form id="new-post-form" class="new-post-form">
        <!-- This part of the form is the image URL field -->
        <div class="new-form-image">
          <label class="new-post-label">Image URL</label>
          <input class="new-post-field" id="image-url" name="image-url" type="text" required />
        </div>
        <!-- This part of the form is where you enter the description -->
        <div class="new-form-description">
          <label class="new-post-label">Description</label>
          <textarea class="new-post-field" id="description" name="description" require>
          </textarea>
        </div>
        <!-- This part of the form is the save or 'Create Post' button -->
        <div class="new-form-save">
          <input type="submit" value="Create Post" id="create-post-button">
        </div>
      </form>
    </div>
  </div>
  
  <!-- This section is the overall container for ALL the blog posts -->
  <div id="content-container">
    <!-- This section is a container for an INDIVIDUAL post -->
    <div class="content-area">
      <!-- This is the section for the image part of a post -->
      <div class="image-area">
        <img src='https://cdn.kimkim.com/files/a/content_articles/featured_photos/5e127319f07b73e844245fc1e306775d2631d96e/big-34e9cae75b6de8ca7644837b839e89ba.jpg'>
      </div>
      <!-- This is a section for the description part of a post -->
      <div class="description-area">
        This photo is of Table Mountain in Cape Town, South Africa. This is the description part of a post. #photo #myblog #coding.
      </div>
    </div>
  </div>
</div>

/*Here we are importing the Galada font provided by Google. 

Go to https://fonts.google.com/ to see the list of fonts available and replace 'Galada' with the name of the font you want to use. 

You will also need to update the part of the CSS related to the section of the website you want to change. 

In this example I want to use Galda for the heading so I added it under the #heading-container part of this CSS. Keep scrolling to find it.*/

@import url(https://fonts.googleapis.com/css?family=Galada);

/* Here I am importing the Oswald font. Scroll to the  #content-container part of this CSS to see how to use it.*/
@import url(https://fonts.googleapis.com/css?family=Oswald);

/* Importing Abel font to use it for the 'New Post' button */
@import url(https://fonts.googleapis.com/css?family=Abel);

/* 'body' is a keyword in CSS.

Any styling defined here will be applied to the entire website. We gave it a light bblue colour to make it easy to spot what the boundaries of this section are.
*/
body {
  /* 
  Here I am setting the background colour for the page. Go to https://htmlcolorcodes.com/ to find a color and use the Hex value
  */
  background-color: #D3F2F7; 
}

/*
The styling here is for the section we have created to be the container for our blog.

We gave it a light grey colour so you can see how it differs from the body keyword above.
*/
#body-container {
  /* aligns text to the center of the screen*/
  text-align: center;
  /* uses only 50% of the width of the page contents */
  width: 50%;
  background-color: #F8F8F8; 
  /* aligns the section to the center */
  margin: auto; 
  /* round the corners of the content area */
  border-radius: 1em;
}

/* Styling for the heading section of the page */
#heading-container {
  /* change Galada to the name of the font you want to use */
  font-family: "Galada"; 
  /* font size */
  font-size: 2.5em; 
  /* font colour */
  color: #330867;
  /* space above heading and start of the content area */
  padding-top: 0.1em;
}

/* Styling for the container for creating a new post */
#add-new-post-container {
    font-family: "Abel";
}

/* Default styling for the button to show/hide a new post */
.new-post-button {
  /* give the button a thin lilac border */
  border: 1px solid #E2DEF9;
  /* round button borders */
  border-radius: 0.5em;
  
  /* button font and styling */
  font-size: 1.5em;
  font-weight: 0.5em;
  color: #3D2E6E;
 
  /* button size and colour */
  background-color: #E6E6FF;
  padding: 0.3em;
  
  /* add space below button */
  margin-bottom: 2em;
}

/* change the style of the button when the user hovers over it*/
.new-post-button:hover {
  background-color: #564592;
  color: #EFECFA;
  /* adds a shadow behind the button */
  box-shadow: 0.1em 0.1em 0.2em #D3D0DE;
}

/* 
Initially the new post for should be hidden
*/
#new-post {
  display: none;
}

/* Positioning the new post form to show how we want it to on the page */
.new-post-form {
  /* make the new form area 80% of the width of the page */
  width: 80%;
  /* position the new form area to the center of the page*/
  margin: 0 auto;
  text-align: left;
}

/* Styling for the labels on the new post form */
.new-post-form label {
  font-size: 1.5em;
  font-weight: bolder;
  display: inline-block;
}

/* Styling the text box the image URL */
input[type="text"], textarea {
  width: 100%;
  height: 3em;
  margin-top: 2em;
  
  font-family: "Abel";
  font-size: 1em;
}

/* Adding space to the top of the field for adding a description to a new post */
.new-form-description {
  margin-top: 2em;
}

/* Styling the section the holds the button to save or create a new blog post */
.new-form-save {
  /* space above 'Create Post' button */
  margin-top: 2em;
}

/* Styling the 'Create Post' button itself */
#create-post-button {
   /* give the button a grey blue border */
  border: 1px solid #CFCFCF;
  /* round button borders */
  border-radius: 0.5em;
  
  /* button font and styling */
  font-size: 1.5em;
  font-weight: 0.5em;
  color: #303A64;
 
  /* button size and colour */
  background-color: #CFCFCF;
  padding: 0.5em;
}

/* change the styling of the 'Create Post' button when the user hovers over it */
#create-post-button:hover{
  background-color: #133A5B;
  color: #E3FAFF;
}

/* Styling the overall container for ALL the blog posts */
#content-container {
  /* change Oswald to the name of your font you want to use for the main body of the blog*/
  font-family: "Oswald";
  /* add some space at the top of the post to separate it from what's above it */
  padding-top: 4em;
}

/* Styling the image area for each post */
.image-area img {
  /* crop the image */
  max-width: 50%;
  max-height: 50%;
  
  /* round image borders */
  border-radius: 1em;
}

/* Styling the description area for each post */
.description-area {
  /* space before and after description */
  margin-top: 1em;
  padding-bottom: 2em;
  
  /* font size and colour */
  font-size: 1.2em;
  color: #404040;
}

// This is triggered when we click the 'New Post' button. It displays the form for creating a new post.
function showNewPostForm(id) {
  var form = document.getElementById(id);
  if (form.style.display == 'block') {
    form.style.display = 'none';
  } else {
    form.style.display = 'block';
  }
}

// Here were are finding the exact button to create a new post
var createNewPostBtn = document.getElementById('create-post-button');

// When the user clicks the 'Create Post' button we want to grab the information they've entered and use it to create a new post
createNewPostBtn.onclick = function() {
  // This is needed for CodePen
  event.preventDefault()
  // here were are finding the section of the page where we want to add the new post
  const container = document.getElementById('content-container');
  
  // here we get the values for the image url and the description that the user entered
   const imgUrl = document.getElementById('image-url').value;
  const desc = document.getElementById('description').value;
  
  // here we create the section that will hold the new post
  let newContent = document.createElement('div');
  newContent.className = "content-area";
  
  // here we create the section that will hold the image of the new post
  let newImage = document.createElement('div')
  newImage.className = "image-area";
  newImage.innerHTML = "<img src='" + imgUrl + "'>";
  
  // here we create the section that will hold the description of the new post
  let newDesc = document.createElement('div');
  newDesc.className="description-area";
  newDesc.innerHTML = desc;
  
  // here we add the image and description to the new post section
  newContent.appendChild(newImage);
  newContent.appendChild(newDesc);
  
  // here we add the new post to the page
  container.appendChild(newContent);
  
  // here we reset the form and then hide it again.
  document.getElementById('new-post-form').reset();
  showNewPostForm('new-post');
}