RPS HTML

Our goal will be to create a very rudimentary mockup of the game Rock, Paper, Scissors. Ultimately we'll make a site that looks like this:

http://rps-html.matchthetarget.com/

It's a pretty bad game right now — the computer always plays the same moves. We'll bring it to life with Ruby in a couple of weeks.

For now, we're just trying to learn how to make the pages look the way we want.

Standard Workflow

Open the project in Gitpod.
When you're creating the workspace for the very first time, wait for it to finish setting up.
Start the web server by typing bin/server at a Terminal prompt and pressing return.
Check out the your live application preview. I like to pop it open in its own tab.
As you work, remember to navigate to /git and commit often as you work.
Run rails grade as often as you like to see how you are doing, but make sure you test your app manually first to make sure it matches the target's behavior first.

Setup

Click through that and then you may see a page that says "Yay! You’re on Rails!". That means your server started up successfully. We now need to start building some pages.
Create a file in the /public folder called rock.html. In that file, enter some text:
```
Hello, world!
```
In your live application, navigate to the URL that you just built — add /rock onto the end of the homepage URL. It will look something like this:
```
https://yourlonganduglylookinggitpodpreviewurl.io/rock
```
Congratulations! Your very first web page. As you update the source code with more stuff, be sure to save the source code first and then refresh the live app in Chrome to see the new version.

Your job

Now your job is to, page by page, make your application match the target.
Use the HTML Reference to try and find elements that will help.
When you get to the rules page, here are the URLs of the images:
When you are making links to pages, you can either put in the entire URL (the absolute URL):
```
href="https://yourlonganduglylookinggitpodpreviewurl.io/rock"
```
or you can put in just the part after domain (the path):
```
href="/rock"
```
but don't leave out the leading / if you go with the latter approach.
When you get to making the homepage (i.e. the bare domain with nothing after it), call the file index.html — Rails uses the file /public/index.html for the homepage.

When you are making links to the homepage from the other pages, you can just put / in the href:
```
<a href="/">Rules</a>
```
Run rails grade to see how you're doing.
Ask lots of questions on Piazza!

Deploying to Heroku

Create a Heroku account

If you don't have an account, sign up for Heroku.
If asked for your preferred language, you can say Ruby or anything else; it doesn't make any difference.
You don't need to add a credit card to it if you don't want to.
- You can host up to 5 apps before adding a credit card.
- After you add a credit card, you can host up to 100 apps.
- Whether 5 or 100, they can still remain on the free tier; credit card is just for identity verification.
- You also need to verify your identity if you want to put your app behind your own custom domain.

Sign in to your Heroku account (once per workspace)

At a terminal prompt¹:
```
heroku login
```

You will see something like:

heroku: Press any key to open up the browser to login or q to exit:

Press a key. You will then see:

Opening browser to https://cli-auth.heroku.com/auth/cli/browser/48eda9ea-0edd-426a-91eb-3a8486df4a1c
›   Warning: Cannot open browser.

Copy-paste that URL into a browser tab (or Cmd/Ctrl+click on it). Sign in to your Heroku account. Back in the terminal, you should see:
```
Logging in... done
Logged in as [YOUR HEROKU EMAIL ADDRESS].
```

Create a production server (once per application)

At a terminal prompt,
```
heroku create
```
This will assign a random name to your app. If you want to, you can also choose a name for the app when creating it:
```
heroku create my-cool-app
```
Or, at any time, you can rename the app:
```
heroku rename my-awesome-app
```

Deploying code to your production server

Make a git commit with your latest work that you wish to deploy. You can use the web interface at /git, or you can run the following commands at a terminal prompt:
```
git add -A
git commit -m "Describe your changes"
```
At a terminal prompt,
```
git push heroku HEAD:master -f
```
That's it! Your app will be available, once deployed, at https://my-awesome-app.herokuapp.com (or whatever name you chose or were assigned).
Repeat the two steps above as many times as you like to deploy new changes.

