├── .gitignore ├── README.md ├── checklist └── README.md ├── images └── download-to-local.png ├── random-cat-facts ├── README.md ├── images │ └── cat-facts.gif ├── index.html └── style.css ├── rock-paper-scissors ├── README.md ├── images │ └── rock-paper-scissors.gif ├── index.html └── style.css └── temperature-conversion ├── README.md ├── images ├── preview1.png └── preview2.png ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Beginner JS projects 2 | This repository is the sequel to the [First Timers Night](https://github.com/womenwhocodedc/front-end-community/blob/master/first-timers-guides/first_timers_javascript_guide.md) for Women Who Code. Each folder contains a sample project that can be worked on, along with the following contents for each project: 3 | * Starter HTML/CSS template files (can be modified for your own project but please give credit) 4 | * Required functionality for the project (aka "To Dos") 5 | * Expected outcomes - screenshots displaying all possible outputs of the given project 6 | * Extra functionality/ideas you can incorporate into the project (aka "Dazzlers") 7 | 8 | While all of these projects can be worked on individually, the intent is that any one of these projects will be taught during a front end lab night as a supplement to the first timers nights. 9 | 10 | ## Getting Started 11 | 1. _Download_ the repo. Clone the repo to your local if you have Git, or download the repo if you don't (see screenshot below): 12 | ![alt text](images/download-to-local.png) 13 | 2. _Read_ the project's `README.md` file for more information on the project. 14 | 3. _Create a new JS file_ in the project folder you wish to work in and add your code there. Be sure to [link your JS file](https://github.com/womenwhocodedc/front-end-community/blob/master/first-timers-guides/first_timers_javascript_guide.md#external-javascript-file---mainjs) to the index page! 15 | 4. _View your changes_ by double clicking on the `index.html` file of the project you're working on within your computer's file viewer (Finder on Mac, Windows Explorer on Windows). 16 | 5. _Refresh the page_ anytime you change something for the project if you want to see the differences. 17 | 18 | That's all there is to it! 19 | 20 | ## Stuck on a problem? 21 | Check to make sure the mistake isn't one of the following: 22 | * Missing brackets/semi-colons/tags 23 | * Incorrect variable names (`myvar` is not the same as `myVar`) 24 | * Other [Syntax errors](https://www.techopedia.com/definition/13391/syntax-error) 25 | 26 | If the problem isn't a syntax error (or you're not sure if it is), searching online is your best friend. [MDN](https://developer.mozilla.org/en-US/) is a great resource for general documentation, while [Stack Overflow](https://stackoverflow.com/) is great for very specific code questions. 27 | 28 | If all else fails, another branch `marian-answers` has the completed JS files. Or [create an issue on this repo](https://github.com/mmlumba/beginner-js-projects/issues/new) if you think I'm missing something. 29 | -------------------------------------------------------------------------------- /checklist/README.md: -------------------------------------------------------------------------------- 1 | # Checklist - Coming soon 2 | -------------------------------------------------------------------------------- /images/download-to-local.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmlumba/beginner-js-projects/148b700df9666b2353caf83978af40bdf56a3d37/images/download-to-local.png -------------------------------------------------------------------------------- /random-cat-facts/README.md: -------------------------------------------------------------------------------- 1 | # Random Cat Facts 2 | A quick project that gathers facts from the [Random Fact API page](https://fact.birb.pw/) and places it onto a web page. For the actual facts, click here: [Cat Facts API endpoint](https://fact.birb.pw/api/v1/cat). 3 | 4 | ## To-Do 5 | * Create an object that lists cat facts 6 | * Create a function that chooses a random fact 7 | * Display the result of that function on the webpage 8 | 9 | ## Expected outcomes 10 | ![cat-facts](images/cat-facts.gif) 11 | 12 | ## Dazzlers 13 | * Use [AJAX](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX) to grab the [JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) from the cat facts endpoint and put it on your page 14 | 15 | ## Resources 16 | * [JavaScript object basics](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics) 17 | * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) 18 | * [Math.random()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 19 | * [Event Listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) 20 | -------------------------------------------------------------------------------- /random-cat-facts/images/cat-facts.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmlumba/beginner-js-projects/148b700df9666b2353caf83978af40bdf56a3d37/random-cat-facts/images/cat-facts.gif -------------------------------------------------------------------------------- /random-cat-facts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random Cat Facts 6 | 7 | 8 | 9 |

Random Cat Facts

10 |

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /random-cat-facts/style.css: -------------------------------------------------------------------------------- 1 | h1, p { 2 | font-family: Arial, sans-serif; 3 | } 4 | -------------------------------------------------------------------------------- /rock-paper-scissors/README.md: -------------------------------------------------------------------------------- 1 | # Rock Paper Scissors 2 | You're going to program the classic game! In this app, the player will select which "instrument" they will pick (rock, paper, or scissors). Then they'll press a button to start the game against the browser. See GIF below: 3 | ![rock paper scissors game](images/rock-paper-scissors.gif) 4 | 5 | ## To-Do 6 | * Add click events for each of the buttons ("Rock", "Paper", "Scissors", "Start game") 7 | * See resource on Event Listeners 8 | * Decide how the browser will choose what option to pick 9 | * Hint: the browser doesn't know what "scissors" is, but it could associate a given number with "scissors"; see resource on operations and Math.random 10 | * Compare the option that the user chooses with the option the browser chooses 11 | * Write the logic to determine the winner for a given match-up; see resource on operations 12 | 13 | ## Expected outcomes 14 | See above GIF 15 | 16 | ## Dazzlers 17 | * Add images for the actual items 18 | * Add mouseover events for the "Rock", "Paper", "Scissors" buttons 19 | * Add a counter near the "Start game" button to track how many games have been played 20 | 21 | ## Resources 22 | Here's a starter list of helpful documentation for the given project: 23 | * [Event Listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) 24 | * [Conditionals](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals) 25 | * [Operations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators) 26 | * [Math.random()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 27 | * [document.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) 28 | -------------------------------------------------------------------------------- /rock-paper-scissors/images/rock-paper-scissors.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmlumba/beginner-js-projects/148b700df9666b2353caf83978af40bdf56a3d37/rock-paper-scissors/images/rock-paper-scissors.gif -------------------------------------------------------------------------------- /rock-paper-scissors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rock Paper Scissors Game 6 | 7 | 8 | 9 |

Rock Paper Scissors Game

10 |

Choose your option:

11 |
12 | 13 | 14 | 15 |
16 |

17 | 18 |

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /rock-paper-scissors/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 20px; 3 | color: #ececec; 4 | } 5 | 6 | h1, p { 7 | font-family: Arial, sans-serif; 8 | } 9 | 10 | h1 { 11 | color: #555555; 12 | } 13 | 14 | #rock, #paper, #scissors { 15 | width: 100px; 16 | height: 50px; 17 | font-size: 16px; 18 | background-color: #1C2833; 19 | border-radius: 3px; 20 | border: none; 21 | color: #ececec; 22 | padding-left: 20px; 23 | padding-right: 20px; 24 | margin-right: 10px; 25 | box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .2); 26 | } 27 | 28 | #startGame { 29 | background-color: #B8860B; 30 | width: 100px; 31 | height: 50px; 32 | font-size: 16px; 33 | border-radius: 3px; 34 | border: none; 35 | box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .2); 36 | } 37 | 38 | div { 39 | margin-bottom: 20px; 40 | } 41 | 42 | p { 43 | color: #1C2833; 44 | } 45 | -------------------------------------------------------------------------------- /temperature-conversion/README.md: -------------------------------------------------------------------------------- 1 | # Temperature Conversion 2 | This is a web app that converts a given temperature (in either Fahrenheit or Celsius) and converts the number into the other unit (either Celsius or Fahrenheit). 3 | ![preview-temp](images/preview1.png) 4 | 5 | ## To-Do 6 | * Create the functions for both conversions (Fahrenheit to Celsius; Celsius to Fahrenheit) 7 | * Create two separate events that each convert the temperature to the other unit when the "Convert" button is pressed 8 | * See resource on Event Listeners 9 | 10 | ## Expected outcomes 11 | ![answer-temp](images/preview2.png) 12 | 13 | ## Dazzlers (extras) 14 | * Add a section to convert the temperature into Kelvin from both units (and vice versa from Kelvin) 15 | 16 | ## Resources: 17 | Here's a starter list of helpful documentation for the given project: 18 | * [Passing parameters in functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) 19 | * [Event Listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) 20 | * [Operations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators) 21 | -------------------------------------------------------------------------------- /temperature-conversion/images/preview1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmlumba/beginner-js-projects/148b700df9666b2353caf83978af40bdf56a3d37/temperature-conversion/images/preview1.png -------------------------------------------------------------------------------- /temperature-conversion/images/preview2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmlumba/beginner-js-projects/148b700df9666b2353caf83978af40bdf56a3d37/temperature-conversion/images/preview2.png -------------------------------------------------------------------------------- /temperature-conversion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Temperature Conversion 6 | 7 | 8 | 9 |

Temperature Conversion Application

10 |

Convert from Fahrenheit to Celsius:

11 | 12 |
13 |

Convert from Celsius to Fahrenheit:

14 | 15 |

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /temperature-conversion/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 20px; 3 | color: #ececec; 4 | } 5 | 6 | h1, h2, p { 7 | font-family: Arial, sans-serif; 8 | } 9 | 10 | h1 { 11 | color: #008B8B; 12 | } 13 | 14 | h2 { 15 | color: #1BA39C; 16 | } 17 | 18 | p, label { 19 | color: #4F5A65; 20 | } 21 | --------------------------------------------------------------------------------