assignments's Introduction
assignments's People
assignments's Issues
Week 4 Day 2 - Top Artists -
Top Artists
Using the API located here https://www.last.fm/api/show/chart.getTopArtists (you need to make an account with last.fm to get your access key) Create me a page that displays the top artists using angularjs.
Objectives
- Work more with angular
- Work more with APIs
Explorer Mode
- Create a simple UI that displays the top 50 artist from the Last.fm API.
- Create and user a template file for an artist. This template should display the picture that came with the artist, the artist name, as well as the playcount and listencount (its all in the data, trust me)
- Give it basic styling, but dont go crazy, you have a hackathon to work on
Adventure Mode
- Work on your hack-a-thon project
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Week 1 Day 2 - Design Co. -
DESIGNCO
Replicate the DESIGNCO design mockup below using HTML & CSS (Cascading Style Sheets).
Objectives
- Build on your knowledge of HTML
- Get familiar with CSS
- Implement, from scratch, a given design
Requirements
-
The DESIGNCO logo has been supplied, along with a search icon. However the images for the gallery can come from placeholder photos or pick our your own.
-
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. Here's some examples of past student's work on this day two assignment:
-
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
- Use a list of links to create a horizontal top navigation bar
- Use
flexbox
techniques to craft the image grid as well as the columns in the footer to divide the content areas - Valid, neat, and organized HTML
- Valid, neat, and organized CSS
Adventurer Mode
- Make the top navigation bar links highlight the background color from top to bottom when hovered
- Give the images to indication that you're hovering your cursor over them
- Combine the second, third, and fourth columns to use a single block of wrapping text. Making it thrice as wide as the first column. hint:
flex-grow
Epic Mode
- Position the navigation bar to always be fixed on top of the screen
- Refine the layout so it works better on mobile phones using media queries
- Make the layout fluid using relative sizing so it can fit on a mobile phone
Setup
-
Open your Terminal and create and change into the project's directory:
mkdir -p ~/tiy/design-co cd ~/tiy/design-co
-
Run the generator to create a boilerplate project:
app-app --alpha
Answer "Yes" to the questions about GitHub and Yarn.
-
Open the project folder in Atom:
atom .
Remember
.
is an alias for the current directory. -
Tab back to your Terminal and start the development server:
yarn start
This should automatically happen, but if it doesn't; navigate to http://localhost:3000 in your browser. As you make changes to your code, the development server will automatically refresh this page in real-time.
While the development browser is running, it will control your Terminal, to exit it, press
Control-C
. You can always start it up again withyarn start
. -
Using the file browser in your editor, open the file
public/index.html
and format your work with HTML tags and place them into the document (remember all content goes inside the<body>
tags). Don't worry about the other files in the directory for now, we'll talk about those later, right now, we're mostly concerned with the two files inpublic
;index.html
andscreen.css
.
Turning In
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "I did things"
Replace "I did thing" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
-
Turn in the URL to your repository on GitHub in newline. It should look like:
https://github.com/USERNAME/PROJECT
Reading Material
To Help prepare for tomorrow's topic, watch this video series:
Week 4 - Day 4 - Geopardy -
Geopardy
Using this service for your data, http://jservice.io/, build a Jeopardy clone called Geopardy. First we will build the board and a one player game. After you get the basic mechanics, then worry about adding players
Objectives
Explorer Mode
- Display the questions and categories for 5 catgories in a Jeopardy style board (like this: https://lh3.googleusercontent.com/En2ljfur6ALCylFQ8cs6cG99TRvbH7sZDpl0gMsqsZXRk30FWJYcJjjedcW_WXcyw9PDcXVCyc1jSYU-KAn67w-udoY4gkeqqis8iuNc76AC-nxfO0no4FUPIFXW6jIOD55yJGgc)
- When a user clickes on a question, hide the board, and display the question. and allow the user to the type in a answer
- If they get the answer correct, add it to a score
- After the question is asked, they shoudl no longer be able to click on that square
- After all the questions have been asked, the game should have a reset button that gets 5 new random categories
- It should look like a Jeopardy board, though i am not expecting anything crazy
Adventure Mode
- Add player 2 and player 3
- Add 3 random daily doubles
- Add double Geopardy round
- Add a final Geopardy round
Getting Started.
You either use app-app --beta
like we have been doing, but if you want to use webpack, you can fork this repo (https://github.com/mdewey/angularjs-webpack) and , and use it as a starting point.
Tips and Tricks
- Break down the problems, one at a time, do not try to do too much at one time
- Remember, You can add properties to JavaScript Objects on the fly
ng-show
andng-hide
are your friends
Week 6 day 3 Car Dealerships -
Car Dealership
You are tasked with making a database diagram, database, and a few queries for a local car dealership
The database will have at least the following entities, and the following columns:
-
CarDatas
- Make
- Model
- Year
-
Cars
- Color
- VIN Number
- Date Added to Lot
- AvailableForLease
- MilesDriven
-
Customers
- FullName
- PhoneNumber
- FavoredCustomer
-
Leases
- ExpirationDate
- TotalCost
- UpFrontPayment
- CostPerMonth
The following relationships are true:
- A Lease has One Car
- A Lease can have Many Customers
- A Customer can have Many Leases
- CarDatas have multiple cars
NOTE: You need to add Primary Keys and Foreign Keys to the tables, as well as add any joining needed.
Objectives
- Practice working with SSMS and Databases
- Understanding and creating a Database Diagram
Explorer Mode
- Create a Database Diagram that illustrates the relationships. This should be a picture in the root of your repository
- Create the Database. I want to see the Create Database script that includes all the tables and relationships
- Create the following queries:
- Find all non Expired Leases
- Select the email of all favored customers
- Show me the make, model, color, availability, and Miles Driven for all Cars
- All the emails of Customers that have expired leases
- The make and Model of the cars that are leased out
Adventure Mode
- Using SQLCommand, Try to query your database from a C# program. Try to use this database from a console app. This a preview for Thursday topic.
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The files I am looking for are:
- A Script to recreate your database and tables
- A Script for each of the queries.
For SQL only Assignments, Add .sql
containing your queries to your repo.
SQL JOIN Diagrams
Week 6 Day 2 - Intro to SQL -
Welcome to SQL!
Get your feet wet with SQL and Databases. You will be creating 2 databases for me and writing some simple queries to gather from information. Use your best Judgement for data types the columns should be.
Objectives
- Practice Creating, Querying and using SQL databases
- Get your Local Dev set up.
Setup
- Download SQL Management Studio
- Download SQL Express 2017
Explorer Mode
-
Create a database to store Movies
- There shoudl be a Movie table with the follow columns:
- Id (PK)
- Title
- YearReleased
- Genre
- Tagline
- Rating
- Create a query that inserts a new Movie
- Create a query that Updates all Movies that were Released in the year 1988 to have a rating of 10
- Create a query that Deletes all Movies that are titled "The Neverending Story"
- Create a query that finds all horror Movies
- There shoudl be a Movie table with the follow columns:
-
Create a Database that will store a log of Bank Transactions for an account
- This should a table for Transactions with the follow columns:
- Id (PK)
- Timestamp
- Action
- AccountNumber
- AmountChanged
- newAmount
- Create a query that finds all transaction from Today
- Create a query that finds the 10 mist recent transaction for a Given User
- Create a query that Inserts a new Item into the table
- Create a query that counts all transactions for a Given Day and given day
- This should a table for Transactions with the follow columns:
Adventure Mode
- Using SQLCommand, Try to query your database from a C# program. Try to implement the logging from your bank App to log into the database instead of a file. This a preview for Thursday topic.
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The files I am looking for are:
- A Script to recreate your database and tables
- A Script for each of the queries.
For SQL only Assignments, Add .sql
containing your queries to your repo.
Additional Resources
Week 4 Day 1 Intro to AngularJs -
Score Board, take 2!
For this assignment you will re-create you scoreboard using angularjs a simple interactive score board for your favorite sport.
Check out the sample projects here:
https://github.com/PROforma-Cohort/Lecture-Examples/tree/master/week-4/day-1
A User should be able to update a score and the teams playing.
Objectives
Explorer Mode
- implement the basic HTML
- implement the basic formating. Do not worry about styling (colors and fonts and the like)
- add ng-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
Adventure Mode
- work on your hack-a-thon projects
- Complete Explorer Mode
- Implement a Quarter/Period Tracker that would be appropriate for the sport
- Add some custom CSS to make it more colorful. 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 anythign else that your sport would have on its score board (fouls, sacks, shots on goal, etc);
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Week 3 Day 4 - Hackathon -
Hackathon!
Your homework this weekend is the Hack-a-thon. Good Luck! I am here if you have any questions.
Turning in
To turn this in, on Sunday, submit to me the github repo that you are working on.
Week 7 Day 1 - Intro to EF -
Welcome to SQL!
Get your feet wet with Entity Framework. You will be creating 2 databases for me and writing some simple queries to gather from information. Use your best Judgement for data types the columns should be. You should not write a single line of raw SQL for this. All of your schema and queries will be in C#.
Objectives
- Practice Setup for EF
- Practice Using EF to work with a database
Explorer Mode
-
Each of the databases should be in their own Solution.
-
All the queries should run and the program should build.
-
All Queries should be using LINQ
-
Put all queries in
Main
inProgram.cs
-
Create a database to store Movies
- There should be a Movie table with the follow columns:
- Id (PK)
- Title
- YearReleased
- Genre
- Tagline
- Rating
- Create a query that inserts a new Movie
- Create a query that Updates all Movies that were Released in the year 1988 to have a rating of 10
- Create a query that Deletes all Movies that are titled "The Neverending Story"
- Create a query that finds all horror Movies
- There should be a Movie table with the follow columns:
-
Create a Database that will store a log of Bank Transactions for an account
- This should a table for Transactions with the follow columns:
- Id (PK)
- Timestamp
- Action
- AccountNumber
- AmountChanged
- newAmount
- Create a query that finds all transaction from Today
- Create a query that finds the 10 mist recent transaction for a Given User
- Create a query that Inserts a new Item into the table
- Create a query that counts all transactions for a Given Day and given day
- This should a table for Transactions with the follow columns:
Adventure Mode
- Refactor your Morse Code Program to use to a database instead of files. This should use EF to interact with the database.
Epic Mode
- Refactor your University of PROforma to use EF.
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are complete with your assignmnet, link the new repo here.
For this assignment, Put each of the projects in their own git repo and link both of them here.
Additional Resources
- https://msdn.microsoft.com/en-us/library/aa937723(v=vs.113).aspx
- https://github.com/TIY-NET-Tampa/Lecture-Examples/tree/master/week-6/IntroToEntityFramework/IntroToEntityFramework
Commands to consider
-- Install-Package EntityFramework
-- Enable-Migrations
-- Add-Migrations CreatedTable
-- Update-Database
Week 2 Day 4 - Weekend - Blackjack -
Blackjack
-
Create a single player black jack games that plays against the house. You are free to create the UI however you want, but keep it simple for level 1.
-
The UI should be as simple as you want to be.
Explorer Mode
- The game should start with a standard deck of playing cards (52)
- The house should be dealt 2 cards, these should be hidden from the user until the house reveals its hand
- As a user I should be dealt a hand that contains 2 cards
- The user should have a chance to hit (get another card) until they decide to stop or bust (the total is over 21 ), Aces are worth 11, not 11 or 1
- when the user is done, the house will draw it's cards until its has more than 18 or busts
- If either the house or the player bust, then they lose automatically
- The page should then display the the winner. The winner is defined as who was closer to 21 without going over
- there should be an option to play again, this should reset the hands and reshuffle the deck
- Add basic styling and formating, nothing too crazy
Adventure Mode
- Limit the number of cards in a hand to no more than 5
- give the user an option to have aces be 11 or 1
- Add a betting system that carries between rounds
- Add More decks
Epic Mode
- Give users an option to "double down" if they get a double
- Add more Players
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Tips:
Week 2 Day 1 - Scoreboard -
Score Board
For this assignment you will creating a simple interactive score board for your favorite sport.
A User should be able to update a score and the teams playing.
Objectives
Explorer Mode
- implement the basic HTML
- implement the basic formating. Do not worry about styling (colors and fonts and the like)
- add 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
Adventure Mode
- Complete Explorer Mode
- Implement a Quarter/Period Tracker that would be appropriate for the sport
- Add some custom CSS to make it more colorful. 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 anythign else that your sport would have on its score board (fouls, sacks, shots on goal, etc);
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Week 1 Day 4 - Weekend - Mock Portfolio -
A Portfolio
For your first weekend project, we're going to be starting work on a portfolio website that you can improve over the rest of your career.
You can find image assets you'll need here:
https://github.com/tiy-tpa-fee/assignments/tree/master/portfolio/assets
The font used is Roboto.
Objectives
- Build on your knowledge of HTML & CSS
- Implement, from scratch, a given design
- Use flexbox techniques layout pages.
Requirements
-
Initially, you should implement the design as close as possible to the mockup. Later, you might choose to fit your own personality/style.
-
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.
Adventure Mode
- Take the time to personalize the site.
- Keep it professional, but make it your own.
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Week 8 Day 2 - Bootstrap me in Capt'n -
Bootstrap me in Capt'n
Welcome to Try It Yourself
(TIY) Sports, the top sport tracking website for people who want to find sports to do try them selves.
However, before we can get started implementing our features we need to validate our visual design.
Our illustrious designer, B. Strap, has provided us with the following mockups for what the site should look like in both mobile and desktop forms. We also have the original image assets used in the mockup.
Our task is to reproduce this design!
Desktop view
Mobile view
Deliverables
- a github url with the all the files need to run the site
Explorer
- Use bootstrap to reproduce the design
- You do not need to add any additional CSS to achieve this design
- Remove all the old content from the index page and place your new HTML there
- Don't worry about making the data dynamic for this level.
- Do not vary from the design as provided, add nothing, and leave nothing out. Your design doesn't need to be pixel perfect, but with bootstrap it shouldn't be far off.
Adventure
- Using AngularJS and and API. Create an API that returns hard coded values for the site. Every item that could be dynamic should be represented in this view model
Epic
- Create a Database to support this site using EF and Make the HomePage Actually Dynamic
Bonus Level
- Keeping the same design feel, add more to the site. What other information could be added and how could we utilize bootstrap components to layout and style those.
Week 4 Day 3 - Hack-a-thong -
Attend the Hack-a-thon
Attend the Hack-a-thon.
Close this ticket. Nothing to turn in
Week 3 Day 3 - Weather API -
Weather Site
Create a web site that allows a user to search for a location and gets that places weather.
Use https://openweathermap.org/api for your API, will need to create an account and get an API Key to use. Let me know if this gives you trouble.
Objectives
Explorer Mode
- create a simple HTML page that has a text box and a search
button
- Allow the user to type in a place, click the search button, and , using
openweathermap.org
, get the current weather for that location - display the weather to user by adding elements to the DOM.
- allow the user to search by zip or city name
Adventure Mode
- Using the HTML5 Geolocation API, search for the users current location when page loads
- Store the Users last search and pull it and search for the value on page load
- remove the need for teh search button and search when the user stops typeing. HINT: use setTimeout and the change event. to track when the user stops typing.
Epic Mode
- Add a type a head using Google Places API
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Week 5 - Day 4 - Weekend - ATM Machine -
ATM Machine
Create a simple app that lets a user interact with their bank account. This will have relatively intense UI. Remember to try to separate out the logic from the UI using classes and methods. This program will keep track of the checkings and savings account.
(NOTE: Don't worry about security yet)
Objectives
- work with C# and practice program structure
- Practice working with Classes
Explorer Mode
- the system assumes only 1 user
- when the program starts, it will display the current balance for their checking and savings account. If none exist, show 0.
- Ask to do one of the follow transactions
- withdraw from savings, this should prompt the user to enter an amount to withdraw, then remove that amount. This should do some basic error handler (i.e, make sure that the value inputted is a number, that the user has enough funds)
- withdraw from checking, this should prompt the user to enter an amount to withdraw, then remove that amount. This should do some basic error handler (i.e, make sure that the value inputted is a number, that the user has enough funds)
- deposit to savings , this should prompt the user to add a an amount to this account, then add that amount. This should do some basic error handler (i.e, make sure that the value inputted is a number)
- deposit to checking, this should prompt the user to add a an amount to this account, then add that amount. This should do some basic error handler (i.e, make sure that the value inputted is a number)
- transfer money from savings to checking, this should prompt the user to enter an amount to transfer, then remove that amount. This should do some basic error handler (i.e, make sure that the value inputted is a number, that the user has enough funds)
- transfer money from checking to savings, this should prompt the user to enter an amount to transfer, then remove that amount. This should do some basic error handler (i.e, make sure that the value inputted is a number, that the user has enough funds)
- the system should save the new amount to a file after every action
- the system should load the current amounts when the program starts
- the system should log all the transactions that occur to a file, these logs should have
what was done
,the amount that moved
when it happened
andwhat accounts were affected
and other information you feel is useful
Adventure Mode
- Add the ability to have multiple users. These users should not be able to see other users accounts totals. Userss should have a user name and pin number.
- Add the ability to have more than 2 accounts. Create a unique account number for each account
- A User should be able to close their account
Epic Mode
- Add interest rates that happen ever so often (For testing, I would start with every second)
- A User can transfer a money to some one elses account, using either a username or account number
- Encrypt the files so that only your program can read and write to them
Setup
- open
Visual Studio 2017
and create a newconsole application
- be sure to select
create git repo
and make sure it has a.gitignore
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Week 1 Day 3 - Octocat -
Octodex
GitHub has a great mascot called OctoCat. OctoCat even has it's 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 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 a responsive design with media queries
- 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 favorite - [ ] 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: checkout the
flex-wrap
property).
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.
Setup
-
First, ensure you have the
app-app
generator installed. We may have done this in class, you only need to installapp-app
once :npm install -g app-app
Also, set up hub to use
HTTPS
rather thanSSH
for repositories:git config --global hub.protocol https
-
Open your Terminal and create and change into the project's directory:
mkdir -p ~/training/week-1/day-1/hello-world cd ~/training/week-1/day-1/hello-world
-
Run the generator to create a boilerplate project:
app-app --alpha --vscode
Answer "Yes" to the questions about GitHub.
-
Open the project folder in VS Code:
code .
Remember
.
is an alias for the current directory. -
Using the file browser in your editor, open the file
public/index.html
and format your essay with HTML tags and place them into the document (remember all content goes inside the<body>
tags). Don't worry about the other files in the directory for now, we'll talk about those later, right now, we're mostly concerned with the two files inpublic
;index.html
andscreen.css
.
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Extra Material
To work on media queries, watch this video:
https://www.youtube.com/watch?v=2KL-z9A56SQ
Week 9 Day 1 - Group News -
Extra Extra, Read all about it!
A local news station has contracted your group to build a new idea they have. The have this idea called "citizen journalism". They want a site that allows user to upload their own news story's, and view others peoples news stories. All Articles are posted anomalously,unless the author wants to share their information.
The site needs these three pages:
-
Dashboard
- should show the latest 5 stories for each category
- each stories should show the Headline, and the first 120 characters of the story
- Each story should link to the stories full page (see below)
- Should have a link to the Create story page (see below)
- Should have the news station local and tagline (have fun and get creative, keep it appropriate for work)
- should show the latest 5 stories for each category
-
Create Story Page
- should allow the user to enter in a new story,
- this should have at least
- headline
- body (the story)
- optional author
- Category
- this should have at least
- Once a story is created, the site should redirect to that story's page
- should allow the user to enter in a new story,
-
Story Page
- this should look like a news article, big headline, and the story body
The news stories should be stored in a database.
Objectives
- Work on using AngularJS create a UI on top of an API
- Creating an API
- Working in Groups on the same project
Explorer Mode
- Create the Dashboard page
- Create the "Create Story" page
- Create the "Story" page
NOTES
- Planning and organizing is very important
- Figure out how you are going to be organizing tasks
- Create you UI on paper/Whiteboard first, then go to implementation
- Even though you are making a UI, do not get caught up in how it looks, remember to make it functional, then make it working
- If you didn't complete the weekend assignment, work on creating the UI first for the endpoints you have, then work on extending your API
- A user only needs to supply an email to checkout a book, full blown authentication is not needed.
Adventure Mode
- Let the user see all stories in a given category
- Add a location to each story and have the user be able to see what is happening around them
- Give your site a slick UI that is mobile friendly
Epic Mode
- Add a up/down voting system
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are complete with your assignmnet, link the new repo here.
Week 3 Day 1 - Catch your Breathe -
Catch your Breathe
We have been going a fast pace for the past couple of week. Every so often, you need to reflect on how far you have come.
For tonight, we are going to take a little code break and create a blog post. Blog posts are a good way to reflect on what you have done and also share some knowledge. The best way to get better at talking about technology is practice. Blog posts are a way to practice that skill.
Objectives
Explorer Mode
- On medium.com(https://medium.com/), create a blog post that talks about a concept we have went over in class. This could anything topic from HTML, CSS or JavaScript. Or it could be a lesson that learn from the past couple of weeks. All I am looking for a developer focused blog post.
- to turn this in, submit to me, via the github issue, the link to the blog post
Adventure Mode
- As we progress, we will be using different tools to work our brain. Today, head over to hackerrank.com (https://www.hackerrank.com/). This is another tool, like codewars to practice our developer skills. As a start, head into the algorithms section, and try this one: https://www.hackerrank.com/challenges/grading/problem.
- To turn this, create a gist (gist.github.com) of your code and put it on this issue
Epic Mode
- Go back and finish up any oustanding work.
- Go back to an old assignment and work on it some more. This could trying to tackle a harder level. Or going back and working on the UI/UX of an assignment, refactor the code to a new idea that we covered (EX: functions and abstractions) or adding unit tests to a something
- to turn this, put the github repo here, and tell me about what you did.
Info on the Hack-a-thon
You can find info on the hackathon at: http://synapsefl.com/innovationsummit2018/challenges/hackathons/
They should register at https://docs.google.com/forms/d/e/1FAIpQLSdNOVNIRIkRzUODo4bEt-UU_yLgNq9mTt51z-Mb5aSpQ-wqag/viewform
The livestream will be on this facebook page: https://www.facebook.com/events/227298157831280
The address for tonightโs Info Session is below.
Please park in the lot across Palm Avenue from the ECC.
Entrepreneur Collaborative Center
2101 E Palm Ave, Tampa, FL 33605
Immediately following the information session the challenges will be published in a Google Drive folder on synapsesummit.com/hackathons
Join the Suncoast Developers Guild Slack Channel and use the #innovationsummithack channel to ask questions, collaborate, find a team, and get updates! Be on the lookout for check-ins from the organizers. ๐
Link to join:
Let us know if you have any questions.
Week 6 Day 4 - Weekend - University of PROforma -
University of PROforma
You are tasked with making a database diagram, database, and 2 console applications
The database will have at least the following entities, and the following columns:
-
Courses
- Number
- Level
- Name
- Room
- Start Time
-
Professors
- Name
- Title (Mr/Ms/Dr, etc...)
-
Students
- FullName
- PhoneNumber
- Major
The following relationships are true:
- Courses have at least one Professor
- Students can enroll in course
- Courses have many Students
- Students belong to many Campuses
NOTE: You need to add Primary Keys and Foreign Keys to the tables, as well as add any joining needed.
Objectives
- Practice working with SSMS and Databases
- Understanding and creating a Database Diagram
- Working with User Input and C#
Explorer Mode
-
Create a Database Diagram that illustrates the relationships. This should be a picture in the root of your repository
-
Create the Database. I want to see the Create Database script that includes all the tables and relationships
-
Create a "admin" Console app that allows a user to :
- Add Professors
- Add Classes
- View who is enrolled in a class
- View all Classes, who is teaching them, and who is enrolled
-
Create a "student" app that allows a user a to enroll into a class.
- As a user, I should be able to select a course, and type in my information, and be enrolled in that course
- Type in my name, and view what course I am enrolled in
Adventure Mode
- Add Campuses to your data model as a "Parent" to all entities. Use your best judgement to define relationships
- Update your data model to allow professors being apart of many campuses
- Create a "Professors" console app that allows a professor to see who is enrolled in class
- Add Semesters, and allow a student to select a semesters
- Refactor your 2 console apps to be in the same solution, and re-use your database access layer
Epic Mode
- Add Student sign in (DO NOT STORE PASSWORDS AS PLAIN TEXT)
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at` least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
Your repository, for explorer mode, should have three folders:
- SQLScripts
- all your SQL scripts to create your database
- AdminConsole
- the console app for the Admin app
- StudentConsole
- the console app for the student app
Additional Code Samples:
https://github.com/TIY-NET-Tampa/Lecture-Examples/tree/master/week-4/IntroToADONET/ConsoleApp1
Week 9 Day 2 - Who are you? -
Who are you?
Today we talked about authentication. Tonight, follow along with this tutorial to learn and understand token based authenication with AngularJS
Explorer
- Follow Part 1 and 2 of this tutorial http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/
- Code along with it and submit that as your solution
PROTIP:
- Do not move onto the next step until the current step works.
- Ask Plenty of questions. There will be words that are unfamiliar to you
Adventure
- Round off your group project from last night.
- Auth Authentication to your news site. This can be done with your groups or not, your choice.
Epic
- Add OAuth to your site news site and allow the users to log in with Google
Week 5 Day 1 Welcome to C# -
Intro to Types & Re-Focusing
Welcome to C#! The first thing you must practice is mastering what types are and how they affect your code.
- For this homework you can not use
var
*
Objectives
Setup
- open
Visual Studio 2017
and create a newconsole application
- be sure to select
create git repo
and make sure it has a.gitignore
Explorer Mode
-
Create the following vairbles. Use the type you think would be the best
-
number of dogs running around a dog park
-
the number of sandwhiches You can eat when you are hungry
-
the amount of money it costs to buy a nice dinner
-
what color your dream car is
-
what make your dream car is
-
what model your dream is
-
todays date
-
the first letter of you name
-
the number of stars in the sky
-
Print out each variable in the middle of string describing the variable.
ex: for the number of dogs in the park, I want you to print outThere are 5 dogs running around the park
-
We have tackled JavaScript and are about to tackle our 4th language. You have grown as a developer and a person in the last 4 weeks. Create for me a blog post on medium on 1 of the following prompts
-
Pick 1 topic technically that we have learned and create a blog post explaining it to a new developer
-
Blog about a struggle that you have encountered and overcome during your tenure here so far.
-
Pick a new techonlogy that we haven't hit yet (or won't) and create a intro blog for that.
Adventure Mode
- Work more on Geopardy some more
Epic Mode
- Explore C# some more by creating a simple number guessing game.
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
.
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Additional Resources
Week 8 Day 1 - It was the developer, in the library, with angular -
It was the developer, in the library, with angular
The library was super impressed with your API, now they want you to create a Web UI for them, using your API.
Objectives
- Work on using AngularJS create a UI on top of an API
Explorer Mode
- Add Angular to your project.
- Implement a Single Page App UI that allows a user to use the endpoints that you created already. This should include
- Seeing all books
- Searching for a book to checkout
- Checking out a book
- Checking a book back in
NOTES
- Create your UI on paper/Whiteboard first, then go to implementation
- Even though you are making a UI, do not get caught up in how it looks, remember to make it functional, then make it working
- If you didn't complete the weekend assignment, work on creating the UI first for the endpoints you have, then work on extending your API
- A user only needs to supply an email to checkout a book, full blown authentication is not needed.
Adventure Mode
some are extended from the weekend project
catch up
- Complete any endpoints you did not from the weekend project
- Go back and get caught up on any projects you have outstanding
styling
- Using CSS, style your website to have a modern look
functionality
- Normalize your database to have
Genre
be its own table - Create the endpoints that allows to Update Movies
- Extend your
Search
endpoint to have many - Add users and Authentication
Epic Mode
This will challenge your CSS and Design skills
- Using
Bootstrap
create a solid UI with no Custom CSS - Using
Material Design
as a guideline, learn about and implement a UI that follows the guidelines.
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are complete with your assignmnet, link the new repo here.
Week 7 Day 2 Bocce Ball League -
LET's GET READY TO RUMBLE!
Today, you will be working with EF to model connecting data and to simulate joins.
Problem:
Julia is in charge of the local Bocce Ball League. She needs a database to keep track of the teams, players and games that have been played in the league. You need to design this database for her.
Your database will need to store the following data:
Games
- Home Team
- Away Team
- Home Score
- Away Score
- Date Happened
- Notes
Teams
- Mascot
- Color
Players
- FullName
- Nickname
- Number
- ThrowingArm
Objectives
- Practice Setup for EF
- Practice Using EF to work with a database
- Learn about JOINS with EF
- All your queries will be in LINQ
Explorer Mode
-
All the queries should run and the program should build.
-
All Queries should be using LINQ
-
Put all queries in
Main
inProgram.cs
-
Set up the Schema using POCOS
-
Show the user the following:
- All the teams, with their win/loss record
- All the Players and what team they are on
- All the Upcoming games (games who Date Happened is in the future)
- Past games
Tips
- Create your Database Diagram First
- feel free to create a few methods that add fake data into the database
- Use SSMS to verify that the data you are entering is correct
- when creating new items, take note on the relationships
Adventure Mode
- Allow Julia( the user) to create new players, and add them to a team
- Allow Julia to create new teams
- Allow Julia to schedule games only in the future
- Allow Julia to enter in the score of a game(only in the past)
Epic Mode
- Add the ability to record player stats for each game
- add the ability to keep track of seasons, not only games
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are complete with your assignmnet, link the new repo here.
Additional Resources
- https://msdn.microsoft.com/en-us/library/aa937723(v=vs.113).aspx
- https://github.com/TIY-NET-Tampa/Lecture-Examples/tree/master/week-6/IntroToEntityFramework/IntroToEntityFramework
Commands to consider
-- Install-Package EntityFramework
-- Enable-Migrations
-- Add-Migrations CreatedTable
-- Update-Database
Week 8 Day 3 - Enter the Blag-o-sphere -
Enter the Blag-o-sphere
For today, we are going to blogging and practicing everything we have talk about.
Objectives
- Practice talking like a developer
- Revisit old assignments
Explorer
-
Blog time. Choose a prompt from the following list
- Using your own experience as inspiration, create a short list of
survival tricks
for a someone entering a boot camp - Pick 1 topic that we have learned and create a blog post explaining it to a new developer
- Blog about a struggle that you have encountered and overcame during your tenure here so far.
- Pick a new technology that we haven't hit yet (or won't) and create a intro blog for that.
- Using your own experience as inspiration, create a short list of
-
Algorithm Practice -- submit a
gist
of your solution for https://www.codewars.com/kata/form-the-minimum in C# or JavaScript
Adventure
- Get caught up on any outstanding homework.
- Go back and refactor an old project.
- Pick an old AngularJS project that used an API, create an API for that project. Hook up your project to that API
- Submit a
gist
of the above kata in the other language
Epic
- Further our Hacker News model but creating an API that returns the data for the front page. This includes creating models that produce a valid database.
- Create an angular app that consumes and displays the data using Bootstrap to format it.
Week 1 Day 1 - Hello World -
Hello, World
In your first assignment you will end up with a web page, no matter how simple, published on the web.
Objectives
- Get to know your text editor.
- Introduce yourself to working on the command line.
- Publish a web page.
Setup
-
First, ensure you have the
app-app
generator installed. We may have done this in class, you only need to do it once:npm install -g app-app
Also, set up hub to use
HTTPS
rather thanSSH
for repositories:git config --global hub.protocol https
-
Open your Terminal and create and change into the project's directory:
mkdir -p ~/training/week-1/day-1/hello-world cd ~/training/week-1/day-1/hello-world
-
Run the generator to create a boilerplate project:
app-app --alpha --vscode
Answer "Yes" to the questions about GitHub and Yarn.
-
Open the project folder in VS Code:
code .
Remember
.
is an alias for the current directory. -
Using the file browser in your editor, open the file
public/index.html
and format your essay with HTML tags and place them into the document (remember all content goes inside the<body>
tags). Don't worry about the other files in the directory for now, we'll talk about those later, right now, we're mostly concerned with the two files inpublic
;index.html
andscreen.css
.
Explorer Mode
-
Follow all of the setup instructions.
-
Read this short article on the history of web design.
-
Compose a short essay (just a couple paragraphs at most) that summarizes your thoughts on the web; where's it's been, and where it's going.
-
Put your short essay into an HTML page, using the appropriate HTML tags. Give your webpage a header and a footer as well
-
Deploy your site to sure
-
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.
-
Note: All of your HTML (and CSS if you do Adventure Mode) should be formatted cleanly and consistently (use your editor to your advantage).
-
Note: Remember to check the appearance in your browser as well! Fast feedback of your code will help you create sites faster.
-
PROTIP: Spend some more time getting to know your terminal and text editor. Try finding some color schemes or plugins you like online and installing them. warning Though customization is great way to be productive and feel good on your dev machine, do not go overboard. If you have too many extensions, and they are getting in the way of you coding, then I will have you uninstall them. If you color scheme is hurts my eyes, I will have you change it before I help you
Adventure Mode
- Research the
id
andclass
HTML attributes. - Use valid CSS to style the page (in the neighborhood of a couple dozen CSS declarations).
- Use at least one image somewhere on the page (like the screen shot of your terminal if you do Epic Mode, or anything else you see fit).
Epic Mode
- Create a full layout for your page (heading, navigation, sidebar, footer, etc.).
- Use more complex CSS selectors than we covered in class.
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Additional Resources
- https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags
- http://atozcss.com/start-here/
- http://www.evolutionoftheweb.com
- Terminal Themes
- FiraCode Font
- Jason's Terminal Theme - One Dark - Matches the Atom theme of the same name
- Mac Basics
- Mouse versus Command Line
Reading Material
To prep for tomorrow's lesson, read through this
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS
Week 7 Day 4 - Grab your library Card! -
Library API!
The local library wants to modernize how they let people check out books. They need you to build an API.
The data model includes:
Books: (A Book's Info)
- Id
- Title
- Year Published
- Condition
- AuthorId
- GenreId
- ISBN
- IsCheckedOut
- DueBackDate
Author :( Who wrote the book)
-
Id
-
Name
-
Born
-
Died
-
Genre: (Book Genre)
- Id
- DisplayName
CheckOutLedger (a ledger of all books that are checked out)
- Id
- BookId
- Timestamp
- EmailOfPerson
NOTE Foreign Keys have been left off on purpose. Add them where you need them.
Objectives
- Practice Modeling data
- Practice Creating an API
Explorer Mode
The library wants an API that enables:
- Searching for Book based on title, author, or genre
- Add a new Book
- Add a new Author
- Search for a book based on Checked In Status
- Check Out a book
- Check in a Book
Adventure Mode
- Update the data model to account for multiple copies of the same book (update the Book to CheckOutLogs to from a
1 to Many
to aMany to Many
) - Add Library Card Holders that have to sign in to use the API
Epic Mode
- Add an API Key system to your API
- Create an angular Frontend that a library could actually use
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are complete with your assignment, link the new repo here.
PRO Tips:
- Plan. Plan. Plan. Before you create 1 line of code, design out what end points you have in your API and your Database should look like. This will give you a basic plan to follow as you go.
- KIS(S). Keep Is Simple (Stupid). Work on only 1 endpoint at a time, and focus on what you are doing
- Data is awesome, but not the primary focus of this assignment. Only enter in a little data as possible.
- POSTMAN is your Friend
Week 6 Day 1 - Inheritance -
Robots, Humans, Pandas and SOLID
Tonight you will be making a few classes that inherit from a base class and also reading about some OOP design princples
Objectives
- Practice and understand Inheritance
- Read about SOLID
Explorer Mode
-
Start by Creating 3 classes, Human, Panda & Robot
-
All three classes have a Name and Birthday
-
Robots have a
VersionNumber
-
All three classes have a boolean property,
IsAsleep
that is private -
The Human and Panda classes have a Method call
WakeUp()
andFallAsleep()
that toggles theIsAsleep
property -
The Robot has a
StartUp()
andShutDown()
that toggles theIsAsleep
property -
The Human and Panda have a
Eat(string food)
Method that prints out that object is eating -
All three classes have a
SayHello()
Method that say that classes greeting -
Human can have many pets. Both a Panda and Robot can be pets
-
Humans have a
Adopt(Pet pet)
method that adds a Pet to their own Pet list -
All Pets have
OwnersName
property that is only set when a pet is Adopted by a Human -
Override all the
ToString()
to print out all the properties -
Create a small sample app that demonstrates:
- All the Methods above
- Putting a type of each class into an List
- each Class waking up/falling asleep, eating( if not a robot) , and saying hello
- A Human should adopt both a Robot and Panda
-
Read these articles, we will be discussing them together in lecture
Adventure Mode
- Go back to a C# assignment and refactor to use classes
- Make Classes for a
Bike
,Unicycle
,Car
,Truck
, andMotorCycle
using interfaces and parent classes to reduce code duplication
Epic Mode
- Allow users to create and name a new Humans
- Allow the user, as a human, to adopt as many Robots and Pandas as possible
- Save your classes and data to a file, and load them when the starts
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
.
Additional Resources
- A small video on inheritance and interfaces:
Inheritance: https://www.youtube.com/watch?v=m0DJIhmUtP8&t=0s&list=PLQohu2C4yKUugzokx9tOGVt9oamMMZBmR&index=21
Interfaces: https://www.youtube.com/watch?v=neTerkT7LhE&t=0s&list=PLQohu2C4yKUugzokx9tOGVt9oamMMZBmR&index=20
Week 3 day 2 - Planning Tic Tac Toe -
Tic tac toe
With a partner,I want you to create a design for a tic tac toe game. Do not worry about writing code for the first level. I really want you to practice your technical design skills here and think about how you would code this.
Objectives
Explorer Mode
- Submit a full design of how to approach this problem. This should include:
- a mock up (could be a picture of drawing)
- implementation details, such as how you are implementing each square
- a list of events that you are listening to.
- this should contain psuedo-code on how you are handling each event, and all game logic
- Your design should take into account all requirements for adventure mode
Adventure Mode
- As a user I should be able to see a tic tac toe board
- as a user, the game should alternate turns
- As a user, i should be able to click in a square and play either
X
orO
depending on whose turn it is - As a user, when I get three in a row, I should be told i won and the game should be over
- Create a
vs computer
mode, that picks a random square - Modify your
vs computer
mode to follow a specific strategy (your choice) - Have fun with the CSS by adding colors, animations and effects to make the game more enjoyable
Epic Mode
- Using a Min-max tree, make your computer AI unbeatable
Turning In
Your planning should be on a Trello board. To turn in, add me to the Trello board, and also drop me a link on this issue.
Week 8 Day 4 - So, What do you wanna do tonight? -
So, What do you wanna do tonight?
The City of Acme is looking for page to get to show all the local events. This page should be mimic the functionality of meetup.com. Be sure to look at the requirements for each level and not to get ahead of yourself.
Objectives
- practice creating Web API 2 endpoints
- Practice angularJS Routing
- Use seed data to handle populating your database
Rough Data Model to get you started
NOTE: The Foreign Keys have been left off
City
- Id
- Name
Event
- Id
- Title
- Tagline
- Long Description
- Address
- City
- State
- Zip
- Age Limit
- Price
- DateHappening
Attendee
- Id
- Email
Relationships
a City has many Events
a Event has many Attendees
a Attendee can go to many Events
Explorer
- Create the home page that shows a list of events that happening in PROburg. This show include only the event title, short description, date and location for the event
- A User should be able to search for events based on title
- A user should be able to click an event and see all details about that event on a new page. This should display everything about that Event, including all the details and all the Attendees that have registered
- A user should be able to be able to sign up for an event,on the event detail page, by providing only an email. This email is required
Adventure
- Allow the user to search based on any property on the Event Model
- Implement a wait list if an event gets too many attendees
- Using Google Maps Web SDk, add a latitude and longitude to the Model and show a location on the map, allow to user to find events near them
- Add a
EventHost
table, and allow users to search based on event host - Allow users to add a new event
- Add a keyword system and allow users to search by keyword
Epic
- Add User Authentication using OAuth. This might be easier to recreate the project and add authentication from the templates
- Implement more features from meetup.com
PRO-TIPS
- Remember, only Explorer mode is required. Do not borrow trouble by trying to do more.
- I highly suggest planning. Before writing a line of code, plan out (at least):
- database schema
- API Endpoints
- Angular URLs
- The UI for Explorer mode
- Git is your friend, commit and push often.
- Work on one area of the site at a time, small chunks are easier to keep in your head at a time.
Week 2 Day 2 - Rock Paper Scissors -
Rock-Paper-Scissors
Create a simple Rock-Paper-Scissors game
Objectives
Explorer Mode
- As a user I should be able to see three buttons for each player
- as a user, I should be able to pick an option for each player
- As a user,after each player makes their selection, I should be told who won and the game should be over
Adventure Mode
- Create a
vs computer
mode, that picks a selection - Modify your
vs computer
mode to follow a specific strategy (your choice) - Make your computer AI unbeatable
- Give the user a choice to player against the various computer levels or another player
- Have fun with the CSS by adding colors, animations and effects to make the game more enjoyable
Epic Mode
- Your game is currently only 1 vs 1, add the ability to add more computer players to the game
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Additional Resources
Week 7 Day 3 - Movie API -
Lets All Go to the Movies...
You are tasked with taking the Movie DB you created and putting that into an API. This API should use the simple Movie Database that we created when we started Entity Framework.
Objectives
- Practice Creating Simple APIs
- Practice working with API Tools, such as POSTMAN (https://www.getpostman.com/)
Explorer Mode
- Create the DBContext, Models, and Controllers in their own folders
- Create
GET /Movies
Endpoint that returns all movies - Create
GET /Search?title=Jurassic
that returns all movies where the title contains the title parameter - Create a
POST /Movie
endpoints that adds a movie to the database. THis should take a JSON body - Create a
GET /Movies?genre={Genre}
that returns movies of only that Genre
Adventure Mode
- Normalize your database to have
Genre
be its own table - Create the endpoints that allows to Update Movies
- Extend your
Search
endpoint to have many
Epic Mode
- Create an angular app that talks to your API and Interacts with all the endpoints
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are complete with your assignmnet, link the new repo here.
Week 2 Day 3 - Rock Paper Scissors -
Function Junction
Objectives
After completing this assignment, you should be able to:
- Demonstrate understanding of types, functions, argument-handling, loops, and conditional statements
Instructions
- Fork this repository to your own account.
- Change into your training directory
- Clone your repository:
hub clone function-junction
- Change into your project's directory:
cd function-junction
- Install the dependencies:
yarn install
(or justyarn
for short) - Open in Code:
code .
- Start the test runner:
yarn test
- Open
src/functions.test.js
and work on functions until tests pass. - Commit and push your work to GitHub.
- Turn in the URL to your GitHub repo.
Explorer Mode
- All tests passing
- Turn in the homework using the URL to your repository on Github.
Adventure Mode
- If you used "built-in" JavaScript methods like
String.reverse()
orArray.max()
to solve these problems, try implementing them from scratch. - Vice-versa: if you implemented your solutions from scratch, look in the documentation linked below to see if JavaScript has any built-in functions to help solve these problems.
Epic Mode
- Expand the
sum
andmax
functions to take arrays instead of numbers and update the tests so they pass - Create your own simple functions with tests
- Anytime in your code that you used a
for
loop or awhile
loop, convert it to use amap
,filter
orreduce
Additional Resources
Reference the documentation on MDN to find what kind of helpful functions might already be on Array
and String
in JavaScript.
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Week 5 Day 3 Morse Code -
Morse Code Converter
Create a simple app that lets a user type in a phrase in english and print out the phrase in Morse Code
Objectives
Setup
- download and use this csv https://raw.githubusercontent.com/mdewey/morse-code/master/morse.csv
Explorer Mode
- The program should read the conversion data from a file and build a
Dictionary
in memory to help in the conversion - As a user, I should be able to type in a phrase to convert. This should include letters and numbers
- The Program should convert the text that the use typed in to Morse Code
- The Program should display the converted text to the user
- The Program should ask user if they have another word convert, if yes, then repeat the process
Adventure Mode
-
Save the User's past results and display them if the user asks. This should persist across multiple runnings of the app (read/write to a file)
-
Allow the user to type in Morse Code and convert to English
Setup
- open
Visual Studio 2017
and create a newconsole application
- be sure to select
create git repo
and make sure it has a.gitignore
Turning In
Your homework will be assigned to you via issues
on your assignments
repository. Once you are
These steps will be followed for almost every assignment going forward. Once you've completed at least explorer mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.
-
First, let's add all our work to git, and ask it to commit it:
git add . git commit -m "My first webpage"
Feel free to replace "My first webpage" with a more meaningful message.
-
Push our local commits to GitHub:
git push -u origin master
The
-u
option tells git we want to making pushing themaster
branch toorigin
the default, so next time, we can just typegit push
. -
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
yarn deploy
Once you are completely, go to the issue on our assignments
repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue.
Additional Resources
- Bonus Video of me explaining Dictionaries and create a simple word count app. https://www.youtube.com/watch?v=a2amPEI9AYM&index=28&t=0s&list=PLQohu2C4yKUugzokx9tOGVt9oamMMZBmR
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.