-
Notifications
You must be signed in to change notification settings - Fork 50
P's pull request #39
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
P's pull request #39
Changes from all commits
13f54e9
7ea396f
5ffbf72
80e09f9
e2b26cb
7d25046
274a555
89d92cb
22ef056
145c15e
0999275
be85748
a50e0cf
5ec99cf
424be96
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,96 +1,25 @@ | ||
| # Project Name (Start editing here) | ||
| <!--- | ||
| Read Me Contents | ||
| --> | ||
|
|
||
| #  Project #1: The Game | ||
|
|
||
| ### Overview | ||
|
|
||
| Let's start out with something fun - **a game!** | ||
|
|
||
| Everyone will get a chance to **be creative**, and work through some really **tough programming challenges** – since you've already gotten your feet wet with Tic Tac Toe, it's up to you to come up with a fun and interesting game to build. | ||
|
|
||
| **You will be working individually for this project**, but we'll be guiding you along the process and helping as you go. Show us what you've got! | ||
|
|
||
|
|
||
| --- | ||
| #  Project #1: Ducky Trivia War | ||
|
|
||
| ### Technical Requirements | ||
|
|
||
| Your app must: | ||
| ![alt text][ducky banner] | ||
|
|
||
| * **Render a game in the browser** | ||
| * **Any number of players** will be okay, switch turns will be great | ||
| * **Design logic for winning** & **visually display which player won** | ||
| * **Include separate HTML / CSS / JavaScript files** | ||
| * Stick with **KISS (Keep It Simple Stupid)** and **DRY (Don't Repeat Yourself)** principles | ||
| * Use **Javascript** for **DOM manipulation**, jQuery is not compulsory | ||
| * **Deploy your game online**, where the rest of the world can access it | ||
| * Use **semantic markup** for HTML and CSS (adhere to best practices) | ||
| * **No canvas** project will be accepted, only HTML5 + CSS3 + JS please | ||
|
|
||
| --- | ||
|
|
||
| ### Necessary Deliverables | ||
|
|
||
| * A **working game, built by you**, hosted somewhere on the internet | ||
| * A **link to your hosted working game** in the URL section of your GitHub repo | ||
| * A **git repository hosted on GitHub**, with a link to your hosted game, and frequent commits dating back to the very beginning of the project | ||
| * **A ``readme.md`` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc. | ||
|
|
||
| --- | ||
| [ducky banner]: ./Images/d&D.jpg "The Ducky Trivia Challenge" | ||
|
|
||
| ### Suggested Ways to Get Started | ||
|
|
||
| * **Break the project down into different components** (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards! | ||
| * **Use your Development Tools** (console.log, inspector, alert statements, etc) to debug and solve problems | ||
| * Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your game each night, instead of, you know... _procrastinating_. | ||
| * **Commit early, commit often.** Don’t be afraid to break something because you can always go back in time to a previous version. | ||
| * **Consult documentation resources** (MDN, jQuery, etc.) at home to better understand what you’ll be getting into. | ||
| * **Don’t be afraid to write code that you know you will have to remove later.** Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then. | ||
|
|
||
| --- | ||
|
|
||
| ### Potential Project Ideas | ||
|
|
||
| ##### Blackjack | ||
| Make a one player game where people down on their luck can lose all their money by guessing which card the computer will deal next! | ||
|
|
||
| ##### Self-scoring Trivia | ||
| Test your wits & knowledge with whatever-the-heck you know about (so you can actually win). Guess answers, have the computer tell you how right you are! | ||
| ### Overview | ||
|
|
||
| --- | ||
| Play with a friend! Answer 3 true or false trivia questions correctly first to **WIN** the ducky challenge! | ||
|
|
||
| ### Useful Resources | ||
| Click on the link to play: https://persisn.github.io/project-1/ | ||
|
|
||
| * **[MDN Javascript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** _(a great reference for all things Vanilla Javascript)_ | ||
| * **[jQuery Docs](http://api.jquery.com)** _(if you're using jQuery)_ | ||
| * **[GitHub Pages](https://pages.github.com)** _(for hosting your game)_ | ||
| * **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_ | ||
| * **[How to write a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_ | ||
|
|
||
| --- | ||
| #### Flowchart | ||
|
|
||
| ### Project Feedback + Evaluation | ||
|
|
||
| * __Project Workflow__: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)? | ||
|
|
||
| * __Technical Requirements__: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex? | ||
|
|
||
| * __Creativity__: Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user (not just a login button and an index page)? | ||
|
|
||
| * __Code Quality__: Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class? | ||
|
|
||
| * __Deployment__: Did you deploy your application to a public url using GitHub Pages? | ||
|
|
||
| * __Total__: Your instructors will give you a total score on your project between: | ||
|  | ||
|
|
||
| Score | Expectations | ||
| ----- | ------------ | ||
| **0** | _Incomplete._ | ||
| **1** | _Does not meet expectations._ | ||
| **2** | _Meets expectations, good job!_ | ||
| **3** | _Exceeds expectations, you wonderful creature, you!_ | ||
|
|
||
| This will serve as a helpful overall gauge of whether you met the project goals, but __the more important scores are the individual ones__ above, which can help you identify where to focus your efforts for the next project! | ||
| ##### References |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
|
|
||
|
|
||
| #  Project #1: Ducky Trivia War | ||
|
|
||
|
|
||
| ![alt text][ducky banner] | ||
|
|
||
| [ducky banner]: ./Images/d&D.jpg "The Ducky Trivia Challenge" | ||
|
|
||
|
|
||
|
|
||
| ### Overview | ||
|
|
||
| Play with a friend! Answer 3 true or false trivia questions correctly first to **WIN** the ducky challenge! | ||
|
|
||
| Click on the link to play: https://persisn.github.io/project-1/ | ||
|
|
||
|
|
||
| --- | ||
| #### Flowchart | ||
|
|
||
|  | ||
|
|
||
|
|
||
| ##### References |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| # Trivia War | ||
|
|
||
| <!--- | ||
| Read Me Contents | ||
|
|
||
|
|
||
| --> | ||
|
|
||
| #  Project #1: The Game | ||
|
|
||
| ### Overview | ||
|
|
||
| Let's start out with something fun - **a game!** | ||
|
|
||
| Everyone will get a chance to **be creative**, and work through some really **tough programming challenges** – since you've already gotten your feet wet with Tic Tac Toe, it's up to you to come up with a fun and interesting game to build. | ||
|
|
||
| **You will be working individually for this project**, but we'll be guiding you along the process and helping as you go. Show us what you've got! | ||
|
|
||
|
|
||
| --- | ||
|
|
||
| ### Technical Requirements | ||
|
|
||
| Your app must: | ||
|
|
||
| * **Render a game in the browser** | ||
| * **Any number of players** will be okay, switch turns will be great | ||
| * **Design logic for winning** & **visually display which player won** | ||
| * **Include separate HTML / CSS / JavaScript files** | ||
| * Stick with **KISS (Keep It Simple Stupid)** and **DRY (Don't Repeat Yourself)** principles | ||
| * Use **Javascript** for **DOM manipulation**, jQuery is not compulsory | ||
| * **Deploy your game online**, where the rest of the world can access it | ||
| * Use **semantic markup** for HTML and CSS (adhere to best practices) | ||
| * **No canvas** project will be accepted, only HTML5 + CSS3 + JS please | ||
|
|
||
| --- | ||
|
|
||
| ### Necessary Deliverables | ||
|
|
||
| * A **working game, built by you**, hosted somewhere on the internet | ||
| * A **link to your hosted working game** in the URL section of your GitHub repo | ||
| * A **git repository hosted on GitHub**, with a link to your hosted game, and frequent commits dating back to the very beginning of the project | ||
| * **A ``readme.md`` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc. | ||
|
|
||
| --- | ||
|
|
||
| ### Suggested Ways to Get Started | ||
|
|
||
| * **Break the project down into different components** (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards! | ||
| * **Use your Development Tools** (console.log, inspector, alert statements, etc) to debug and solve problems | ||
| * Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your game each night, instead of, you know... _procrastinating_. | ||
| * **Commit early, commit often.** Don’t be afraid to break something because you can always go back in time to a previous version. | ||
| * **Consult documentation resources** (MDN, jQuery, etc.) at home to better understand what you’ll be getting into. | ||
| * **Don’t be afraid to write code that you know you will have to remove later.** Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then. | ||
|
|
||
| --- | ||
|
|
||
| ### Potential Project Ideas | ||
|
|
||
| ##### Blackjack | ||
| Make a one player game where people down on their luck can lose all their money by guessing which card the computer will deal next! | ||
|
|
||
| ##### Self-scoring Trivia | ||
| Test your wits & knowledge with whatever-the-heck you know about (so you can actually win). Guess answers, have the computer tell you how right you are! | ||
|
|
||
| --- | ||
|
|
||
| ### Useful Resources | ||
|
|
||
| * **[MDN Javascript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** _(a great reference for all things Vanilla Javascript)_ | ||
| * **[jQuery Docs](http://api.jquery.com)** _(if you're using jQuery)_ | ||
| * **[GitHub Pages](https://pages.github.com)** _(for hosting your game)_ | ||
| * **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_ | ||
| * **[How to write a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_ | ||
|
|
||
| --- | ||
|
|
||
| ### Project Feedback + Evaluation | ||
|
|
||
| * __Project Workflow__: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)? | ||
|
|
||
| * __Technical Requirements__: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex? | ||
|
|
||
| * __Creativity__: Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user (not just a login button and an index page)? | ||
|
|
||
| * __Code Quality__: Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class? | ||
|
|
||
| * __Deployment__: Did you deploy your application to a public url using GitHub Pages? | ||
|
|
||
| * __Total__: Your instructors will give you a total score on your project between: | ||
|
|
||
| Score | Expectations | ||
| ----- | ------------ | ||
| **0** | _Incomplete._ | ||
| **1** | _Does not meet expectations._ | ||
| **2** | _Meets expectations, good job!_ | ||
| **3** | _Exceeds expectations, you wonderful creature, you!_ | ||
|
|
||
| This will serve as a helpful overall gauge of whether you met the project goals, but __the more important scores are the individual ones__ above, which can help you identify where to focus your efforts for the next project! |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| body { | ||
| top: 50px; | ||
| left: 150px; | ||
| width: 800px; | ||
| height: 600px; | ||
|
|
||
| position: absolute; | ||
| text-align: center; | ||
|
|
||
| /*background-position: center;*/ | ||
|
|
||
| background-color: black; | ||
|
|
||
| } | ||
|
|
||
| h1 { | ||
| font-family: 'Gentium Basic', serif; | ||
| text-align: center; | ||
| color: black; | ||
| /*text-transform: uppercase;*/ | ||
| background-color: rgba(255,255,255,0.6); | ||
| width: 450px; | ||
| font-size: 30px; | ||
| position: relative; | ||
| left: 110px; | ||
| top: 0px; | ||
| } | ||
|
|
||
| h2 { | ||
| font-family: 'Quicksand', sans-serif; | ||
| text-align: center; | ||
|
|
||
| background-color: rgba(255,255,255,0.6); | ||
| color: black; | ||
| width: 400px; | ||
| position: relative; | ||
| left: 140px; | ||
| font-size: 20px; | ||
| top: 0px; | ||
| } | ||
|
|
||
| h3 { | ||
| font-family: 'Monoton', cursive; | ||
| text-align: center; | ||
| color: white; | ||
| /*text-transform: uppercase;*/ | ||
| /*background-color: rgba(255,255,255,0.4);*/ | ||
| width: 450px; | ||
| font-size: 30px; | ||
| position: relative; | ||
| left: 110px; | ||
|
|
||
|
|
||
| } | ||
| div { | ||
| /*border: 1px solid black;*/ | ||
|
|
||
| } | ||
|
|
||
| .ansBtn { | ||
| /*top: 50px; | ||
| border: 1px solid purple; | ||
| font-size: 30px; | ||
| font:*/ | ||
| font-family: 'Gentium Basic', serif; | ||
| background:#47AAEB; | ||
| width:100px; | ||
| height:40px; | ||
| border:0px; | ||
| color:white; | ||
| border-bottom:4px solid #3C97D4; | ||
| border-radius:10px; | ||
| font-size:20px; | ||
| text-shadow:1px #3C97D4; | ||
| text-transform:uppercase; | ||
| position: relative; | ||
| top: 50px; | ||
| right: 20px;` ` | ||
|
|
||
| } | ||
|
|
||
| .container { | ||
| width: 700px; | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Indentation |
||
| height: 500px; | ||
| background-image: url("../../Images/background.jpeg"); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| position: relative; | ||
| top: 10px; | ||
| } | ||
|
|
||
| .scoreBoard { | ||
| font-family: 'Acme', sans-serif; | ||
| position: relative; | ||
|
|
||
| top:200px; | ||
| } | ||
|
|
||
| #scoreBoard1 { | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| color: white; | ||
|
|
||
| float: left; | ||
| font-size: 20px; | ||
| position: relative; | ||
| left: 100px; | ||
| text-transform: uppercase; | ||
|
|
||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Clean those white spaces |
||
|
|
||
| } | ||
|
|
||
| #scoreBoard2{ | ||
| text-transform: uppercase; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| color: white; | ||
| float: right; | ||
| position: relative; | ||
| font-size: 20px; | ||
| right: 130px | ||
|
|
||
| } | ||
|
|
||
| .images { | ||
| position: relative; | ||
| top: 10px; | ||
| } | ||
|
|
||
| #daffy { | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why it needs to be absolute positioned? |
||
| position: absolute; | ||
| float: right; | ||
| right: 130px; | ||
| } | ||
|
|
||
| #donald { | ||
| position: absolute; | ||
| float: left; | ||
| left: 100px; | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's backtick (`) here, please clean it out