├── .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 | 
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 | 
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 | 
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 | 
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 | 
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 |