Blackjack

In this project you will create a playable game of Blackjack.

Objectives

• Create an event-driven user interface
• Effectively use loops, conditionals and other control structures to implement control flows
• Demonstrate usage of JavaScript objects and arrays to model resources

Requirements

Create a single player black jack games that plays against the house, i.e. a human player and computer dealer. You are free to create the user interface however you want, but keep it simple for Explorer Mode.

General Rules:

• The game should be played with a standard deck of playing cards (52).
• The house should be dealt two cards, hidden from the player until the house reveals its hand.
• The player should be dealt a hand that contains two cards, visible to the player.
• The player should have a chance to hit (i.e. be dealt another card) until they decide to stop or they bust (i.e. their total is over 21 ).
• When the player stands, the house will reveal its hand and hit (i.e. draw cards) until they have 17 or more.
• If either the house or the player bust, they lose.

Assets

• Find a set of card images here
• Make an images folder in your project
• Extract that cards.zip file and then copy/move the extracted images into your project's images folder
• Note that the names of the images are of the form face of suit.svg (without the spaces)

Explorer Mode

• The player should have two choices: "Hit" and "Stand"
• Consider Aces to be worth 11, never 1.
• The page should display the the winner. For this mode, the winner is defined as who was closer to a blackjack (21) without going over.
• There should be an option to play again; this should reset the hands and reshuffle the deck.

Adventure Mode

• Reveal one of the house's cards to the player when cards are first dealt.
• Consider aces be worth one or eleven.
• Allow the player to "Split".
• Improve the win requirements. From Wikipedia:

  Players win by not busting and having a total higher than the dealer, or not busting and having the dealer bust, or getting a blackjack without the dealer getting a blackjack. If the player and dealer have the same total (not counting blackjacks), this is called a "push", and the player typically does not win or lose money on that hand. Otherwise, the dealer wins.

Epic Mode

• Add a betting system that carries between rounds
• Allow the player to "Double down" or "Surrender"
• Add more Players

All Cards on Deck!

In this project, you will use JavaScript to model a deck of playing cards. You'll also add functionality to it such as shuffling and dealing.

Shuffling Cards

Computers are notoriously bad at random numbers. This is a pretty deep and complex topic, but it's worth pointing out that most random numbers we use in computing are actually "pseudorandom". For this assignment, you will read about, then implement, a popular algorithm that shuffles the order of a finite set using JavaScript's built in Math.random() function as a pseudorandom number generator.

Objectives

• Demonstrate usage of JavaScript objects and arrays to model resources
• Understand and implement algorithms
• Create an event-driven user interface

Requirements

• Your deck should contain 52 unique cards.
• All cards should be represented as as string such as "Ace of Hearts"
• There are four suits: "Clubs", "Diamonds", "Hearts", and "Spades".
• There are 13 ranks: "Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", and "King".

You will model these in code, in any way you see fit. It may require you to experiment and try a number of techniques. There are many valid solutions. Your user interface should consist of a face down deck, and a face up "hand" of cards that have been dealt.

Read about, and implement the Fisher–Yates shuffle algorithm:

For our purposes, n is 52:

for i from n - 1 down to 1 do:
  j = random integer (where 0 <= j <= i)
  swap items[i] with items[j]

Explorer Mode

• The deck should be randomly shuffled when the page is loaded.
• Clicking on the deck should deal a single card, making it visible in the face up hand.

Adventure Mode

• Implement a way to deal cards into two or more hands

Epic Mode

• Implement the game of War

Additional Resources

A Hint on Random Numbers

This snippet will give you a random integer, z between 0 and n:

const z = Math.floor(Math.random() * n)

Let's break this down from the inside out:

1. For this example, assume n is 20.
2. We use Math.random() to generate a floating-point number between 0 and 1. Let's assume our random value is 0.42.
3. Multiply that number by n. If we think of this random value as a percentage, multiplying these gives us a number that is some "percentage" of n. Their product is 8.4, or 42% of n.
4. We use Math.floor() to round down to the nearest whole number, i.e. 8.

Because we're rounding down, it's impossible to get 20. This will give us an integer between 0 and 19. This technique is perfect for finding a "random" index in an array of length n.

Slides

https://slides.com/markdewey-1/arrays-and-loops

Octodex

GitHub has a great mascot called OctoCat. OctoCat even has its own gallery of variations, created by GitHub itself and fans, called Octodex.

Unfortunately, the Octodex is not responsive*! Today, your task is to recreate the layout of The Octodex as closely as possible, but make it responsive. You can use all the tools you have at your disposal to get the job done. Use your browser's Developer Tools to inspect their site to find the exact font sizes and padding amounts.

* Well, actually it uses javascript to set the number of columns on page load, but we want to see interactive responsiveness when we resize our window!

Objectives

• Build on your knowledge of HTML & CSS
• Implement, from scratch, a given design
• Understand HTML/CSS Layout
• Be able to place elements on a page where you want them.
• Use flexbox techniques layout pages.

Requirements

• You should strive to implement the design as close as possible, though, especially if you've never touch HTML or CSS before, this can be extraordinarily difficult and will take a lot of practice and mileage.

• Note: You should complete at least the tasks given for explorer mode as listed below before turning in the assignment, as well as before attempting adventure or epic modes.

Explorer Mode

• Recreate the page as closely as you possibly can. Use the same fonts, sizes, and colors. Download some of your favorites
• Use some Octocat images to use in your page (12-16 or so). Your layout should be flexible but doesn't need to perfectly responsive.
• Use flexbox styles to layout the header and the Octocats (hint: check out the flex-wrap property).

TIP Reminder to breakdown the layout into smaller chunks that are easier to style

Adventure Mode

