Add JavaScript capabilities to your HTML/CSS website project!
Give your website’s users the ability to interact with your website.
Your JavaScript code needs to relate to your website’s topic.
JavaScript Project Ideas
You will need to be creative to pick a good idea that’s possible for you to pull off in just a couple of days! Here are some examples:
- Ability to click or hover on a small preview image and show the larger image
- Have a content box that changes content when you click different things on the page
- Have “show more” and “show less” buttons to expand and hide content
- Validate form data (e.g. don’t let a form submit until the required fields are entered)
- Cause a popup or animation to appear when a page is loaded
- Personality Test
- A special calculator specific to your topic
- Survey that shows a results graph after you submit
- Dynamically modify styles in a way that makes the website easier to use.
- Modify some user entered text in a fun way, such as converting text to pirate speak
You will be assessed on two standards:
Programming Grading Scale
Level 4:
Include multiple programming concepts like loops, if/else, arrays, functions, math, string operations, using parameters/return values
Try out a JavaScript library such as jQuery
You could even create a simple turn based game or simulation in JavaScript.
Use JavaScript to create HTML code and add it to the page (modify innerHTML). Example: create <li> items from a JavaScript array.
Level 3:
Include JavaScript functions that trigger on an event such as a button click.
Use some basic programming functions such as variables, if/else, etc.
Level 2:
JavaScript code uses document.getElementById() function to find and modify parts of your webpage.
Level 1:
JavaScript code is used. Code is very similar to provided examples, so only basic understanding is demonstrated.
Level 0:
Not enough evidence to show an ability to create JavaScript code.
Copying and pasting does not show understanding. You need to adapt example code for your own purposes.
Computational Artifact Grading Scale
(measures the quality of your website)
Level 4:
JavaScript creates a cool capability that makes the site worth visiting or more fun or more useful or easier to use.
Level 3:
JavaScript code adds functionality to the website that makes sense with the website’s overall topic.
It is obvious that this is custom JavaScript code written by the student for this website.
Level 2:
JavaScript code is included to allow the user to interact with the website in some way.
The code appears to have at least a loose connection to the website’s purpose.
Level 1:
JavaScript code allows user to interact with the website.
(Not necessarily in a way that has anything to do with the website’s purpose)