Optional: set a custom domain

To put your app behind a custom domain name, you must first verify your identity by adding a credit card to your Heroku account. This will also lift your app limit from 5 to 100.
Then, at a terminal prompt:
```
heroku domains:add www.your-domain.com
```

You will see some instructions:

heroku domains:add www.your-domain.com
Adding test.appdevproject.com to ⬢ my-awesome-app... done
Configure your app's DNS provider to point to the DNS Target young-peony-foamxxrzcu9xzxd286waw6ay.herokudns.com.
For help, see https://devcenter.heroku.com/articles/custom-domains

The domain www.your-domain.com has been enqueued for addition
Run heroku domains:wait 'www.your-domain.com' to wait for completion

Back in your domain registrar, find the place to add "CNAME Records". Depending on the registrar, you will usually under "DNS Settings".
Create a CNAME record that points www to the target that Heroku gave you (in the example above, young-peony-foamxxrzcu9xzxd286waw6ay.herokudns.com).
That's it! It usually takes a few minutes to take effect.

Specs

Click here to see names of each test

/rock renders an HTML page

/rock has the DOCTYPE declaration as the VERY FIRST line of the page.

/rock has a meta tag in the head of the page that increases the types of characters we can use.

/rock has the title 'You played rock!'

/rock has at least one link

/rock has at least two links

/rock has at least three links

/rock has at most four links

/rock has a link to '/rock' with the text 'Play Rock'

/rock has a link to '/paper' with the text 'Play Paper'

/rock has a link to '/scissors' with the text 'Play Scissors'

/rock has a link to '/' with the text 'Rules'

/rock has each 'Play' link in their own <div>

/rock has at least one secondary heading

/rock has at least two secondary headings

/rock has at most three secondary headings

/rock has one secondary heading with the text 'We played rock!'

/rock has one secondary heading with the text 'They played paper!'

/rock has one secondary heading with the text 'We lost!'

/rock has all elements in the right order

/paper renders an HTML page

/paper has the DOCTYPE declaration VERY FIRST line of the page.

/paper has a meta tag that increases the types of characters we can use.

/paper has the title 'You played paper!'

/paper has at least one link

/paper has at least two links

/paper has at least three links

/paper has at most four links

/paper has a link to '/rock' with the text 'Play Rock'

/paper has a link to '/paper' with the text 'Play Paper'

/paper has a link to '/scissors' with the text 'Play Scissors'

/paper has a link to '/' with the text 'Rules'

/paper has each 'Play' link in their own <div>

/paper has at least one secondary heading

/paper has at least two secondary headings

/paper has at most three secondary headings

/paper has one secondary heading with the text 'We played paper!'

/paper has one secondary heading with the text 'They played paper!'

/paper has one secondary heading with the text 'We tied!'

/paper has all elements in the right order

/scissors renders an HTML page

/scissors has the title 'You played scissors!'

/scissors has at least one link

/scissors has at least two links

/scissors has at least three links

/scissors has at most four links

/scissors has a link to '/rock' with the text 'Play Rock'

/scissors has a link to '/paper' with the text 'Play Paper'

/scissors has a link to '/scissors' with the text 'Play Scissors'

/scissors has a link to '/' with the text 'Rules'

/scissors has each 'Play' link in their own <div> tag

/scissors has at least one secondary heading

/scissors has at least two secondary headings

/scissors has at most three secondary headings

/scissors has one secondary heading with the text 'We played scissors!'

/scissors has one secondary heading with the text 'They played paper!'

/scissors has one secondary heading with the text 'We won!'

/scissors has all elements in the right order

The home page renders an HTML page

The home page has the title 'Rock-Paper-Scissors Rules'

The home page has at least one link

The home page has at least two links

The home page has at least three links

The home page has at most four links

The home page has a link to '/rock' with the text 'Play Rock'

