Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 313bd1c

Browse files
Merge pull request zoltantothcom#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+
exportconst 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)

AltStyle によって変換されたページ (->オリジナル) /