My Developer Skills Lab









Introduction

This lab provides an opportunity to practice working with jQuery.

This lab is not a deliverable.



Setup

  1. Create a code sandbox called dev-skills-lab
  2. Inside of dev-skills-lab create the following folder/file structure:
  index.html
  css/
   style.css
  js/
   script.js

  1. Do the usual when setting up a front-end project:

    • Add the HTML boilerplate to index.html
    • Link in ./js/script.js - don't forget the defer attribute!
    • Link in ./css/script.css

  2. Load jQuery from the CDN by adding the following before your script.js:

    <script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
  3. Code away!



Requirements

  1. Add HTML and CSS as necessary to implement an application that looks close to this wireframe:

  2. Code the following user stories, using jQuery where possible:

    • As a User (AAU), I don't want to see any developer skills when the page first loads so that I can start with a fresh slate.
    • AAU, I want to be able to type in a skill and have it added to my list of skills by clicking a button.
    • AAU, I want to be able to remove an individual skill one at a time in case I make a mistake.



Bonus


Replace the first user story above with the following story:
  • AAU, I want to see my previous list of developer skills so that I can start from where I last left off.
Hint:
  • Research localStorage as a way to persist (remember) the developer skills each time they are updated.