JavaScript Final Project

For the final project for this course, you can make anything you want with JavaScript! There are a few requirements, but other than that, feel free to create anything your heart desires. The requirements are listed below, along with some ideas to help you get started.

Requirements

Your project must have:

HTML & CSS

  • An HTML file
  • A proper link to a JavaScript file
  • At least one (1) input
  • At least two (2) buttons
  • At least three (3) styles

JavaScript

  • A JavaScript file
  • At least two (2) functions
  • At least three (3) variables
  • At least one (1) if statement
  • At least one (1) else
  • At least one (1) alert
  • At least one (1) prompt
  • At least two (2) uses of DOM Manipulation:
    • Getting a value from an input in JavaScript
    • Creating a new HTML element in JavaScript
    • Updating the text content of an HTML element in JavaScript
    • Changing a style on the page in JavaScript
  • At least one (1) for loop
  • At least one (1) array

Presentations

Students will be expected to present their projects at the last meeting of the semester.

Content

The presentation should include:

  • Background about the idea behind the website
  • An overview of the website's functionality
  • An explanation of any new topics learned
  • A brief look into any relevant or interesting parts of the code
  • A discussion of any challenges that arose during the project development

Procedure

Here are some guidelines for the presentations:

  • If a student is able to share their screen and talk through their project on Zoom, that is preferred
    • If a student does not have a microphone, they can join the Zoom meeting from a telephone
    • If a student cannot share their screen, they should share their project link with the instructors
  • A student also has the option of recording a video presentation
  • There will be a defined schedule and order for each student to present
  • If a student does not present a final project, they may not be able to move onto the next level of Hy-Tech Club

Ideas

If you're having trouble thinking of something you'd like to make, you can choose one of these ideas as a starting point.

Text-Based Adventure

Create a text-based game where the user can change the outcome based on their input. For example, the game could ask "Which direction would you like to travel?" and then do something different depending on if they say "North", "South", "East", or "West". You can expand the story as far as you'd like, as long as it meets the requirements above!

Personality Quiz / Calculator

Create a BuzzFeed-esque personality quiz. It should ask the user a bunch of questions, and then determine their personality (or anything else) based on their answers. You can start by thinking of some questions and answers, and figure out which answers should lead to which personalities!

Another option is to calculate their total score for a given personality type. For example, you could ask questions and determine how cool the user is based on their answers!

Hints

  • Start out by asking one question, and determining the user's personality based on only that
  • You may want to keep track of points for each different personality based on the answers to questions

Portfolio Website

Create a website that shows off some of the cool stuff you have done! If you are an artist, you can add images of your art, and create a gallery. If you are a musician, you can add some music to your page. Whatever you like to do, try to represent it on a webpage. You can also include some of the cool JavaScript stuff you have learned in class.

Examples

Tic Tac Toe

Create a two-player tic tac toe game. There should be a board with 9 squares, and the game should alternate Xs and Os for each click of a square. If one player gets three-in-a-row, the game should say they win. This one is very challenging!

2D breakout game

Follow the tutorial here: https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

Once you complete the tutorial, augment the game with some additional features so that it meets the requirements for the final project. Maybe update the colors of the bricks or change the speed of the ball using an input. Or, start/change the game with a button. Or, build in some powerups or other challenges. Make it your own!

Other Canvas game

Use the HTML5 Canvas to create a graphical game. Use the following tutorial as a reference: https://www.w3schools.com/graphics/game_intro.asp

results matching ""

    No results matching ""