dantezinfern0 / assignments Goto Github PK
View Code? Open in Web Editor NEWmy sun coast guild assignments
my sun coast guild assignments
We are taking a surprise trip to the Savannah for a safari to see all sorts of exotic animals. During our time on safari, we want to keep track of all the animals we have seen. For this, we need to create a database, as well as a small console application to help record what we see.
NOTE: The Additional Resources section below is very helpful. Consider reading this after reading Explorer mode. Then make a plan for the assignment for digging in and writing code.
SafariVacation
SeenAnimals
that has the following columns
Id
(int)Species
(string)CountOfTimesSeen
(int)LocationOfLastSeen
(string)pgcli
.CountOfTimesSeen
and LocationOfLastSeen
for an animalJungle
Desert
.CountOfTimesSeen
and get a total number of animals seenCountOfTimesSeen
of lions
, tigers
and bears
LastSeenTime
, with a type of DateTime. This will require you to add and run a new migration.Here are the interesting commands you will need for tonight's assignment
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL
createdb <<DatabaseName>>
dotnet ef dbcontext scaffold "server=localhost;database=<<DatabaseName>>" Npgsql.EntityFrameworkCore.PostgreSQL -c <<DatabaseName>>Context
dotnet ef migrations add AddBaordGameTable
dotnet ef database update
As we explore the concepts of a full stack web app, a good way to practice is to duplicate an existing site. For this project, you will be creating a copy of a site that you know very well, StackOverflow.
The finished product will be due Friday, so this will be a little bigger. Pace yourself
First, we need to the database schema and start to build the API for the core functionality
In groups of 2 or 3, create an anonymous question and answer site, that allows users to up-vote and down-vote questions and answers.
The core functionality is:
In this project, you will create a playable game of Blackjack.
Create a single player blackjack games that play 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:
images
folder in your projectcards.zip
file and then copy/move the extracted images into your project's images
folderPlayers 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.
With the wireframes created, we need to start breathing life into our application. The next step would be to create HTML & CSS. This is the next step because, remember, it all comes down to HTML. This is what the user sees
NOTE: Really take advantage of this weekend to get make progress on your capstone. Like the last 7 weeks, the next 5 weeks will go by fast.
app-app
, start implementing your HTMLThe store that had you built the API loves it so much and it caused the store to become more successful and open up multiple locations.
We need to update our API to accommodate many locations. This means will have to add a new Model and new a relationship to our diagrams.
Create a Model for the Locations
The Locations
should have at least
Add a relationship to your Item
model to include a Foreign Key to the Locations table. This will be two new properties to your Existing Item
model that points to the new Model you create (Location
)
Add a new Locations Controller. This will have 2 endpoints
Update the following endpoints.
This morning we did a couple of code reviews. Take these lessons and finish up your minesweeper apps.
Also, we have been exploring react for the past week. Let's take those skills and upgrade some old projects.
In this project, you'll use React and the 3rd-party API as a data to create a real-time price tracker for some popular cryptocurrencies.
setInterval
to repeatcomponentDidMount
, componentWillUnmount
Use the following API endpoint to fetch data and display it in your application:
https://api.coinmarketcap.com/v2/ticker/?limit=20
The data should refresh periodically. Using the id
field in the API results for each currency, you can get the URL for the logo of a coin like this:
https://s2.coinmarketcap.com/static/img/coins/16x16/${coin.id}.png
create-react-app
to set up your new application.setInterval
documentation on MDN.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.
Also, feel free to change it from Jason's picture to a picture of yourself.
Initially, you should implement the design as close as possible to the mockup. Later, you might choose to fit your 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.
For this assignment, you will be creating a simple interactive scoreboard for your favorite sport.
update
buttons to update the corresponding values on the page. The score buttons should adjust the current score by a "hard-coded" value.In this assignment, you will communicate with a back-end API server to create the user-interface for a Minesweeper clone. It might help to familiarize yourself with the game if you've never played it.
fetch
or axios
to perform POST
request orRead over the documentation for the API we'll be using:
https://minesweeper-api.herokuapp.com/
You will need to interpret the response and render a graphical user interface. The API results include an array of arrays (two-dimensional array), these represent rows and columns. These are probably best translated into table rows (<tr>
) and table data (<td>
) cells.
Here's an example implementation of this assignment:
check
actionflag
actionwon
or lost
, show a victory or failure message.localStorage
, and render the same game, rather than creating a new one every time (until the player presses the restart button).In this assignment, you'll build a front end for an API of your choice
We're going to build a front end for an API of your choice. Choose one from this list or an API that you are aware of.
NOTE You'll need to choose one with Auth
being No
or apiKey
since we haven't covered OAuth
authentication yet.
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 an axios.get
or fetch
of one API URL and see if you get browser errors.
App.js
Every application uses data in some way. This will help you set up your development environment as well as get used to querying databases.
Install Postgres
Create a database: company_database
Create a table: employees
Add the following columns to the table, Use your best judgement for data types
Create queries that can do the following:
parking_spot_number
as a string that up to 10 characters longTurn in the above queries as a gist
entity framework core
You have already solved the explosion
and mumbling
katas. The client loves your solution so much that they want you to turn it into an API us on the web.
For tonight, I want you to create a simple API with two endpoints, one for the explosion
and one for the mumbling
.
sdg-api
template using the command dotnet new -i SDG.templates.Web.API
/api/mumbling
and api/explosion
, that are based off of the katas,[https://www.codewars.com/kata/mumbling](https://www.codewars.com/kata/mumbling)
and [https://www.codewars.com/kata/digits-explosion](https://www.codewars.com/kata/digits-explosion)
respectfully.sdg-web
api projectmumbling
endpoint
MumblingController
HttpGet
ActionResult<string>
explosion
endpoint
ExplosionController
HttpGet
ActionResult<string>
Over the last 6 weeks, you have learned many concepts about front-end development. To demonstrate how far you have come, I want you to build an Employee Directory. For Explorer Mode
, this will be a site with 3 pages; view all employees, add an employee, and view an employee. Adventure Mode
adds delete and updating an employee.
gamma
stack projectAdditional Resources
for how to use the API.Get all employees endpoint
, https://sdg-staff-directory-app.herokuapp.com/api/${companyName}/employees.employee page
for that employee. The URL should look like: /employee/${employeeId}
delete
a userupdate
a userAPI Documentations: https://sdg-staff-directory-app.herokuapp.com/swagger/index.html
fakebook
. That means that I want to make an API call to get all of my employees, I will do a fetch to the URL.https://sdg-staff-directory-app.herokuapp.com/api/fakebook/employees
That will return me a list of employees that are apart of the company
If I want to get a different company's (Boogle) employees. I would do
https://sdg-staff-directory-app.herokuapp.com/api/Boogle/employees
for your project you will be using the same company for every request
fakebook
I would use the endpointhttps://sdg-staff-directory-app.herokuapp.com/api/fakebook/employees/3
A GET request to the above URL will get the employee with the id of 3
, and that works for fakebook
.
fakebook
, I will send a POST request this endpointhttps://sdg-staff-directory-app.herokuapp.com/api/fakebook/employees/
with my data in this JSON format:
"firstName": "string",
"lastName": "string",
"birthday": "2019-06-06T16:48:57.256Z",
"hiredDate": "2019-06-06T16:48:57.256Z",
"isFullTime": true,
"profileImage": "string",
"jobTitle": "string",
"jobDescription": "string",
"phoneNumber": "string",
"address": "string",
"city": "string",
"zip": "string",
"state": "string",
"salary": 0,
"gender": "string",
"email": "string",
"emergencyContactPerson": "string",
"emergencyContactPhone": "string",
"emergencyContactAddress": "string",
"ptoHours": 0,
}
With the wireframes, HTML and CSS created, next up and will be to continue on breathing life into our projects. After the CSS, HTML, and wireframes, we need to start thinking about breathing life into our apps. Take today to start creating your front end, ERD and API definitions.
This weekend, you will pair up in groups of 2 or 3 to create a "Now Playing in Theatres" website. This will use an API, and few pages to display what is currently showing.
https://api.themoviedb.org/3/movie/now_playing?api_key=<<your key here>>>&language=en-US&page=1
/Movie/:moveidId
that shows all the details for a given movie and the cast of the movie. The cast endpoint is https://api.themoviedb.org/3/movie/<<<Movie Id>>>/credits?api_key=<<your key here>>>
People
section of the API for thisIn 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.
For this assignment, you will following along with you instructors to complete this homework.
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.
HTML Tag Reference
below). Give your webpage a simple header and footer as well.a
to add (at least 2) more pages to your site.id
and class
HTML attributes.To prep for tomorrow's lesson, you can read about CSS.
Your task is to refactor the static Octodex into a static (non-API) version using React.
You'll identify the main Component
s on the page and create React components for each, breaking down those Component
s into smaller ones as needed.
Component
sapp-app
(GAMMA stack) to build a React projectArray.prototype.map
to render a collection of components in React<App>
component.index.css
render
method of App
and have it render your main components.render
method of those components.this.props
to dynamically customize the components that need it.array
and use map
to generate the Octocat componentsarray
of Octocats in an octocats.json
file and import
that into your app.fetch
API to retrieve the list of Octocats from this api insteadIn this assignment, you'll create an HSL(a) color picker with React, but this time using React Hooks
On the web, and computers in general, we often think of colors using the RGB color model. In HTML and CSS, we often use hexadecimal triplets to describe colors in RGB. For example, #76BCBB
represents a nice shade of blue: . 76
is the red component, BC
for green, and BB
for blue. Those hexadecimal numbers translate, respectively, to 118
, 188
, 187
in decimal. The range for each color is 0
through 255
.
In this model, the three additive primary colors (red, green, and blue) are combined to create colors. The absence of these colors creates black, while all three colors at full strength combine to create white. In hexadecimal, FF
represent the decimal value 255
. This helps to explain why #FFFFFF
represents white. We can also use other notations in CSS to specify colors, such as rgb(118, 188, 187)
, where the decimal values are given.
RGB isn't the only way we can use numbers to represent colors; there exists many color models, some with specialized purposes, such as CMYK a subtractive model used in printing. In many color models the relationship between the color components isn't always evident in any meaningful way, especially if you're trying to combine them to find a specific color. Try looking for that perfect shade of blue on an RGB color picker, you will probably find it to be a little counter-intuitive. Some color models are easy to reason about, such as HSL (hue, saturation, lightness) and HSB (hue, saturation, brightness). Like RGB, CSS supports defining colors in HSL:
hsl(50,8%,20%)
The first value hue
is given as a degrees (around a color wheel), the second value is a percentage of saturation (0% being grey, 100% fully saturated), and the third value, a percentage of lightness (0% black, 100% white).
You can also read this short guide to HSL
Use range
type input
elements to drive a color display. You'll end up with something like this:
HINT: You will want to combine techniques of string interpolation and using inline styles in React, for example:
<div style={{ backgroundColor: `hsl(50,8%,20%)` }} >
Hello World
</div>
hue
, saturation
, and lightness
with hooks.hue
, saturation
, and lightness
).hsl(50, 8%, 20%)
) and the actual color as a background color on an element.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.
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.
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 with.
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]
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:
n
is 20
.Math.random()
to generate a floating-point number between 0
and 1
. Let's assume our random value is 0.42
.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
.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
.
Now that we have new API skills, we want to create an API to help our favorite store keep track of their inventory. This API will be able to let users add, update, delete, and search for items.
Create a new sdg-api
project using the dotnet CLI, have fun with the name and what items the shop sells.
Create a Model of for an item in the shop. This will be your database table structure.
The Item should have at least
Create a GET endpoint for all items in your inventory
Create a GET endpoint for each item
Create a POST endpoint that allows a user/client to add an item to the inventory
Create a PUT endpoint that allows a user/client to update an item
Create a DELETE endpoint that allows a user/client to delete an item
Create a GET endpoint to get all items that are out of stock
Create a GET endpoint that allows the user to search for an item based on SKU
Now that we have learned the power of flexbox we will apply it to the sites we are building. We'll also go back to a past assignment and see how flexbox would simplify our HTML and CSS.
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.
Skeleton Layout example
as closely as possible.
In this assignment, you will create a Trello card for a job that you found interesting. This can be for your dream job or just something that sounded interesting to you.
Company name - job title
Description of the company
Company website link
Location
Link to the job description
Add comments:
What is their narrative?
Why do you like this company?
Why did you like this posting?
How might you benefit them?
Key areas of Information to include:
A koan is a riddle or puzzle that Zen Buddhists use during meditation to help them unravel greater truths about the world and about themselves. Zen masters have been testing their students with these stories, questions, or phrases for centuries.
As we learn a new language, we need to practice the new ideas, syntax, and paradigms that come what that language. The idea of language Koans helps both beginners and veterans learn the ins and outs of the language.
Using a popular weather API, Create a web site that allows a user to search for a location and gets that location's weather.
openweathermap.org
, create a simple UI that allows a user to search for the current weather by zip code or city.openweathermap.org
and signup for an accountAPI Keys
in your dashboardappid=KEY
https://api.openweathermap.org/data/2.5/weather?q=Tampa
becomes https://api.openweathermap.org/data/2.5/weather?q=Tampa&appid=cbb5b6537cd4a6eccd9aee04ffffffff
button
openweathermap.org
, get the current weather for that location.Your GitHub repository will be part of your portfolio and you will likely link to it from your portfolio.
Creating a clean looking README is as important for a project as having nice clean code.
Here are some examples of great READMEs:
Here are some example of great student READMEs:
In this assignment, you'll create an HSL(a) color picker with React.
On the web, and computers in general, we often think of colors using the RGB color model. In HTML and CSS, we often use hexadecimal triplets to describe colors in RGB. For example, #76BCBB
represents a nice shade of blue: . 76
is the red component, BC
for green, and BB
for blue. Those hexadecimal numbers translate, respectively, to 118
, 188
, 187
in decimal. The range for each color is 0
through 255
.
In this model, the three additive primary colors (red, green, and blue) are combined to create colors. The absence of these colors creates black, while all three colors at full strength combine to create white. In hexadecimal, FF
represent the decimal value 255
. This helps to explain why #FFFFFF
represents white. We can also use other notations in CSS to specify colors, such as rgb(118, 188, 187)
, where the decimal values are given.
RGB isn't the only way we can use numbers to represent colors; there exists many color models, some with specialized purposes, such as CMYK a subtractive model used in printing. In many color models the relationship between the color components isn't always evident in any meaningful way, especially if you're trying to combine them to find a specific color. Try looking for that perfect shade of blue on an RGB color picker, you will probably find it to be a little counter-intuitive. Some color models are easy to reason about, such as HSL (hue, saturation, lightness) and HSB (hue, saturation, brightness). Like RGB, CSS supports defining colors in HSL:
hsl(50,8%,20%)
The first value hue
is given as a degrees (around a color wheel), the second value is a percentage of saturation (0% being grey, 100% fully saturated), and the third value, a percentage of lightness (0% black, 100% white).
You can also read this short guide to HSL
Use range
type input
elements to drive a color display. You'll end up with something like this:
HINT: You will want to combine techniques of string interpolation and using inline styles in React, for example:
<div style={{ backgroundColor: `hsl(50,8%,20%)` }} >
Hello World
</div>
hue
, saturation
, and lightness
in your state.hue
, saturation
, and lightness
) in the state when changed.hsl(50, 8%, 20%)
) and the actual color as a background color on an element.alpha
, be sure to put some kind of pattern behind your color so the user can see the transparency effect.hsla()
if the alpha value is less than 1
.In both cases, the sliders should be in the correct positions to represent this random color.
Today you learned a new language and will be starting to explore it more in depth in the coming weeks. Like any good craftsman, the first thing you need is to learn your tools. Tonight, you will be setting up your developer environment, creating a simple console application, and starting your final project.
Install the .NET Core SDK.
Install the follow plugins:
To verify everything was installed correctly, run dotnet -v
in your terminal.
You should already have Ruby installed.
Create a console application that guesses a number that a user has thought of, between 1 and 100. This will use a binary search
to guess the correct number
Here is the JavaScript, browser-based, algorithm to follow. Make sure to understand this first before writing new code: https://codepen.io/ambethia/pen/KNewBb
.
NOTE You will be translating this from the event-driven paradigm of HTML to the more procedural paradigm of a console application.
For Explorer Mode, you do not have to put in the menu or other user experience "nice to haves", focus on the just the core algorithm.
Try again
and Welcome, press enter to start
.NET
For this assignment, you will extending and giving your scoreboard additional features.
if
statement to stop each team's score from going below 0.if
statement to stop each team's score from going above 21reset
button that resets the scoreboard back to the each team having 0 points and re-enables the buttons. This button should not reset the page without having the page refreshed.For tonight, I want you to show off your music artists. You will be creating a multiple page app, using react-router.
react-router-dom
to your project.TIP: for Explorer mode focus on getting the router set up and linking the pages to each other.
yarn add react-router-dom
This assignment will pull together all the skills and ideas that you have learned for the past three weeks. This project is a bit bigger than usual and will challenge you on the core concepts we have learned over unit-i.
For this assignment, you will solve three code katas, and recreate a simple website that uses an API for the data. This is the website you will make. This website should be responsive and as close as you can make it.
Since this is a more significant assignment, the pacing is critical.
<script
defer
src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"
integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0"
crossorigin="anonymous"
></script>
```
Using JavaScript takes practice and the best practice is repetition. This exercise allow you time to work on the basics of JavaScript and how to apply that logic to solving problems.
After completing this assignment, you should be able to:
hub clone js-iteration
yarn install
(or just yarn
for short)yarn test
src/functions.test.js
and work on functions until tests pass.js-iterations
using the directions aboveDo the same with the JavaScript Koans at https://github.com/suncoast-devs/koans/blob/master/koans.js
Do the same with the Function-Junction Koans at https://github.com/suncoast-devs/function-junction
Reference the documentation on DevDocs to find what kind of helpful functions might already be in JavaScript.
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.
git
, hub
, and node
installed. We should have done this together in class.app-app
project.We are starting the final stretch of the cohort. This means we are starting to focus on our capstone projects.
The capstone project is the final of the course. This project should be significant in scope, but able to be trimmed down to a MVP (minimal viable product). Capstones are not necessarily new ideas that are supposed to change the world. Even though your ideas are accepted (and sometimes encourage, with instructor guidance), some of the best demo's did re-invent the wheel.
The capstone has 2 mains goals.
The capstone provides you practice on the skills that you have grown over the course. During the course, you have built many projects, but on a small scale. The capstone projects allow you to built something at a bigger scale, and over a longer timeline. This more significant scope helps reinforce fundamental concepts.
The capstone provides a vehicle to show off the skills you have cultivated and want to grow upon further. This project is a great portfolio piece. As described in career support, employers love to see what you build. This portfolio piece helps showcase the skills you want to work on and grow on going forward.
As always, when we go to start a new project. The first step is to create an elevator pitch. This is a short description that describes what your final project is doing. This should be similar to what you said during pitches. This provides us with a starting point and guiding star during our project. This elevator pitch should include
The second step is to always plan out what we are doing. These early plans often take the shape of wireframes. This means that our first task for the capstone projects is to create our wireframes.
The elevator pitch and wireframes should be treated as a detailed road map. When these are created, these should be treated as law; it can be changed but must be changed with purpose.
app-app
to start implementing your HTMLget your project approved by your instructor.
Create the elevator pitch for your final projects.
Place this in the README.md
of your capstone project repository
Create a wireframe for each page in your page you capstone.
Place these wireframes in a .idea
folder of your capstone project repository.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.