Skip to content

Let's add a form to our blog so that we can create new entries!

Notifications You must be signed in to change notification settings

mmpadget/05-form-building-workshop

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CF Lab 05: New Article Creation

Code of Conduct

Submission Instructions

When you are finished with lab, follow these steps to submit your work. Create one Pull Request (aka: "PR") from your Forked repo to the CF repo with your changes, and you'll each submit that same PR link in Canvas.

  1. Ensure that all your local changes are committed, and pushed to your origin repo.
  2. Visit the origin repo on github.com, and ensure that all of your completed work has been merged to master via Pull Requests within your repo.
  3. Create a new PR from your Fork to the CF repo and ensure the branches look correct.
  4. Fill in the template based on the text box prompts:
  5. Write a good descriptive summary of your changes: 1. Be sure to include how much time you spent on it, and who you worked with. 1. Briefly reflect on and summarize your process.
  6. When you create the PR, it will have a unique URL. Copy this link, share with your partner, and paste it into the assignment submission form in Canvas. Both the driver and the navigator will submit the same PR link.

Learning Objectives

  • Recap the primary concepts discussed throughout the week.
    • Ask the students "What have you learned so far?"
    • Ask "What has been challenging?"
    • Ask "What has been helpful?"
  • Work through a form-based inputs to build out a JSON string export of a new blog article.
  • Implement 3rd party library integration for dynamic code highlighting and markdown creation.

Resources

HighlightJS Docs MarkedJS Docs


Feature Tasks

  1. We have two new libraries that we'll be working with today; highlight.js and marked.js
  2. Focusing on the functionality of adding a new article through a form submission, complete the TODOs in articleView.js.
  • The body field of your form should be able to accept formatting via Markdown syntax, including code blocks and snippets.
  1. Reminder: use template literals rather than string concatenation where applicable

Stretch Goals

  • We will not do anything with the tab navigation on new.html in the workshop; if you want, get this navigation working as either show/hide like we did on the index.html page, or have it work with an anchor tag that will scroll down to the preview when that is selected.
  • Rather than simply making copy-paste JSON readily available, have the new articles created with the form populate into the rawData array when the "Publish" box is clicked. Think carefully about how to make this user-friendly; it might require rethinking or refactoring how the "Publish" box works, or perhaps adding another button.

Rubric

Criteria Pts
Meets all Assignment Reqs 6
Uses idiomatic code style 3
Follows proper Git workflow 1
Total 10

About

Let's add a form to our blog so that we can create new entries!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 45.1%
  • JavaScript 31.1%
  • CSS 23.8%