The home page has a link to '/paper' with the text 'Play Paper'

The home page has a link to '/scissors' with the text 'Play Scissors'

The home page has each 'Play' link in their own <div> tag

The home page has a heading with the text 'Welcome to Rock-Paper-Scissors!'

The home page has a link with the text 'Wikipedia'

The home page has a link to wikipedia with the text 'Wikipedia'

The home page has a paragraph with the text 'From Wikipedia:'

The home page has 'Wikipedia' as a link to wikipedia.org that opens in a new tab

The home page has at least 1 paragraph tag

The home page has at least 2 paragraph tags

The home page has at least 3 paragraph tags

The home page has at least 4 paragraph tags

The home page has at least 5 paragraph tags

The home page has at least 6 paragraph tags

The home page has at least 7 paragraph tags

The home page has at most 8 paragraph tags

The home page has a paragraph with 'Rock-paper-scissors...' text

The home page has a paragraph with 'These shapes are:' text

The home page has one unordered list

The home page has a unordered list with 3 list items

The home page has a paragraph with text: 'A player who decides...'

The home page has one table element

The home page has one table element with a border of 1

The home page has one table element with 5 rows

The home page has a table column in the 1st row that spans 2 rows and 2 columns

The home page has a table column in the 1st row that spans 3 columns with text 'and they play...'

The home page has the 1st table column in the 2nd row with text 'Rock'

The home page has the 2nd table column in the 2nd row with text 'Paper'

The home page has the 3rd table column in the 2nd row with text 'Scissors'

The home page has the 1st table column in the 3rd row span 3 rows & have text 'If we play...'

The home page has the 2nd table column in the 3rd have text 'Rock'

The home page has the 3rd table column in the 3rd row have text 'We tie'

The home page has the 4th table column in the 3rd row have text 'We lose'

The home page has the 5th table column in the 3rd row have text 'We win'

The home page has the 1st table column in the 4th row have text 'Paper'

The home page has the 2nd table column in the 4th row have text 'We win'

The home page has the 3rd table column in the 4th row have text 'We tie'

The home page has the 4th table column in the 4th row have text 'We lose'

The home page has the 1st table column in the 5th row have text 'Scissors'

The home page has the 2nd table column in the 5th row have text 'We lose'

The home page has the 3rd table column in the 5th row have text 'We win'

The home page has the 4th table column in the 5th row have text 'We tie'

The home page has the whole HTML table displayed correctly

The home page has a paragraph with text: 'Originating from China and Japan...'

The home page has an image with rock paper scissors svg from the target

The home page has a paragraph with text: 'A chart showing how...'

The home page has an image with Kitsune-ken svg from the target

The home page has a paragraph with text: 'Kitsune-ken was a...'

The home page has an image with Japanese sansukumi-ken svg from the target

The home page has a paragraph with text: 'Mushi-ken, the earliest...'

The home page has all the elements in the right order.

¹ heroku login

If heroku login does not succeed in logging you in with an Error: Forbidden or IP address mismatch try

heroku login -i

and enter your email and password.

rixiobarrios / rps-html Goto Github PK

rps-html's Introduction

RPS HTML

Standard Workflow

Setup

Your job

Deploying to Heroku

Create a Heroku account

Sign in to your Heroku account (once per workspace)

Create a production server (once per application)

Deploying code to your production server

Optional: set a custom domain

Specs

¹ heroku login

rps-html's People

Contributors

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

rixiobarrios / rps-html Goto Github PK

rps-html's Introduction

RPS HTML

Standard Workflow

Setup

Your job

Deploying to Heroku

Create a Heroku account

Sign in to your Heroku account (once per workspace)

Create a production server (once per application)

Deploying code to your production server

Optional: set a custom domain

Specs

1 heroku login

rps-html's People

Contributors

Recommend Projects

Recommend Topics

Recommend Org

¹ heroku login