Skip to content

Commit 313bd1c

Browse files
zoltantothcomzoltantothcom
authored
Merge pull request #25 from zoltantothcom/dev
Change project name
2 parents 5315f91 + 404d923 commit 313bd1c

File tree

12 files changed

+168
-59
lines changed

12 files changed

+168
-59
lines changed

‎.travis.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,5 @@ after_success:
2020
deploy:
2121
provider: surge
2222
project: ./build
23-
domain: https://javascript-design-patterns.surge.sh
23+
domain: https://design-patterns-javascript.surge.sh
2424
skip_cleanup: true

‎README.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
# JavaScript Design Patterns
1+
# Design Patterns _(implemented in JavaScript)_
22

3-
[![Build Status](https://travis-ci.org/zoltantothcom/JavaScript-Design-Patterns.svg?branch=master)](https://travis-ci.org/zoltantothcom/JavaScript-Design-Patterns) [![Coverage Status](https://coveralls.io/repos/github/zoltantothcom/JavaScript-Design-Patterns/badge.svg)](https://coveralls.io/github/zoltantothcom/JavaScript-Design-Patterns) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/5f4e97b771504e23b0b414d2cbc69506)](https://www.codacy.com/app/zoltantothcom/JavaScript-Design-Patterns?utm_source=github.com&utm_medium=referral&utm_content=zoltantothcom/JavaScript-Design-Patterns&utm_campaign=Badge_Grade) [![Greenkeeper badge](https://badges.greenkeeper.io/zoltantothcom/JavaScript-Design-Patterns.svg)](https://greenkeeper.io/)
3+
[![Build Status](https://travis-ci.org/zoltantothcom/Design-Patterns-JavaScript.svg?branch=master)](https://travis-ci.org/zoltantothcom/Design-Patterns-JavaScript) [![Coverage Status](https://coveralls.io/repos/github/zoltantothcom/Design-Patterns-JavaScript/badge.svg)](https://coveralls.io/github/zoltantothcom/Design-Patterns-JavaScript) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/5f4e97b771504e23b0b414d2cbc69506)](https://www.codacy.com/app/zoltantothcom/Design-Patterns-JavaScript?utm_source=github.com&utm_medium=referral&utm_content=zoltantothcom/Design-Patterns-JavaScript&utm_campaign=Badge_Grade) [![Greenkeeper badge](https://badges.greenkeeper.io/zoltantothcom/Design-Patterns-JavaScript.svg)](https://greenkeeper.io/)
44

5-
JavaScript Design Patterns - a game to get familiar with the design patterns, test your knowledge or simply for fun.
5+
Design Patterns - a game to get familiar with the design patterns implemented in JavaScript, test your knowledge or simply for fun.
66

7-
### :zap: [PLAY HERE](http://javascript-design-patterns.surge.sh/)
7+
### :zap: [PLAY HERE](http://design-patterns-javascript.surge.sh/)
88

9-
<img src="https://raw.githubusercontent.com/zoltantothcom/JavaScript-Design-Patterns/master/static/screenshot.png?sanitize=true&raw=true" alt="JavaScript Design Patterns - game results screenshot" />
9+
<img src="https://raw.githubusercontent.com/zoltantothcom/Design-Patterns-JavaScript/master/static/screenshot.png?sanitize=true&raw=true" alt="Design Patterns - game results screenshot" />
1010

1111
- [About](#about)
1212
- [How To Run Locally](#how-to-run-locally)
1313
- [Running the Tests](#running-the-tests)
14-
- [Credits](#credits)
14+
- [Inspiration and Credits](#inspiration-and-credits)
1515
- [License](#license)
1616

1717
## About
@@ -55,13 +55,13 @@ This is a small game to get you familiar with all the 23 Gang of Four design pat
5555
1. Clone this repo
5656

5757
```
58-
git clone git@github.com:zoltantothcom/JavaScript-Design-Patterns.git
58+
git clone git@github.com:zoltantothcom/Design-Patterns-JavaScript.git
5959
```
6060

6161
2. Switch to project folder
6262

6363
```
64-
cd JavaScript-Design-Patterns
64+
cd Design-Patterns-JavaScript
6565
```
6666

6767
3. Install all the dependencies
@@ -92,7 +92,7 @@ yarn test
9292
yarn test:coverage
9393
```
9494

95-
## Credits
95+
## Inspiration and Credits
9696

9797
- Inpired by the very well-known [JavaScript Guessing Game](https://javascript-game.firebaseapp.com/)
9898

‎__tests__/Layout.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ describe('Layout', () => {
6161
});
6262

6363
it('has the correct title', () => {
64-
expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
64+
expect(tree.find('header h1').text()).toMatch('Design Patterns');
6565
});
6666

6767
it('renders 1 link', () => {
@@ -103,7 +103,7 @@ describe('Layout', () => {
103103
});
104104

105105
it('has the correct title', () => {
106-
expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
106+
expect(tree.find('header h1').text()).toMatch('Design Patterns');
107107
});
108108

109109
it('renders 1 link', () => {

‎__tests__/components/__snapshots__/Header.test.js.snap‎

Lines changed: 52 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,27 @@ exports[`<Header /> component renders with DARK theme 1`] = `
3737
}
3838
3939
.c6 {
40-
font-family: 'Karla',sans-serif;
41-
padding: 1.5rem;
40+
padding: 0.75rem 0 1rem;
4241
border-radius: 4px;
4342
background: #282828;
44-
font-size: 1.75rem;
45-
color: #E22A23;
4643
margin: 1rem 0 0;
4744
text-align: center;
4845
width: 100%;
4946
}
5047
48+
.c7 {
49+
font-family: 'Karla',sans-serif;
50+
font-size: 1.75rem;
51+
color: #E22A23;
52+
margin: 0;
53+
}
54+
55+
.c8 {
56+
font: 400 0.925rem 'Karla',sans-serif;
57+
color: #C8C8C8;
58+
margin: 0.75rem 0 0;
59+
}
60+
5161
.c0 {
5262
-webkit-align-items: center;
5363
-webkit-box-align: center;
@@ -194,11 +204,20 @@ exports[`<Header /> component renders with DARK theme 1`] = `
194204
</svg>
195205
</button>
196206
</div>
197-
<h1
207+
<div
198208
className="c6"
199209
>
200-
JavaScript Design Patterns
201-
</h1>
210+
<h1
211+
className="c7"
212+
>
213+
Design Patterns
214+
</h1>
215+
<h2
216+
className="c8"
217+
>
218+
implemented in JavaScript
219+
</h2>
220+
</div>
202221
</header>
203222
</div>
204223
`;
@@ -240,17 +259,27 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
240259
}
241260
242261
.c6 {
243-
font-family: 'Karla',sans-serif;
244-
padding: 1.5rem;
262+
padding: 0.75rem 0 1rem;
245263
border-radius: 4px;
246264
background: #F2E8F2;
247-
font-size: 1.75rem;
248-
color: #6F256F;
249265
margin: 1rem 0 0;
250266
text-align: center;
251267
width: 100%;
252268
}
253269
270+
.c7 {
271+
font-family: 'Karla',sans-serif;
272+
font-size: 1.75rem;
273+
color: #6F256F;
274+
margin: 0;
275+
}
276+
277+
.c8 {
278+
font: 400 0.925rem 'Karla',sans-serif;
279+
color: #6F256F;
280+
margin: 0.75rem 0 0;
281+
}
282+
254283
.c0 {
255284
-webkit-align-items: center;
256285
-webkit-box-align: center;
@@ -397,11 +426,20 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
397426
</svg>
398427
</button>
399428
</div>
400-
<h1
429+
<div
401430
className="c6"
402431
>
403-
JavaScript Design Patterns
404-
</h1>
432+
<h1
433+
className="c7"
434+
>
435+
Design Patterns
436+
</h1>
437+
<h2
438+
className="c8"
439+
>
440+
implemented in JavaScript
441+
</h2>
442+
</div>
405443
</header>
406444
</div>
407445
`;

‎__tests__/components/__snapshots__/Title.test.js.snap‎

Lines changed: 52 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,78 @@
22

33
exports[`<Title /> component renders with a DARK theme 1`] = `
44
.c0 {
5-
font-family: 'Karla',sans-serif;
6-
padding: 1.5rem;
5+
padding: 0.75rem 0 1rem;
76
border-radius: 4px;
87
background: #282828;
9-
font-size: 1.75rem;
10-
color: #E22A23;
118
margin: 1rem 0 0;
129
text-align: center;
1310
width: 100%;
1411
}
1512
16-
<h1
13+
.c1 {
14+
font-family: 'Karla',sans-serif;
15+
font-size: 1.75rem;
16+
color: #E22A23;
17+
margin: 0;
18+
}
19+
20+
.c2 {
21+
font: 400 0.925rem 'Karla',sans-serif;
22+
color: #C8C8C8;
23+
margin: 0.75rem 0 0;
24+
}
25+
26+
<div
1727
className="c0"
1828
>
19-
JavaScript Design Patterns
20-
</h1>
29+
<h1
30+
className="c1"
31+
>
32+
Design Patterns
33+
</h1>
34+
<h2
35+
className="c2"
36+
>
37+
implemented in JavaScript
38+
</h2>
39+
</div>
2140
`;
2241

2342
exports[`<Title /> component renders with a LIGHT theme 1`] = `
2443
.c0 {
25-
font-family: 'Karla',sans-serif;
26-
padding: 1.5rem;
44+
padding: 0.75rem 0 1rem;
2745
border-radius: 4px;
2846
background: #F2E8F2;
29-
font-size: 1.75rem;
30-
color: #6F256F;
3147
margin: 1rem 0 0;
3248
text-align: center;
3349
width: 100%;
3450
}
3551
36-
<h1
52+
.c1 {
53+
font-family: 'Karla',sans-serif;
54+
font-size: 1.75rem;
55+
color: #6F256F;
56+
margin: 0;
57+
}
58+
59+
.c2 {
60+
font: 400 0.925rem 'Karla',sans-serif;
61+
color: #6F256F;
62+
margin: 0.75rem 0 0;
63+
}
64+
65+
<div
3766
className="c0"
3867
>
39-
JavaScript Design Patterns
40-
</h1>
68+
<h1
69+
className="c1"
70+
>
71+
Design Patterns
72+
</h1>
73+
<h2
74+
className="c2"
75+
>
76+
implemented in JavaScript
77+
</h2>
78+
</div>
4179
`;

‎__tests__/pages/__snapshots__/About.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ exports[`About page renders with a DARK theme 1`] = `
2929
The Game
3030
</h3>
3131
<p>
32-
JavaScript Design Patterns - get familiar with the design patterns, test yourself (or someone else) or simply for fun. Enjoy!
32+
Design Patterns - get familiar with the design patterns implemented in JavaScript, test yourself (or someone else) or simply for fun. Enjoy!
3333
</p>
3434
<h3
3535
className="c1"
@@ -98,7 +98,7 @@ exports[`About page renders with a LIGHT theme 1`] = `
9898
The Game
9999
</h3>
100100
<p>
101-
JavaScript Design Patterns - get familiar with the design patterns, test yourself (or someone else) or simply for fun. Enjoy!
101+
Design Patterns - get familiar with the design patterns implemented in JavaScript, test yourself (or someone else) or simply for fun. Enjoy!
102102
</p>
103103
<h3
104104
className="c1"

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>JavaScript Design Patterns</title>
4+
<title>Design Patterns - JavaScript</title>
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
77
</head>
88
<body>
9-
<a href="https://github.com/zoltantothcom/JavaScript-Design-Patterns" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#e22a23"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
9+
<a href="https://github.com/zoltantothcom/Design-Patterns-JavaScript" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#e22a23"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
1010
<div id="root" />
1111
<script>window.twttr = (function(d, s, id) {
1212
var js, fjs = d.getElementsByTagName(s)[0],

‎src/components/Percentage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const StyledPercentage = styled.h1`
1717
width: 10rem;
1818
`;
1919

20-
const Percentage = ({ answers }) => {
20+
export const Percentage = ({ answers }) => {
2121
let level = 'red';
2222
let correct = 0;
2323

‎src/components/Title.jsx‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,33 @@
11
import React from 'react';
22
import styled from 'styled-components';
33

4-
const StyledTitle = styled.h1`
5-
font-family: 'Karla', sans-serif;
6-
padding: 1.5rem;
4+
const TitleContainer = styled.div`
5+
padding: 0.75rem 0 1rem;
76
border-radius: 4px;
87
background: ${props => props.theme.titleBackground};
9-
font-size: 1.75rem;
10-
color: ${props => props.theme.title};
118
margin: 1rem 0 0;
129
text-align: center;
1310
width: 100%;
1411
`;
1512

16-
export const Title = () => <StyledTitle>JavaScript Design Patterns</StyledTitle>;
13+
const Heading = styled.h1`
14+
font-family: 'Karla', sans-serif;
15+
font-size: 1.75rem;
16+
color: ${props => props.theme.title};
17+
margin: 0;
18+
`;
19+
20+
const SubHeading = styled.h2`
21+
font: 400 0.925rem 'Karla', sans-serif;
22+
color: ${props => props.theme.link};
23+
margin: 0.75rem 0 0;
24+
`;
25+
26+
export const Title = () => (
27+
<TitleContainer>
28+
<Heading>Design Patterns</Heading>
29+
<SubHeading>implemented in JavaScript</SubHeading>
30+
</TitleContainer>
31+
);
1732

1833
export default Title;

‎src/pages/About.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ const About = () => (
2424
<StyledAbout>
2525
<Header>The Game</Header>
2626
<p>
27-
JavaScript Design Patterns - get familiar with the design patterns, test yourself (or someone
28-
else) or simply for fun. Enjoy!
27+
Design Patterns - get familiar with the design patterns implemented in JavaScript, test
28+
yourself (or someone else) or simply for fun. Enjoy!
2929
</p>
3030

3131
<Header>References</Header>

0 commit comments

Comments
 (0)