Dyrits

Transitions - 20,000 Leagues Under the Sea

In this project you will follow step-by-step instructions to add animations to an existing static web page. The web page is an online reader; it presents the full text of the book “20,000 Leagues Under the Sea” by Jules Verne.

The page for the first chapter is mostly complete. There are a few fancy features:

• When you hover over the sidebar on the left, a menu opens which contains the Table of Contents.
• When you hover over a highlighted word in the text, a definition appears. See the words “phosphorescent” and “locomotion”.
• When you hover over the semi-transparent buttons at the bottom of the page, they turn opaque.
• When you hover over any link, it changes color.

These interactions add a level of refinement to an otherwise static page. Your job will be to refine them even more. Currently, all these changes happen in an instant. Add transitions to make the changes smooth.

Dyrits

Repetitive Cafe

Make use of some of the PHP loop shorthand to create HTML for a restaurant menu. Practice using the different loop types with HTML.

Dyrits

Supernatural Inheritance

At the Codecademy Guild of the Supernatural, there are three ranks of magicians. They rank from least to most powerful: Pupils, Mages, and Archmages. In this project, you’ll be developing a system in C# to track the weather magicians in the guild and their spells.

• Pupils have a title and can create one weak wind storm.
• Mages have a title and can create a weak wind storm and a weak rain storm.
• Archmages have a title and can create a weak wind storm, a strong rain storm, and a strong lightning storm.

Notice anything shared in these ranks? If we created a class for each type of magician, we would have a lot of duplicated code. For example, every magician has a title and wind storm. To avoid duplication, we’ll use inheritance.

• Pupil is the base class
• Mage inherits from Pupil
• Archmage inherits from Mage

Dyrits

App Interfaces

The team at Computron Computing has asked you to join their product team to develop the hottest new Computron computer. You’ll be responsible for building some of the standard apps on this new machine, specifically the to-do list and the password manager.

At this point in development you have two classes started: TodoList representing the to-do list application and PasswordManager representing the password manager. In order to work within the Computron system, every app must have a display and reset feature. In other words, each class will need to implement the IDisplayable and IResetable interfaces.

Classes can implement multiple interfaces using the colon and comma syntax:

class TodoList : IDisplayable, IResetable
{}

Dyrits

The Object of Your Affection

Your friend is building a new match-making service: The Object of Your Affection or OOYA for short (don’t worry, you still have time to convince them to change the name).

With your new understanding of C# objects and classes, your friend thought you could build a pretty well-organized system of dating profiles.

Your first step? Build a Profile class that allows users to generate profile objects.

Dyrits

True or False?

You’re taking an interactive quiz written in C#. Everything is going fine until you respond to this question:

This application wasn’t checking your input. When you used an unexpected format, it couldn’t ask the question again and marked your answer as wrong. (By botanical definition, eggplants really are berries!).

In this project, you’ll build a C# program that presents a quiz the right way: using arrays and loops, it will check the format of user input and repeat the question if the format is incorrect. After the quiz is complete, it will check the user’s responses against the correct answers and present a score.

Dyrits

Caesar Cipher

By 6 a.m. on Sunday, your team’s project is nearly finished. The Object of Your Affection (the name’s a work in progress) is getting attention from other teams in the hackathon. With one day left, they’re getting desperate. To steal your project idea, your competitors have been reading your team’s emails!

As the team’s C# expert, you have been asked to write a cipher: a tool to encrypt text, making it unreadable to other teams. You’ve decided to implement the Caesar Cipher, which was used by the Roman Empire to encode military secrets.

To use the cipher, draw the alphabet in a circle like so:

Dyrits

Exquisite Corpse

In the game Exquisite Corpse, participants draw either a head, body, or feet of a creature. The players don’t know how their part of the body connects to the other two, until the drawing is finished and revealed.

For this project, you’ll write a program that mimics the Exquisite Corpse game. Using methods, you’ll be able to randomly combine different parts of ASCII characters so they create a new creature.

Dyrits

Quote Keeper: Model Layer

In this project, you will be completing the test suite for the Quote Keeper application. The suite currently has feature and server tests to verify that a user can enter quote information, post it to the server, and view the information in the returned webpage. Those tests are passing, but the app doesn’t organize and store the quote data anywhere.

To test-drive that functionality, we’ve added one failing server test. It will push you to the model layer, where you will begin the red, green, refactor cycle, setting up a database and defining a model using MongoDB, Node’s Mongoose package, and the Chai assertion module.

Your suite will test code at every level of your application. When you write code in a new file, remember to import it to every layer so that your tests have access to it.

Dyrits

Pinpoint E-Commerce

In this project, you will use the knowledge you gained within the Color for UI lesson and apply it to an e-commerce checkout page. You will take an existing grayscale website and apply colors to various elements and sections within the design to ensure users understand the error and active states as well as primary calls-to-action.

This means you will need to consider which elements need to be updated based on providing the user with enough information to continue adding their information to complete their checkout process.

Remember, it’s important to use colors that will help them make the right decisions and provide feedback they can adequately act on.

Please note the workspace example on the right is built to fit into the viewing area. If you increase and decrease the viewable area of the web site, the site will update and respond to the viewport’s dimensions.