├── JavaScriptTab
├── css
│ └── styles.css
├── icon.png
├── index.html
├── js
│ └── main.js
└── manifest.json
├── README.md
├── adventure
└── choose-your-own-adventure.js
├── bankAccount
└── oo-bank-account.js
├── battleship
├── battleship.js
└── battleship.spec.js
├── bitcoin
└── bitcoin.js
├── blackjack
└── blackjack.js
├── breakout
└── breakout.js
├── calculator
├── calculator.js
└── calculator.spec.js
├── checkers
└── checkers.js
├── chess
└── chess.js
├── connectFour
└── connect-four.js
├── digitalClock
└── digital-clock.js
├── eightBall
└── magic-eight-ball.js
├── hangman
└── hangman.js
├── madlibs
└── madlibs.js
├── mineSweeper
└── minesweeper.js
├── poker
└── poker.js
├── pomodoro
└── pomodoro.js
├── rockPaperScissors
└── rock-paper-scissors.js
├── scrabble
└── scrabble.js
├── simon
└── simon.js
├── snakeGame
├── index.html
├── p5.min.js
├── sketch.js
└── snake.js
├── stockTrader
└── stock-trader.js
├── ticTacToe
└── tic-tac-toe.js
├── toDo
├── index.html
├── script.js
└── style.css
└── twitterClone
└── twitter-clone.js
/JavaScriptTab/css/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Oxygen', sans-serif;
3 | font-size: 22px;
4 | background-color: #204056;
5 | color: white;
6 | letter-spacing: 0.05rem;
7 | width: 100vw;
8 | height: 100vh;
9 | display: flex;
10 | justify-content: center;
11 | align-content: center;
12 | width: 40rem;
13 | margin: 10vh auto;
14 | }
15 |
16 | .tip {
17 | width: 100%;
18 | }
19 |
20 | .code {
21 | font-family: monospace;
22 | background-color: #336180;
23 | padding: 0.25rem 0.75rem;
24 | font-size: 1.375rem;
25 | border-radius: 0.15em;
26 | }
27 |
28 | .code-block {
29 | font-family: monaco, Consolas, "Lucida Console", monospace;
30 | background-color: #336180;
31 | padding: 0.5em 0.75em;
32 | font-size: 1.15rem;
33 | border-radius: 0.15rem;
34 | display: block;
35 | margin: 1rem 0;
36 | }
37 |
38 | .tip-number {
39 | margin: auto;
40 | margin-bottom: 2.5rem;
41 | color: #CCCCCC;
42 | text-transform: uppercase;
43 | letter-spacing: 0.1rem;
44 | font-weight: bolder;
45 | font-size: 1rem;
46 | }
47 |
48 | .js-tip {
49 | margin: auto;
50 | line-height: 2rem;
51 | font-weight: 300;
52 | font-size: 1.375rem
53 | }
54 |
55 | .tip-button {
56 | background-color: #34B3A0;
57 | outline: none;
58 | padding: 1rem 1.5rem;
59 | display: inline-block;
60 | margin: auto;
61 | font-size: 1rem;
62 | margin-top: 2.5rem;
63 | cursor: pointer;
64 | font-weight: bolder;
65 | border: none;
66 | color: white;
67 | }
68 |
69 | .disabled {
70 | background-color: #D8D8D8 !important;
71 | color: #888;
72 | cursor: not-allowed !important;
73 | }
74 |
--------------------------------------------------------------------------------
/JavaScriptTab/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/strongdan/beginner-js-projects/bc7a1f9f595e18d1ca37883d1330f7d4c42762b5/JavaScriptTab/icon.png
--------------------------------------------------------------------------------
/JavaScriptTab/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | JavaScript Tips Tab
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | JavaScript Tip
13 |
14 |
15 |
16 |
17 |
20 |
21 |
22 |
23 |
24 |
25 |