Title: jQuery Magic
Type: Homework
Duration: "4:00+"
Creator: Karolin Rafalski
Competencies: create, append/remove elements in the DOM using jQuery, traverse the DOM, add/remove attributes
Prerequisites: JavaScript, HTML, CSS
You are now a wizard and you will no longer hard code html during your time at Hogwarts (or the duration of this assignment)
You will make things appear and disappear (and more) with the magic of jQuery!
This homework is recommended to be done with a Harry Potter theme. But if you are unfamiliar with Harry Potter, that's cool, you can make up all your wizard details.
- Make a folder inside your
homeworkfolder for today calledhogwartsand make the html/css/js file structure and link up jQuery with the cdn.
- Add a
<div id="container"></div>inside the<body>tags
🔴 The commit message should read:
"All my files are linked and loaded"
Important: As always, use console.logs all the time and log everything. But you should remove (or comment out) console.logs that you no longer need. There will be no further prompts for this advice.
-
Open up your jQuery magic markdown file- for reference
-
Make sure that your pages loads completely before you start using magical jQuery by adding
- Query for your div with the
idofcontainerand set it to a variable named$container - console.log
$container - Create an
<h1>element and set it to a variable called$h1and console log it - Add some text inside the
h1element. Example text: 'Hogwarts' - Why isn't your
$h1it appearing on your page?
Hint
It needs to be appended
- Append your
$h1to your$container
-
It's magic! Isn't it?
-
In your
style.cssfile, add a css rule where all text will align center inside thebody
Test yourself
Your HTML structure should look like this
🔴 The commit message should read:
"I added my first element and it was fun"
Following what you did in Year 1, add the following:
h2element with your nameh3element with your house (Hufflepuff, Gryffindor, Ravenclaw or Slytherin )h4element with your pet's name- this
h4element should have a class with a value of your pet type (owl, cat, toad, etc)
- this
h4element with your wand (You can make it whatever you want. Need help coming up with one? Here is one of many websites to help you find your wand playbuzz.com )- In your
style.cssadd an attribute offont-family: fantasy;to all elements that have a class that matches your pet's class
Test yourself
Your HTML structure should look like this
🔴 The commit message should read:
"Added more elements. My power grows with my dedication and hard work."
Following what you did in previous years, add the following into an unordered list (with the attribute of storage and a value of trunk):
-
list items of
- butter beer
- invisibility cloak (add a class of secret)
- magic map (add a class of secret)
- time turner (add a class of secret)
- leash (for your pet, be sure to give this list element the same class as you gave your pet)
- Bertie Bott's Every Flavor [Jelly] Beans.
- append the unordered list to your container div
-
In your
style.cssfile, give the items with a class of secret an attribute ofopacity: 0.5; -
In your
style.cssfile, remove the bullet points from the list items
Test yourself
Your HTML structure should look like this
🔴 The commit message should read:
"Added list elements. That code didn't seem very DRY. I wonder if Hungry for More will have me DRY it up a bit."
You want to show off how many classes you are taking
- Make a table
Hint: Look under More Examples, <p>Simple table with header</p> at MDN to see the correct HTML element layout
- Right above your table add an
h5that says 'Spring 2017' - Inside the table add a
theadelement - Inside the
theadelement add twothelements- in the first
thadd the textDay- in the second
thadd the textClasses
- in the second
- in the first
- Create a
trelement and add twotdelements inside.- in the first
tdadd the day Monday - in the second
tdadd the classes you are taking ( Herbology, Divination, History of Magic, Charms, Potions, Transfiguration, Defense Against the Dark Arts, Quidditch practice, etc.)
- in the first
- Create more
trelements withtds inside so that you have Monday - Friday and classes each of those days - In your
style.cssfile, add a gray 1px solid border around yourtable,thelements andtdelements - In your
style.cssfile, add a rule that will center yourtableon the page
Test yourself
Your HTML structure should look like this
🔴 The commit message should read:
"I realize I can make things that are increasingly more complex with greater ease. Adding order is always more effort than causing chaos."
Things get interesting
- Break your wand! (select the element that contains your wand and remove it)
- Class was hard! Drink all your butter beer! (remove just the butter beer from your list)
- Get a new wand (add the same element back with new text describing your new wand. Be sure to insert it after your pet in the DOM)
- Make your new wand stand out by adding a
colorofindigo(or whatever color you like). But do it with magic (jQuery): Don't add this css in yourstyle.cssfile - Send your pet on a spy mission (remove your pet from the DOM, put it somewhere else in your HTML). Make sure your pet's leash stays in your trunk (list item with the same class as your pet inside
unordered list) - Have your pet come back (remove your pet from the DOM, put it back in its original location)
🔴 The commit message should read:
"The days go by slowly and the years go by too fast"
School is so fun!
- Nosey roommate alert! hide (use jQuery method hide) to hide all your belongings with a class of secret (give an argument of 'slow' - to see this function in action)
- Nosey roommate falls asleep 2 seconds later (chain the jQuery method
delayon yourhidemethod (give argument of at least2000) to prevent showing your secret elements too soon. - Use jQuery method
showto reveal all of your belongings with a class of secret (give an argument of 'slow' - to see this function in action) - Accident! You transmogrified your pet's leash into half cabbage
- add the class cabbage to your pet's leash. Do not replace your pet's leash's original class. Your pet, which also has the same class should remain unaffected
- add an attribute of
color: chartreuse;in yourstyle.cssfor all elements that have a class of cabbage
- Fix your pet's leash by removing the class of cabbage (be sure to keep your pet's leash's original class)
🔴 The commit message should read:
"A cauliflower is a cabbage with a college education - Mark Twain"
Though your time at Hogwarts is nearly over, your journey of learning has just begun
- Update your class schedule to read 'Fall 2018'
- Celebrate by buying more butter beer! Append a list item with the text 'Butter beer' as the first list item inside your unordered list with the value of
trunk - Whoops! You broke your trunk when you stood on it while singing karaoke. Get a new storage container for your stuff; replace the unodered list's property of
trunkwith a new property ofchest - Add some CSS to your page. Feel free to experiment and make this page your own
🔴 The commit message should read:
"I am getting more comfortable with ambiguous instructions"
- Research how to and then add a Favicon (ok to hard code this in your
index.html) - Refactor your code. Make it more DRY. Are there places you could have used a for loop? Functions you could have created? Any jQuery functions you could have chained?
- Clean up your code. Check indentation be sure you have plenty of comments
- Add more delays to show your pet leaving and coming back from its mission Get inspiration here
- Add CSS animations. We havn't covered them yet. Get inspiration here