• If you're feeling adventurous, use CSS media queries to resize the Octocat containers to look great as a single full-width column on small screens and a nice grid on bigger screens.
• watch this video to work more with media queries https://www.youtube.com/watch?v=2KL-z9A56SQ

Epic Mode

• Go back to your hobby website and update site to be mobile friendly and responsive.

Additional Resources

• List of Octocats
• Install the JSON Viewer Chrome Extension to make the List of Octocats nicer to read
• https://www.youtube.com/watch?v=2KL-z9A56SQ

Choose your own API Adventure

In this assignment, you'll build a front end for an API of your choice

Objectives

• Learn about APIs and fetch
• Learn about API documentation (some are great, and some are terrible)
• Creating and designing your own features for a web app

Requirements

We're going to build a front end for an API of your choice. Choose one from this list

NOTE You'll need to choose one with Auth being No since we haven't covered apiKeys or OAuth authentication yet. We will go over this on Thursday

NOTE You'll also need to check to see if the API will work from your browser. You can do a quick check by making a small app-app, doing a cURL request.

Explorer Mode

• Select an API.
• Read your API docs
• Create a list of the features you are going to create and how they will work
• Design your User Interface
• Design your HTML statically
• Make it dynamic
• Deploy it and share it with friends

Adventure Mode

• Add multiple pages to your site.
• Add a second API

Score Board

For this assignment, you will be creating a simple interactive scoreboard for your favorite sport.

Requirements

• Refer to this mockup to design your page:

• Use the HTML and CSS here to jump-start your project.
• A user should be able to update a score and the teams playing.

Explorer Mode

• Create a new project and implement the design using the given HTML & CSS.
• Assign click events to the update buttons to update the corresponding values on the page. The score buttons should adjust the current score by a "hard-coded" value.
• Deploy your site.

Adventure Mode

• Implement a Quarter/Period Tracker that would be appropriate for the sport.
• Add some styling to make it more presentable. Have fun with it.
• Make the layout responsive.

Epic Mode

• Add a Timer that counts down automatically and updates the period/quarter appropriately.
• Save/load the information to local storage.
• Add CSS to the winning teams score to indicate who is currently winning.
• Add anything else that your sport would have on its scoreboard (e.g. fouls, sacks, shots on goal, etc.).
• Improve the UX to help to make scorekeeping by your sport easier.

Expanding Your World

In this assignment, you will end up with a simple styled web page, published on the web.

Create a new website that shows some basic styling and formatting using HTML and CSS. This website should help share some information for one of your favorite hobbies.

Objectives

• Practice using your tools text editor
• Explore new CSS properties
• Publish a web page

Requirements

• Have git, hub, and node installed. We should have done this together in class.

Explorer Mode

• Follow all of the setup instructions (See "Assignment Setup").
• Create a new app-app project.
• Using CSS, style your page to imitate some of the classic designs of the web. Feel free to make this look as "bad" as you want. Here are some sites to gain inspiration:
  • 10 90s websites designs you won’t believe existed
• Add a second page about your hobby with (at least) 2 pictures and with other facts about your hobby.
• Add a menu to your site so a user can go back and forth between the new pages.
• Between the 2 pages, use at least 5 tag selectors, 5 id selectors, and 5 class selectors to style content on your page.
• Deploy your site.
• Complete Flexbox froggy

Adventure Mode

• use pseudo-classes to style elements when you hover the mouse over them
• Add a third page, that has a table. Create this table to have alternating colored rows and a hover over color.
• Make a nav bar that sticks to the top of the page (see the nav bar here for example - https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
• Make a footer that always sticks to the bottom of the page

Epic Mode

• Explore CSS animations and add some life to your static page. Feel free to really dig into these and try to animate all elements on your page to some extent

Additional Resources

• CSS we like
• HTML we like

CSS

• Cool game to learn CSS selectors
• Introduction to CSS
• Getting Started with CSS Rules
• All the CSS properties
• pseudo-classes and pseudo-elements
• http://www.csszengarden.com/

HTML

• HTML Tags
• Evolution of the Web

Hello, World.

In your first assignment, you will end up with a web page, no matter how simple, published on the web.

You will create a simple website that will showcase one of your passions. This is not about making the website flashy, but more about focusing on creating a website and learning your new tools.

Objectives

• Get to know your text editor
• Introduce yourself to working on the command line
• Write some HTML

Requirements

• Have git, hub, node, app-app installed. We should have done this together in class. Reminder: you only have to install these tools once.

• All of your HTML (and CSS if you do epic mode) should be formatted cleanly and consistently (use your editor to your advantage).

• If you have experience with existing HTML/CSS frameworks (bootstrap, bulma, etc) you may not use them for these assignments.

Explorer Mode

• Follow all of the setup instructions.
• Compose a short essay (just a couple paragraphs at most) about a hobby you either enjoy, or would like to learn about. We will be expanding on this page in future assignments, so pick something fun!
• Put your short essay into an HTML page, using appropriate semantic HTML tags. (See the link HTML Tag Reference below). Give your webpage a simple header and footer as well.

Adventure Mode

• Use at least one image somewhere on the page.
• Learn about and investigate the a to add (at least 2) more pages to your site.
• Re-deploy your site.
• Read more about CSS.

Epic Mode

• Research the id and class HTML attributes.
• Use valid CSS to style the page (in the neighborhood of a couple dozen CSS declarations).
• Create a full layout for your page (heading, navigation, sidebar, footer, etc.).
• Use more complex CSS selectors than we covered in class, e.g. attribute selectors or sibling selectors.

Additional Resources

• HTML Tag Reference
• How do HTML Tags work
• Evolution of the Web
• Getting started with VS Code
• Visual Studio Code Basics