├── .gitignore
├── .gitpod.dockerfile
├── .gitpod.yml
├── .theia
├── client.cnf
├── init_tasks.sh
├── launch.json
├── mysql.cnf
├── settings.json
├── snippets.json
└── start_mysql.sh
├── 01-putting-the-basics-in-place
├── 01-getting-set-up
│ ├── assets
│ │ ├── css
│ │ │ └── style.css
│ │ └── js
│ │ │ └── script.js
│ └── index.html
├── 02-writing-some-html-part1
│ ├── assets
│ │ ├── css
│ │ │ └── style.css
│ │ ├── images
│ │ │ └── logo.png
│ │ └── js
│ │ │ └── script.js
│ └── index.html
├── 03-writing-some-html-part2
│ ├── assets
│ │ ├── css
│ │ │ └── style.css
│ │ ├── images
│ │ │ └── logo.png
│ │ └── js
│ │ │ └── script.js
│ └── index.html
└── 04-lets-get-stylish
│ ├── assets
│ ├── css
│ │ └── style.css
│ ├── images
│ │ └── logo.png
│ └── js
│ │ └── script.js
│ └── index.html
├── 02-adding-some-javascript
├── 01-adding-structure
│ ├── assets
│ │ ├── css
│ │ │ └── style.css
│ │ ├── images
│ │ │ └── logo.png
│ │ └── js
│ │ │ └── script.js
│ └── index.html
├── 02-creating-event-listeners
│ ├── assets
│ │ ├── css
│ │ │ └── style.css
│ │ ├── images
│ │ │ └── logo.png
│ │ └── js
│ │ │ └── script.js
│ └── index.html
└── 03-generating-random-numbers
│ ├── assets
│ ├── css
│ │ └── style.css
│ ├── images
│ │ └── logo.png
│ └── js
│ │ └── script.js
│ └── index.html
├── 03-displaying-the-question-and-answer
├── 01-displaying-the-addition-question
│ ├── assets
│ │ ├── css
│ │ │ └── style.css
│ │ ├── images
│ │ │ └── logo.png
│ │ └── js
│ │ │ └── script.js
│ └── index.html
├── 02-calculating-the-answer
│ ├── assets
│ │ ├── css
│ │ │ └── style.css
│ │ ├── images
│ │ │ └── logo.png
│ │ └── js
│ │ │ └── script.js
│ └── index.html
├── 03-checking-the-answer
│ ├── assets
│ │ ├── css
│ │ │ └── style.css
│ │ ├── images
│ │ │ └── logo.png
│ │ └── js
│ │ │ └── script.js
│ └── index.html
└── 04-updating-the-scores
│ ├── assets
│ ├── css
│ │ └── style.css
│ ├── images
│ │ └── logo.png
│ └── js
│ │ └── script.js
│ └── index.html
├── 04-multiplication-and-subtraction-questions
├── 01-the-multiplication-game
│ ├── assets
│ │ ├── css
│ │ │ └── style.css
│ │ ├── images
│ │ │ └── logo.png
│ │ └── js
│ │ │ └── script.js
│ └── index.html
└── 02-the-subtraction-game
│ ├── assets
│ ├── css
│ │ └── style.css
│ ├── images
│ │ └── logo.png
│ └── js
│ │ └── script.js
│ └── index.html
├── 05-tidying-up
└── 01-a-few-last-things
│ ├── assets
│ ├── css
│ │ └── style.css
│ ├── images
│ │ └── logo.png
│ └── js
│ │ └── script.js
│ └── index.html
├── 06-division-challenge
├── assets
│ ├── css
│ │ └── style.css
│ ├── images
│ │ └── logo.png
│ └── js
│ │ └── script.js
└── index.html
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | core.Microsoft*
2 | core.mongo*
3 | core.python*
4 | env.py
5 | __pycache__/
6 | *.py[cod]
7 |
--------------------------------------------------------------------------------
/.gitpod.dockerfile:
--------------------------------------------------------------------------------
1 | FROM gitpod/workspace-full
2 |
3 | USER root
4 | # Setup Heroku CLI
5 | RUN curl https://cli-assets.heroku.com/install.sh | sh
6 |
7 | # Setup MongoDB and MySQL
8 | RUN apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 20691eec35216c63caf66ce1656408e390cfb1f5 && \
9 | echo "deb http://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-4.4.list && \
10 | apt-get update -y && \
11 | touch /etc/init.d/mongod && \
12 | apt-get -y install mongodb-org-shell -y && \
13 | apt-get -y install links && \
14 | apt-get install -y mysql-server && \
15 | apt-get clean && rm -rf /var/cache/apt/* /var/lib/apt/lists/* /tmp/* && \
16 | mkdir /var/run/mysqld && \
17 | chown -R gitpod:gitpod /etc/mysql /var/run/mysqld /var/log/mysql /var/lib/mysql /var/lib/mysql-files /var/lib/mysql-keyring /var/lib/mysql-upgrade /home/gitpod/.cache/heroku/ && \
18 | pip3 install flake8 flake8-flask flake8-django
19 |
20 | # Create our own config files
21 |
22 | COPY .theia/mysql.cnf /etc/mysql/mysql.conf.d/mysqld.cnf
23 |
24 | COPY .theia/client.cnf /etc/mysql/mysql.conf.d/client.cnf
25 |
26 | COPY .theia/start_mysql.sh /etc/mysql/mysql-bashrc-launch.sh
27 |
28 | USER gitpod
29 |
30 | # Start MySQL when we log in
31 |
32 | RUN echo ". /etc/mysql/mysql-bashrc-launch.sh" >> ~/.bashrc
33 |
34 | # Local environment variables
35 | # C9USER is temporary to allow the MySQL Gist to run
36 | ENV C9_USER="gitpod"
37 | ENV PORT="8080"
38 | ENV IP="0.0.0.0"
39 | ENV C9_HOSTNAME="localhost"
40 |
41 | USER root
42 | # Switch back to root to allow IDE to load
43 |
--------------------------------------------------------------------------------
/.gitpod.yml:
--------------------------------------------------------------------------------
1 | image:
2 | file: .gitpod.dockerfile
3 | tasks:
4 | - init: . ${GITPOD_REPO_ROOT}/.theia/init_tasks.sh
5 | vscode:
6 | extensions:
7 | - ms-python.python@2019.8.30787:TnGEOx35GXMhyKLjDGz9Aw==
8 | - formulahendry.auto-close-tag@0.5.9:JZIefALANqOfhSK1TU4+Fw==
9 | - mkaufman.HTMLHint@0.10.0:xevX4CvYOkKd8xjvtJQiGQ==
10 | - eventyret.bootstrap-4-cdn-snippet@1.9.0:I8wcXFcKWQIROg7J0SLLqg==
11 | - esbenp.prettier-vscode@5.7.1:4Zx39KyQMoIz7x94PSmDmQ==
12 | - kevinglasson.cornflakes-linter@0.5.1:KAaMshgHOKan8eojXQ53OQ==
13 |
14 |
--------------------------------------------------------------------------------
/.theia/client.cnf:
--------------------------------------------------------------------------------
1 | [client]
2 | host = localhost
3 | user = root
4 | password =
5 | socket = /var/run/mysqld/mysqld.sock
6 | [mysql_upgrade]
7 | host = localhost
8 | user = root
9 | password =
10 | socket = /var/run/mysqld/mysqld.sock
11 |
--------------------------------------------------------------------------------
/.theia/init_tasks.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # Creates a user record for the current Cloud9 user
4 | # Gives a personalised greeting
5 | # Adds configuration options for SQLite
6 | # Creates run aliases
7 | # Author: Matt Rudge
8 |
9 | echo "Setting the greeting"
10 | sed -i "s/USER_NAME/$GITPOD_GIT_USER_NAME/g" ${GITPOD_REPO_ROOT}/README.md
11 | echo "Creating the ${C9_USER} user in MySQL"
12 | RESULT="$(mysql -sse "SELECT EXISTS(SELECT 1 FROM mysql.user WHERE user = '${C9_USER}')")"
13 | if [ "$RESULT" = 1 ]; then
14 | echo "${C9_USER} already exists"
15 | else
16 | mysql -e "CREATE USER '${C9_USER}'@'%' IDENTIFIED BY '';" -u root
17 | echo "Granting privileges"
18 | mysql -e "GRANT ALL PRIVILEGES ON *.* TO '${C9_USER}'@'%' WITH GRANT OPTION;" -u root
19 | fi
20 | echo "Creating .sqliterc file"
21 | echo ".headers on" > ~/.sqliterc
22 | echo ".mode column" >> ~/.sqliterc
23 | echo "Adding run aliases"
24 | echo 'alias run="python3 $GITPOD_REPO_ROOT/manage.py runserver 0.0.0.0:8000"' >> ~/.bashrc
25 | echo 'alias python=python3' >> ~/.bashrc
26 | echo 'alias pip=pip3' >> ~/.bashrc
27 | echo "Your workspace is ready to use. Happy coding!"
28 | source ~/.bashrc
29 |
--------------------------------------------------------------------------------
/.theia/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // Use IntelliSense to learn about possible attributes.
3 | // Hover to view descriptions of existing attributes.
4 | "version": "0.2.0",
5 | "configurations": [
6 | {
7 | "name": "Python: Current File (Integrated Terminal)",
8 | "type": "python",
9 | "request": "launch",
10 | "program": "${file}",
11 | "console": "internalConsole"
12 | }
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/.theia/mysql.cnf:
--------------------------------------------------------------------------------
1 | [mysqld_safe]
2 | socket = /var/run/mysqld/mysqld.sock
3 | nice = 0
4 |
5 | [mysqld]
6 | user = gitpod
7 | pid-file = /var/run/mysqld/mysqld.pid
8 | socket = /var/run/mysqld/mysqld.sock
9 | port = 3306
10 | basedir = /usr
11 | datadir = /workspace/mysql
12 | tmpdir = /tmp
13 | lc-messages-dir = /usr/share/mysql
14 | skip-external-locking
15 |
16 | key_buffer_size = 16M
17 | max_allowed_packet = 16M
18 | thread_stack = 192K
19 | thread_cache_size = 8
20 |
21 | myisam-recover-options = BACKUP
22 |
23 | general_log_file = /var/log/mysql/mysql.log
24 | general_log = 1
25 | log_error = /var/log/mysql/error.log
26 |
--------------------------------------------------------------------------------
/.theia/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "python.linting.pylintEnabled": true,
3 | "python.linting.enabled": true,
4 | "python.linting.pep8Enabled": false,
5 | "python.linting.flake8Enabled": true,
6 | "python.terminal.activateEnvironment": false,
7 | "python.formatting.autopep8Path": "/home/gitpod/.pyenv/shims/autopep8",
8 | "python.linting.flake8Path": "/home/gitpod/.pyenv/shims/flake8",
9 | "cornflakes.linter.executablePath": "/home/gitpod/.pyenv/shims/flake8",
10 | "files.exclude": {
11 | "**/.git": true,
12 | "**/.gitp*": true,
13 | "**/.svn": true,
14 | "**/.hg": true,
15 | "**/CVS": true,
16 | "**/.DS_Store": true,
17 | "**/.theia": true,
18 | "**/core.Microsoft*": true,
19 | "**/core.mongo*": true,
20 | "**/core.python*": true
21 | },
22 | "emmet.extensionsPath": ".theia"
23 | }
24 |
--------------------------------------------------------------------------------
/.theia/snippets.json:
--------------------------------------------------------------------------------
1 | {
2 | "html": {
3 | "snippets": {
4 | "form": "form>input>input:submit[value=\"Submit\"]"
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/.theia/start_mysql.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # this script is intended to be called from .bashrc
4 | # This is a workaround for not having something like supervisord
5 |
6 | if [ ! -e /var/run/mysqld/gitpod-init.lock ]
7 | then
8 | touch /var/run/mysqld/gitpod-init.lock
9 |
10 | # initialize database structures on disk, if needed
11 | [ ! -d /workspace/mysql ] && mysqld --initialize-insecure
12 |
13 | # launch database, if not running
14 | [ ! -e /var/run/mysqld/mysqld.pid ] && mysqld --daemonize
15 |
16 | rm /var/run/mysqld/gitpod-init.lock
17 | fi
18 |
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/01-getting-set-up/assets/css/style.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/01-getting-set-up/assets/css/style.css
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/01-getting-set-up/assets/js/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/01-getting-set-up/assets/js/script.js
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/01-getting-set-up/index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/01-getting-set-up/index.html
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/02-writing-some-html-part1/assets/css/style.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/02-writing-some-html-part1/assets/css/style.css
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/02-writing-some-html-part1/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/02-writing-some-html-part1/assets/images/logo.png
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/02-writing-some-html-part1/assets/js/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/02-writing-some-html-part1/assets/js/script.js
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/02-writing-some-html-part1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
Correct Answers 0
28 |
Incorrect Answers 0
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/03-writing-some-html-part2/assets/css/style.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/03-writing-some-html-part2/assets/css/style.css
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/03-writing-some-html-part2/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/03-writing-some-html-part2/assets/images/logo.png
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/03-writing-some-html-part2/assets/js/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/03-writing-some-html-part2/assets/js/script.js
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/03-writing-some-html-part2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/04-lets-get-stylish/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* --------- Global style */
2 |
3 | body {
4 | background-color: white;
5 | font-family: "Raleway", sans-serif;
6 | color: #445361;
7 | text-align: center;
8 | }
9 |
10 | /* --------- Heading */
11 |
12 | .heading {
13 | text-align: center;
14 | font-size: 2.5rem;
15 | }
16 |
17 | .logo {
18 | height: 40px;
19 | padding-right: 5px;
20 | }
21 |
22 | /* --------- Game layout */
23 |
24 | .game-area {
25 | background-color: #E6ECF0;
26 | box-sizing: border-box;
27 | width: 85%;
28 | height: 65vh;
29 | max-height: 450px;
30 | max-width: 830px;
31 | margin-left: auto;
32 | margin-right: auto;
33 | padding: 1%;
34 | }
35 |
36 | .question-area {
37 | width: 50%;
38 | font-size: 2rem;
39 | margin: auto;
40 | padding: 50px 0;
41 | }
42 |
43 | .question-area span {
44 | padding: 0 15px;
45 | }
46 |
47 | .score-area {
48 | margin: 5px auto;
49 | width: 60%;
50 | font-size: 1.2rem;
51 | }
52 |
53 | .controls-area {
54 | width: 85%;
55 | margin: 30px auto;
56 | }
57 |
58 | #score {
59 | color: green;
60 | font-weight: bold;
61 | }
62 |
63 | #incorrect {
64 | color: red;
65 | font-weight: bold;
66 | }
67 |
68 | .answer-message {
69 | display: none;
70 | font-size: 1rem;
71 | }
72 |
73 | #answer-box {
74 | border: none;
75 | color: #445361;
76 | display: inline-block;
77 | height: 40px;
78 | width: 80px;
79 | font-size: 1.2rem;
80 | }
81 |
82 | .scores {
83 | display: inline-block;
84 | padding: 25px;
85 | }
86 |
87 | /* --------- Buttons */
88 |
89 | .btn {
90 | width: 220px;
91 | height: 60px;
92 | font-family: "Raleway", sans-serif;
93 | text-transform: uppercase;
94 | letter-spacing: 1.2px;
95 | color: white;
96 | }
97 |
98 | .btn:focus {
99 | outline: none;
100 | }
101 |
102 | .btn--big {
103 | padding-top: 10px;
104 | border-radius: 50%;
105 | background-color: white;
106 | border: 10px solid;
107 | width: 100px;
108 | height: 100px;
109 | font-size: 3.2rem;
110 | margin: 0 30px;
111 | transition: all 0.5s;
112 | }
113 |
114 | .btn--big::after{
115 | content: attr(data-type);
116 | font-size: 1rem;
117 | color: #445361;
118 | position: relative;
119 | left: -0.5em;
120 | }
121 |
122 | .btn--blue {
123 | border-color: blue;
124 | color: blue;
125 | }
126 |
127 | .btn--blue:active,
128 | .btn--blue:hover {
129 | background-color: darkblue;
130 | color: white;
131 | }
132 |
133 | .btn--orange {
134 | border-color: orange;
135 | color: orange;
136 | }
137 |
138 | .btn--orange:active,
139 | .btn--orange:hover {
140 | background-color: darkorange;
141 | color: white;
142 | }
143 |
144 | .btn--red {
145 | border-color: red;
146 | color: red;
147 | }
148 |
149 | .btn--red:active,
150 | .btn--red:hover {
151 | background-color: darkred;
152 | color: white;
153 | }
154 |
155 | .btn--green {
156 | border-color: green;
157 | color: green;
158 | }
159 |
160 | .btn--green:active,
161 | .btn--green:hover {
162 | background-color: darkgreen;
163 | color: white;
164 | }
165 |
166 | .btn--gray {
167 | margin-top: 25px;
168 | background-color: #445361;
169 | border: 1px transparent;
170 | border-radius: 20px;
171 | }
172 |
173 | .btn--gray:active,
174 | .btn--gray:hover {
175 | background-color: #0d1013;
176 | }
177 |
178 | /* --------- Media queries */
179 |
180 | @media (max-width: 414px) {
181 | .controls-area {
182 | width: 100%;
183 | }
184 |
185 | .btn--big {
186 | margin: 0 10px;
187 | padding: 5px;
188 | border: 5px solid;
189 | width: 50px;
190 | height: 50px;
191 | font-size: 1.5rem;
192 | }
193 |
194 | .btn--big::after {
195 | font-size: 0.6rem;
196 | left: -0.7rem;
197 | }
198 |
199 | .question-area {
200 | padding: 10% 0;
201 | width: 100%;
202 | }
203 |
204 | .question-area span {
205 | padding: 0;
206 | }
207 |
208 | .answer-message {
209 | display: block;
210 | }
211 |
212 | #answer-box {
213 | display: block;
214 | margin: 0 auto;
215 | }
216 | .btn--gray {
217 | margin-top: 0;
218 | }
219 |
220 | .score-area {
221 | width: 100%;
222 | }
223 |
224 | .scores {
225 | margin: 0.5em auto;
226 | display: block;
227 | padding: 5px;
228 | }
229 |
230 | .heading {
231 | font-size: 2rem;
232 | }
233 | }
234 |
235 | @media (max-width: 320px) {
236 | .game-area {
237 | height: 70vh;
238 | }
239 |
240 | .controls-area {
241 | width: 75%;
242 | margin: 10px auto;
243 | }
244 |
245 | .btn--big {
246 | margin: 10px 10px;
247 | }
248 | .question-area {
249 | padding: 10px 0;
250 | }
251 |
252 | }
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/04-lets-get-stylish/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/04-lets-get-stylish/assets/images/logo.png
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/04-lets-get-stylish/assets/js/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/04-lets-get-stylish/assets/js/script.js
--------------------------------------------------------------------------------
/01-putting-the-basics-in-place/04-lets-get-stylish/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/02-adding-some-javascript/01-adding-structure/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* --------- Global style */
2 |
3 | body {
4 | background-color: white;
5 | font-family: "Raleway", sans-serif;
6 | color: #445361;
7 | text-align: center;
8 | }
9 |
10 | /* --------- Heading */
11 |
12 | .heading {
13 | text-align: center;
14 | font-size: 2.5rem;
15 | }
16 |
17 | .logo {
18 | height: 40px;
19 | padding-right: 5px;
20 | }
21 |
22 | /* --------- Game layout */
23 |
24 | .game-area {
25 | background-color: #E6ECF0;
26 | box-sizing: border-box;
27 | width: 85%;
28 | height: 65vh;
29 | max-height: 450px;
30 | max-width: 830px;
31 | margin-left: auto;
32 | margin-right: auto;
33 | padding: 1%;
34 | }
35 |
36 | .question-area {
37 | width: 50%;
38 | font-size: 2rem;
39 | margin: auto;
40 | padding: 50px 0;
41 | }
42 |
43 | .question-area span {
44 | padding: 0 15px;
45 | }
46 |
47 | .score-area {
48 | margin: 5px auto;
49 | width: 60%;
50 | font-size: 1.2rem;
51 | }
52 |
53 | .controls-area {
54 | width: 85%;
55 | margin: 30px auto;
56 | }
57 |
58 | #score {
59 | color: green;
60 | font-weight: bold;
61 | }
62 |
63 | #incorrect {
64 | color: red;
65 | font-weight: bold;
66 | }
67 |
68 | .answer-message {
69 | display: none;
70 | font-size: 1rem;
71 | }
72 |
73 | #answer-box {
74 | border: none;
75 | color: #445361;
76 | display: inline-block;
77 | height: 40px;
78 | width: 80px;
79 | font-size: 1.2rem;
80 | }
81 |
82 | .scores {
83 | display: inline-block;
84 | padding: 25px;
85 | }
86 |
87 | /* --------- Buttons */
88 |
89 | .btn {
90 | width: 220px;
91 | height: 60px;
92 | font-family: "Raleway", sans-serif;
93 | text-transform: uppercase;
94 | letter-spacing: 1.2px;
95 | color: white;
96 | }
97 |
98 | .btn:focus {
99 | outline: none;
100 | }
101 |
102 | .btn--big {
103 | padding-top: 10px;
104 | border-radius: 50%;
105 | background-color: white;
106 | border: 10px solid;
107 | width: 100px;
108 | height: 100px;
109 | font-size: 3.2rem;
110 | margin: 0 30px;
111 | transition: all 0.5s;
112 | }
113 |
114 | .btn--big::after{
115 | content: attr(data-type);
116 | font-size: 1rem;
117 | color: #445361;
118 | position: relative;
119 | left: -0.5em;
120 | }
121 |
122 | .btn--blue {
123 | border-color: blue;
124 | color: blue;
125 | }
126 |
127 | .btn--blue:active,
128 | .btn--blue:hover {
129 | background-color: darkblue;
130 | color: white;
131 | }
132 |
133 | .btn--orange {
134 | border-color: orange;
135 | color: orange;
136 | }
137 |
138 | .btn--orange:active,
139 | .btn--orange:hover {
140 | background-color: darkorange;
141 | color: white;
142 | }
143 |
144 | .btn--red {
145 | border-color: red;
146 | color: red;
147 | }
148 |
149 | .btn--red:active,
150 | .btn--red:hover {
151 | background-color: darkred;
152 | color: white;
153 | }
154 |
155 | .btn--green {
156 | border-color: green;
157 | color: green;
158 | }
159 |
160 | .btn--green:active,
161 | .btn--green:hover {
162 | background-color: darkgreen;
163 | color: white;
164 | }
165 |
166 | .btn--gray {
167 | margin-top: 25px;
168 | background-color: #445361;
169 | border: 1px transparent;
170 | border-radius: 20px;
171 | }
172 |
173 | .btn--gray:active,
174 | .btn--gray:hover {
175 | background-color: #0d1013;
176 | }
177 |
178 | /* --------- Media queries */
179 |
180 | @media (max-width: 414px) {
181 | .controls-area {
182 | width: 100%;
183 | }
184 |
185 | .btn--big {
186 | margin: 0 10px;
187 | padding: 5px;
188 | border: 5px solid;
189 | width: 50px;
190 | height: 50px;
191 | font-size: 1.5rem;
192 | }
193 |
194 | .btn--big::after {
195 | font-size: 0.6rem;
196 | left: -0.7rem;
197 | }
198 |
199 | .question-area {
200 | padding: 10% 0;
201 | width: 100%;
202 | }
203 |
204 | .question-area span {
205 | padding: 0;
206 | }
207 |
208 | .answer-message {
209 | display: block;
210 | }
211 |
212 | #answer-box {
213 | display: block;
214 | margin: 0 auto;
215 | }
216 | .btn--gray {
217 | margin-top: 0;
218 | }
219 |
220 | .score-area {
221 | width: 100%;
222 | }
223 |
224 | .scores {
225 | margin: 0.5em auto;
226 | display: block;
227 | padding: 5px;
228 | }
229 |
230 | .heading {
231 | font-size: 2rem;
232 | }
233 | }
234 |
235 | @media (max-width: 320px) {
236 | .game-area {
237 | height: 70vh;
238 | }
239 |
240 | .controls-area {
241 | width: 75%;
242 | margin: 10px auto;
243 | }
244 |
245 | .btn--big {
246 | margin: 10px 10px;
247 | }
248 | .question-area {
249 | padding: 10px 0;
250 | }
251 |
252 | }
--------------------------------------------------------------------------------
/02-adding-some-javascript/01-adding-structure/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/02-adding-some-javascript/01-adding-structure/assets/images/logo.png
--------------------------------------------------------------------------------
/02-adding-some-javascript/01-adding-structure/assets/js/script.js:
--------------------------------------------------------------------------------
1 | function runGame() {
2 |
3 | }
4 |
5 | function checkAnswer() {
6 |
7 | }
8 |
9 | function calculateCorrectAnswer() {
10 |
11 | }
12 |
13 | function incrementScore() {
14 |
15 | }
16 |
17 | function incrementWrongAnswer() {
18 |
19 | }
20 |
21 | function displayAdditionQuestion() {
22 |
23 | }
24 |
25 | function displaySubtractQuestion() {
26 |
27 | }
28 |
29 | function displayMultiplyQuestion() {
30 |
31 | }
--------------------------------------------------------------------------------
/02-adding-some-javascript/01-adding-structure/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/02-adding-some-javascript/02-creating-event-listeners/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* --------- Global style */
2 |
3 | body {
4 | background-color: white;
5 | font-family: "Raleway", sans-serif;
6 | color: #445361;
7 | text-align: center;
8 | }
9 |
10 | /* --------- Heading */
11 |
12 | .heading {
13 | text-align: center;
14 | font-size: 2.5rem;
15 | }
16 |
17 | .logo {
18 | height: 40px;
19 | padding-right: 5px;
20 | }
21 |
22 | /* --------- Game layout */
23 |
24 | .game-area {
25 | background-color: #E6ECF0;
26 | box-sizing: border-box;
27 | width: 85%;
28 | height: 65vh;
29 | max-height: 450px;
30 | max-width: 830px;
31 | margin-left: auto;
32 | margin-right: auto;
33 | padding: 1%;
34 | }
35 |
36 | .question-area {
37 | width: 50%;
38 | font-size: 2rem;
39 | margin: auto;
40 | padding: 50px 0;
41 | }
42 |
43 | .question-area span {
44 | padding: 0 15px;
45 | }
46 |
47 | .score-area {
48 | margin: 5px auto;
49 | width: 60%;
50 | font-size: 1.2rem;
51 | }
52 |
53 | .controls-area {
54 | width: 85%;
55 | margin: 30px auto;
56 | }
57 |
58 | #score {
59 | color: green;
60 | font-weight: bold;
61 | }
62 |
63 | #incorrect {
64 | color: red;
65 | font-weight: bold;
66 | }
67 |
68 | .answer-message {
69 | display: none;
70 | font-size: 1rem;
71 | }
72 |
73 | #answer-box {
74 | border: none;
75 | color: #445361;
76 | display: inline-block;
77 | height: 40px;
78 | width: 80px;
79 | font-size: 1.2rem;
80 | }
81 |
82 | .scores {
83 | display: inline-block;
84 | padding: 25px;
85 | }
86 |
87 | /* --------- Buttons */
88 |
89 | .btn {
90 | width: 220px;
91 | height: 60px;
92 | font-family: "Raleway", sans-serif;
93 | text-transform: uppercase;
94 | letter-spacing: 1.2px;
95 | color: white;
96 | }
97 |
98 | .btn:focus {
99 | outline: none;
100 | }
101 |
102 | .btn--big {
103 | padding-top: 10px;
104 | border-radius: 50%;
105 | background-color: white;
106 | border: 10px solid;
107 | width: 100px;
108 | height: 100px;
109 | font-size: 3.2rem;
110 | margin: 0 30px;
111 | transition: all 0.5s;
112 | }
113 |
114 | .btn--big::after{
115 | content: attr(data-type);
116 | font-size: 1rem;
117 | color: #445361;
118 | position: relative;
119 | left: -0.5em;
120 | }
121 |
122 | .btn--blue {
123 | border-color: blue;
124 | color: blue;
125 | }
126 |
127 | .btn--blue:active,
128 | .btn--blue:hover {
129 | background-color: darkblue;
130 | color: white;
131 | }
132 |
133 | .btn--orange {
134 | border-color: orange;
135 | color: orange;
136 | }
137 |
138 | .btn--orange:active,
139 | .btn--orange:hover {
140 | background-color: darkorange;
141 | color: white;
142 | }
143 |
144 | .btn--red {
145 | border-color: red;
146 | color: red;
147 | }
148 |
149 | .btn--red:active,
150 | .btn--red:hover {
151 | background-color: darkred;
152 | color: white;
153 | }
154 |
155 | .btn--green {
156 | border-color: green;
157 | color: green;
158 | }
159 |
160 | .btn--green:active,
161 | .btn--green:hover {
162 | background-color: darkgreen;
163 | color: white;
164 | }
165 |
166 | .btn--gray {
167 | margin-top: 25px;
168 | background-color: #445361;
169 | border: 1px transparent;
170 | border-radius: 20px;
171 | }
172 |
173 | .btn--gray:active,
174 | .btn--gray:hover {
175 | background-color: #0d1013;
176 | }
177 |
178 | /* --------- Media queries */
179 |
180 | @media (max-width: 414px) {
181 | .controls-area {
182 | width: 100%;
183 | }
184 |
185 | .btn--big {
186 | margin: 0 10px;
187 | padding: 5px;
188 | border: 5px solid;
189 | width: 50px;
190 | height: 50px;
191 | font-size: 1.5rem;
192 | }
193 |
194 | .btn--big::after {
195 | font-size: 0.6rem;
196 | left: -0.7rem;
197 | }
198 |
199 | .question-area {
200 | padding: 10% 0;
201 | width: 100%;
202 | }
203 |
204 | .question-area span {
205 | padding: 0;
206 | }
207 |
208 | .answer-message {
209 | display: block;
210 | }
211 |
212 | #answer-box {
213 | display: block;
214 | margin: 0 auto;
215 | }
216 | .btn--gray {
217 | margin-top: 0;
218 | }
219 |
220 | .score-area {
221 | width: 100%;
222 | }
223 |
224 | .scores {
225 | margin: 0.5em auto;
226 | display: block;
227 | padding: 5px;
228 | }
229 |
230 | .heading {
231 | font-size: 2rem;
232 | }
233 | }
234 |
235 | @media (max-width: 320px) {
236 | .game-area {
237 | height: 70vh;
238 | }
239 |
240 | .controls-area {
241 | width: 75%;
242 | margin: 10px auto;
243 | }
244 |
245 | .btn--big {
246 | margin: 10px 10px;
247 | }
248 | .question-area {
249 | padding: 10px 0;
250 | }
251 |
252 | }
--------------------------------------------------------------------------------
/02-adding-some-javascript/02-creating-event-listeners/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/02-adding-some-javascript/02-creating-event-listeners/assets/images/logo.png
--------------------------------------------------------------------------------
/02-adding-some-javascript/02-creating-event-listeners/assets/js/script.js:
--------------------------------------------------------------------------------
1 | // Wait for the DOM to finish loading before running the game
2 | // Get the button elements and add event listeners to them
3 |
4 | document.addEventListener("DOMContentLoaded", function() {
5 | let buttons = document.getElementsByTagName("button");
6 |
7 | for (let button of buttons) {
8 | button.addEventListener("click", function() {
9 | if (this.getAttribute("data-type") === "submit") {
10 | alert("You clicked Submit!");
11 | } else {
12 | let gameType = this.getAttribute("data-type");
13 | alert(`You clicked ${gameType}`);
14 | }
15 | });
16 | }
17 | });
18 |
19 | function runGame() {
20 |
21 | }
22 |
23 | function checkAnswer() {
24 |
25 | }
26 |
27 | function calculateCorrectAnswer() {
28 |
29 | }
30 |
31 | function incrementScore() {
32 |
33 | }
34 |
35 | function incrementWrongAnswer() {
36 |
37 | }
38 |
39 | function displayAdditionQuestion() {
40 |
41 | }
42 |
43 | function displaySubtractQuestion() {
44 |
45 | }
46 |
47 | function displayMultiplyQuestion() {
48 |
49 | }
--------------------------------------------------------------------------------
/02-adding-some-javascript/02-creating-event-listeners/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/02-adding-some-javascript/03-generating-random-numbers/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* --------- Global style */
2 |
3 | body {
4 | background-color: white;
5 | font-family: "Raleway", sans-serif;
6 | color: #445361;
7 | text-align: center;
8 | }
9 |
10 | /* --------- Heading */
11 |
12 | .heading {
13 | text-align: center;
14 | font-size: 2.5rem;
15 | }
16 |
17 | .logo {
18 | height: 40px;
19 | padding-right: 5px;
20 | }
21 |
22 | /* --------- Game layout */
23 |
24 | .game-area {
25 | background-color: #E6ECF0;
26 | box-sizing: border-box;
27 | width: 85%;
28 | height: 65vh;
29 | max-height: 450px;
30 | max-width: 830px;
31 | margin-left: auto;
32 | margin-right: auto;
33 | padding: 1%;
34 | }
35 |
36 | .question-area {
37 | width: 50%;
38 | font-size: 2rem;
39 | margin: auto;
40 | padding: 50px 0;
41 | }
42 |
43 | .question-area span {
44 | padding: 0 15px;
45 | }
46 |
47 | .score-area {
48 | margin: 5px auto;
49 | width: 60%;
50 | font-size: 1.2rem;
51 | }
52 |
53 | .controls-area {
54 | width: 85%;
55 | margin: 30px auto;
56 | }
57 |
58 | #score {
59 | color: green;
60 | font-weight: bold;
61 | }
62 |
63 | #incorrect {
64 | color: red;
65 | font-weight: bold;
66 | }
67 |
68 | .answer-message {
69 | display: none;
70 | font-size: 1rem;
71 | }
72 |
73 | #answer-box {
74 | border: none;
75 | color: #445361;
76 | display: inline-block;
77 | height: 40px;
78 | width: 80px;
79 | font-size: 1.2rem;
80 | }
81 |
82 | .scores {
83 | display: inline-block;
84 | padding: 25px;
85 | }
86 |
87 | /* --------- Buttons */
88 |
89 | .btn {
90 | width: 220px;
91 | height: 60px;
92 | font-family: "Raleway", sans-serif;
93 | text-transform: uppercase;
94 | letter-spacing: 1.2px;
95 | color: white;
96 | }
97 |
98 | .btn:focus {
99 | outline: none;
100 | }
101 |
102 | .btn--big {
103 | padding-top: 10px;
104 | border-radius: 50%;
105 | background-color: white;
106 | border: 10px solid;
107 | width: 100px;
108 | height: 100px;
109 | font-size: 3.2rem;
110 | margin: 0 30px;
111 | transition: all 0.5s;
112 | }
113 |
114 | .btn--big::after{
115 | content: attr(data-type);
116 | font-size: 1rem;
117 | color: #445361;
118 | position: relative;
119 | left: -0.5em;
120 | }
121 |
122 | .btn--blue {
123 | border-color: blue;
124 | color: blue;
125 | }
126 |
127 | .btn--blue:active,
128 | .btn--blue:hover {
129 | background-color: darkblue;
130 | color: white;
131 | }
132 |
133 | .btn--orange {
134 | border-color: orange;
135 | color: orange;
136 | }
137 |
138 | .btn--orange:active,
139 | .btn--orange:hover {
140 | background-color: darkorange;
141 | color: white;
142 | }
143 |
144 | .btn--red {
145 | border-color: red;
146 | color: red;
147 | }
148 |
149 | .btn--red:active,
150 | .btn--red:hover {
151 | background-color: darkred;
152 | color: white;
153 | }
154 |
155 | .btn--green {
156 | border-color: green;
157 | color: green;
158 | }
159 |
160 | .btn--green:active,
161 | .btn--green:hover {
162 | background-color: darkgreen;
163 | color: white;
164 | }
165 |
166 | .btn--gray {
167 | margin-top: 25px;
168 | background-color: #445361;
169 | border: 1px transparent;
170 | border-radius: 20px;
171 | }
172 |
173 | .btn--gray:active,
174 | .btn--gray:hover {
175 | background-color: #0d1013;
176 | }
177 |
178 | /* --------- Media queries */
179 |
180 | @media (max-width: 414px) {
181 | .controls-area {
182 | width: 100%;
183 | }
184 |
185 | .btn--big {
186 | margin: 0 10px;
187 | padding: 5px;
188 | border: 5px solid;
189 | width: 50px;
190 | height: 50px;
191 | font-size: 1.5rem;
192 | }
193 |
194 | .btn--big::after {
195 | font-size: 0.6rem;
196 | left: -0.7rem;
197 | }
198 |
199 | .question-area {
200 | padding: 10% 0;
201 | width: 100%;
202 | }
203 |
204 | .question-area span {
205 | padding: 0;
206 | }
207 |
208 | .answer-message {
209 | display: block;
210 | }
211 |
212 | #answer-box {
213 | display: block;
214 | margin: 0 auto;
215 | }
216 | .btn--gray {
217 | margin-top: 0;
218 | }
219 |
220 | .score-area {
221 | width: 100%;
222 | }
223 |
224 | .scores {
225 | margin: 0.5em auto;
226 | display: block;
227 | padding: 5px;
228 | }
229 |
230 | .heading {
231 | font-size: 2rem;
232 | }
233 | }
234 |
235 | @media (max-width: 320px) {
236 | .game-area {
237 | height: 70vh;
238 | }
239 |
240 | .controls-area {
241 | width: 75%;
242 | margin: 10px auto;
243 | }
244 |
245 | .btn--big {
246 | margin: 10px 10px;
247 | }
248 | .question-area {
249 | padding: 10px 0;
250 | }
251 |
252 | }
--------------------------------------------------------------------------------
/02-adding-some-javascript/03-generating-random-numbers/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/02-adding-some-javascript/03-generating-random-numbers/assets/images/logo.png
--------------------------------------------------------------------------------
/02-adding-some-javascript/03-generating-random-numbers/assets/js/script.js:
--------------------------------------------------------------------------------
1 | // Wait for the DOM to finish loading before running the game
2 | // Get the button elements and add event listeners to them
3 |
4 | document.addEventListener("DOMContentLoaded", function() {
5 | let buttons = document.getElementsByTagName("button");
6 |
7 | for (let button of buttons) {
8 | button.addEventListener("click", function() {
9 | if (this.getAttribute("data-type") === "submit") {
10 | alert("You clicked Submit!");
11 | } else {
12 | let gameType = this.getAttribute("data-type");
13 | alert(`You clicked ${gameType}`);
14 | }
15 | });
16 | }
17 |
18 | });
19 |
20 | /**
21 | * The main game "loop", called when the script is first loaded
22 | * and after the user's answer has been processed
23 | */
24 | function runGame() {
25 |
26 | // Creates two random numbers between 1 and 25
27 | let num1 = Math.floor(Math.random() * 25) + 1;
28 | let num2 = Math.floor(Math.random() * 25) + 1;
29 |
30 | }
31 |
32 | function checkAnswer() {
33 |
34 | }
35 |
36 | function calculateCorrectAnswer() {
37 |
38 | }
39 |
40 | function incrementScore() {
41 |
42 | }
43 |
44 | function incrementWrongAnswer() {
45 |
46 | }
47 |
48 | function displayAdditionQuestion(operand1, operand2) {
49 |
50 | }
51 |
52 | function displaySubtractQuestion() {
53 |
54 | }
55 |
56 | function displayMultiplyQuestion() {
57 |
58 | }
--------------------------------------------------------------------------------
/02-adding-some-javascript/03-generating-random-numbers/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/01-displaying-the-addition-question/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* --------- Global style */
2 |
3 | body {
4 | background-color: white;
5 | font-family: "Raleway", sans-serif;
6 | color: #445361;
7 | text-align: center;
8 | }
9 |
10 | /* --------- Heading */
11 |
12 | .heading {
13 | text-align: center;
14 | font-size: 2.5rem;
15 | }
16 |
17 | .logo {
18 | height: 40px;
19 | padding-right: 5px;
20 | }
21 |
22 | /* --------- Game layout */
23 |
24 | .game-area {
25 | background-color: #E6ECF0;
26 | box-sizing: border-box;
27 | width: 85%;
28 | height: 65vh;
29 | max-height: 450px;
30 | max-width: 830px;
31 | margin-left: auto;
32 | margin-right: auto;
33 | padding: 1%;
34 | }
35 |
36 | .question-area {
37 | width: 50%;
38 | font-size: 2rem;
39 | margin: auto;
40 | padding: 50px 0;
41 | }
42 |
43 | .question-area span {
44 | padding: 0 15px;
45 | }
46 |
47 | .score-area {
48 | margin: 5px auto;
49 | width: 60%;
50 | font-size: 1.2rem;
51 | }
52 |
53 | .controls-area {
54 | width: 85%;
55 | margin: 30px auto;
56 | }
57 |
58 | #score {
59 | color: green;
60 | font-weight: bold;
61 | }
62 |
63 | #incorrect {
64 | color: red;
65 | font-weight: bold;
66 | }
67 |
68 | .answer-message {
69 | display: none;
70 | font-size: 1rem;
71 | }
72 |
73 | #answer-box {
74 | border: none;
75 | color: #445361;
76 | display: inline-block;
77 | height: 40px;
78 | width: 80px;
79 | font-size: 1.2rem;
80 | }
81 |
82 | .scores {
83 | display: inline-block;
84 | padding: 25px;
85 | }
86 |
87 | /* --------- Buttons */
88 |
89 | .btn {
90 | width: 220px;
91 | height: 60px;
92 | font-family: "Raleway", sans-serif;
93 | text-transform: uppercase;
94 | letter-spacing: 1.2px;
95 | color: white;
96 | }
97 |
98 | .btn:focus {
99 | outline: none;
100 | }
101 |
102 | .btn--big {
103 | padding-top: 10px;
104 | border-radius: 50%;
105 | background-color: white;
106 | border: 10px solid;
107 | width: 100px;
108 | height: 100px;
109 | font-size: 3.2rem;
110 | margin: 0 30px;
111 | transition: all 0.5s;
112 | }
113 |
114 | .btn--big::after{
115 | content: attr(data-type);
116 | font-size: 1rem;
117 | color: #445361;
118 | position: relative;
119 | left: -0.5em;
120 | }
121 |
122 | .btn--blue {
123 | border-color: blue;
124 | color: blue;
125 | }
126 |
127 | .btn--blue:active,
128 | .btn--blue:hover {
129 | background-color: darkblue;
130 | color: white;
131 | }
132 |
133 | .btn--orange {
134 | border-color: orange;
135 | color: orange;
136 | }
137 |
138 | .btn--orange:active,
139 | .btn--orange:hover {
140 | background-color: darkorange;
141 | color: white;
142 | }
143 |
144 | .btn--red {
145 | border-color: red;
146 | color: red;
147 | }
148 |
149 | .btn--red:active,
150 | .btn--red:hover {
151 | background-color: darkred;
152 | color: white;
153 | }
154 |
155 | .btn--green {
156 | border-color: green;
157 | color: green;
158 | }
159 |
160 | .btn--green:active,
161 | .btn--green:hover {
162 | background-color: darkgreen;
163 | color: white;
164 | }
165 |
166 | .btn--gray {
167 | margin-top: 25px;
168 | background-color: #445361;
169 | border: 1px transparent;
170 | border-radius: 20px;
171 | }
172 |
173 | .btn--gray:active,
174 | .btn--gray:hover {
175 | background-color: #0d1013;
176 | }
177 |
178 | /* --------- Media queries */
179 |
180 | @media (max-width: 414px) {
181 | .controls-area {
182 | width: 100%;
183 | }
184 |
185 | .btn--big {
186 | margin: 0 10px;
187 | padding: 5px;
188 | border: 5px solid;
189 | width: 50px;
190 | height: 50px;
191 | font-size: 1.5rem;
192 | }
193 |
194 | .btn--big::after {
195 | font-size: 0.6rem;
196 | left: -0.7rem;
197 | }
198 |
199 | .question-area {
200 | padding: 10% 0;
201 | width: 100%;
202 | }
203 |
204 | .question-area span {
205 | padding: 0;
206 | }
207 |
208 | .answer-message {
209 | display: block;
210 | }
211 |
212 | #answer-box {
213 | display: block;
214 | margin: 0 auto;
215 | }
216 | .btn--gray {
217 | margin-top: 0;
218 | }
219 |
220 | .score-area {
221 | width: 100%;
222 | }
223 |
224 | .scores {
225 | margin: 0.5em auto;
226 | display: block;
227 | padding: 5px;
228 | }
229 |
230 | .heading {
231 | font-size: 2rem;
232 | }
233 | }
234 |
235 | @media (max-width: 320px) {
236 | .game-area {
237 | height: 70vh;
238 | }
239 |
240 | .controls-area {
241 | width: 75%;
242 | margin: 10px auto;
243 | }
244 |
245 | .btn--big {
246 | margin: 10px 10px;
247 | }
248 | .question-area {
249 | padding: 10px 0;
250 | }
251 |
252 | }
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/01-displaying-the-addition-question/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/03-displaying-the-question-and-answer/01-displaying-the-addition-question/assets/images/logo.png
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/01-displaying-the-addition-question/assets/js/script.js:
--------------------------------------------------------------------------------
1 | // Wait for the DOM to finish loading before running the game
2 | // Get the button elements and add event listeners to them
3 |
4 | document.addEventListener("DOMContentLoaded", function() {
5 | let buttons = document.getElementsByTagName("button");
6 |
7 | for (let button of buttons) {
8 | button.addEventListener("click", function() {
9 | if (this.getAttribute("data-type") === "submit") {
10 | alert("You clicked Submit!");
11 | } else {
12 | let gameType = this.getAttribute("data-type");
13 | runGame(gameType);
14 | }
15 | });
16 | }
17 |
18 | runGame("addition");
19 |
20 | });
21 |
22 | /**
23 | * The main game "loop", called when the script is first loaded
24 | * and after the user's answer has been processed
25 | */
26 | function runGame(gameType) {
27 |
28 | // Creates two random numbers between 1 and 25
29 | let num1 = Math.floor(Math.random() * 25) + 1;
30 | let num2 = Math.floor(Math.random() * 25) + 1;
31 |
32 | if (gameType === "addition") {
33 | displayAdditionQuestion(num1, num2);
34 | } else {
35 | alert(`Unknown game type: ${gameType}`);
36 | throw `Unknown game type: ${gameType}. Aborting!`;
37 | }
38 |
39 | }
40 |
41 | function checkAnswer() {
42 |
43 | }
44 |
45 | function calculateCorrectAnswer() {
46 |
47 | }
48 |
49 | function incrementScore() {
50 |
51 | }
52 |
53 | function incrementWrongAnswer() {
54 |
55 | }
56 |
57 | function displayAdditionQuestion(operand1, operand2) {
58 |
59 | document.getElementById('operand1').textContent = operand1;
60 | document.getElementById('operand2').textContent = operand2;
61 | document.getElementById('operator').textContent = "+";
62 |
63 | }
64 |
65 | function displaySubtractQuestion() {
66 |
67 | }
68 |
69 | function displayMultiplyQuestion() {
70 |
71 | }
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/01-displaying-the-addition-question/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/02-calculating-the-answer/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* --------- Global style */
2 |
3 | body {
4 | background-color: white;
5 | font-family: "Raleway", sans-serif;
6 | color: #445361;
7 | text-align: center;
8 | }
9 |
10 | /* --------- Heading */
11 |
12 | .heading {
13 | text-align: center;
14 | font-size: 2.5rem;
15 | }
16 |
17 | .logo {
18 | height: 40px;
19 | padding-right: 5px;
20 | }
21 |
22 | /* --------- Game layout */
23 |
24 | .game-area {
25 | background-color: #E6ECF0;
26 | box-sizing: border-box;
27 | width: 85%;
28 | height: 65vh;
29 | max-height: 450px;
30 | max-width: 830px;
31 | margin-left: auto;
32 | margin-right: auto;
33 | padding: 1%;
34 | }
35 |
36 | .question-area {
37 | width: 50%;
38 | font-size: 2rem;
39 | margin: auto;
40 | padding: 50px 0;
41 | }
42 |
43 | .question-area span {
44 | padding: 0 15px;
45 | }
46 |
47 | .score-area {
48 | margin: 5px auto;
49 | width: 60%;
50 | font-size: 1.2rem;
51 | }
52 |
53 | .controls-area {
54 | width: 85%;
55 | margin: 30px auto;
56 | }
57 |
58 | #score {
59 | color: green;
60 | font-weight: bold;
61 | }
62 |
63 | #incorrect {
64 | color: red;
65 | font-weight: bold;
66 | }
67 |
68 | .answer-message {
69 | display: none;
70 | font-size: 1rem;
71 | }
72 |
73 | #answer-box {
74 | border: none;
75 | color: #445361;
76 | display: inline-block;
77 | height: 40px;
78 | width: 80px;
79 | font-size: 1.2rem;
80 | }
81 |
82 | .scores {
83 | display: inline-block;
84 | padding: 25px;
85 | }
86 |
87 | /* --------- Buttons */
88 |
89 | .btn {
90 | width: 220px;
91 | height: 60px;
92 | font-family: "Raleway", sans-serif;
93 | text-transform: uppercase;
94 | letter-spacing: 1.2px;
95 | color: white;
96 | }
97 |
98 | .btn:focus {
99 | outline: none;
100 | }
101 |
102 | .btn--big {
103 | padding-top: 10px;
104 | border-radius: 50%;
105 | background-color: white;
106 | border: 10px solid;
107 | width: 100px;
108 | height: 100px;
109 | font-size: 3.2rem;
110 | margin: 0 30px;
111 | transition: all 0.5s;
112 | }
113 |
114 | .btn--big::after{
115 | content: attr(data-type);
116 | font-size: 1rem;
117 | color: #445361;
118 | position: relative;
119 | left: -0.5em;
120 | }
121 |
122 | .btn--blue {
123 | border-color: blue;
124 | color: blue;
125 | }
126 |
127 | .btn--blue:active,
128 | .btn--blue:hover {
129 | background-color: darkblue;
130 | color: white;
131 | }
132 |
133 | .btn--orange {
134 | border-color: orange;
135 | color: orange;
136 | }
137 |
138 | .btn--orange:active,
139 | .btn--orange:hover {
140 | background-color: darkorange;
141 | color: white;
142 | }
143 |
144 | .btn--red {
145 | border-color: red;
146 | color: red;
147 | }
148 |
149 | .btn--red:active,
150 | .btn--red:hover {
151 | background-color: darkred;
152 | color: white;
153 | }
154 |
155 | .btn--green {
156 | border-color: green;
157 | color: green;
158 | }
159 |
160 | .btn--green:active,
161 | .btn--green:hover {
162 | background-color: darkgreen;
163 | color: white;
164 | }
165 |
166 | .btn--gray {
167 | margin-top: 25px;
168 | background-color: #445361;
169 | border: 1px transparent;
170 | border-radius: 20px;
171 | }
172 |
173 | .btn--gray:active,
174 | .btn--gray:hover {
175 | background-color: #0d1013;
176 | }
177 |
178 | /* --------- Media queries */
179 |
180 | @media (max-width: 414px) {
181 | .controls-area {
182 | width: 100%;
183 | }
184 |
185 | .btn--big {
186 | margin: 0 10px;
187 | padding: 5px;
188 | border: 5px solid;
189 | width: 50px;
190 | height: 50px;
191 | font-size: 1.5rem;
192 | }
193 |
194 | .btn--big::after {
195 | font-size: 0.6rem;
196 | left: -0.7rem;
197 | }
198 |
199 | .question-area {
200 | padding: 10% 0;
201 | width: 100%;
202 | }
203 |
204 | .question-area span {
205 | padding: 0;
206 | }
207 |
208 | .answer-message {
209 | display: block;
210 | }
211 |
212 | #answer-box {
213 | display: block;
214 | margin: 0 auto;
215 | }
216 | .btn--gray {
217 | margin-top: 0;
218 | }
219 |
220 | .score-area {
221 | width: 100%;
222 | }
223 |
224 | .scores {
225 | margin: 0.5em auto;
226 | display: block;
227 | padding: 5px;
228 | }
229 |
230 | .heading {
231 | font-size: 2rem;
232 | }
233 | }
234 |
235 | @media (max-width: 320px) {
236 | .game-area {
237 | height: 70vh;
238 | }
239 |
240 | .controls-area {
241 | width: 75%;
242 | margin: 10px auto;
243 | }
244 |
245 | .btn--big {
246 | margin: 10px 10px;
247 | }
248 | .question-area {
249 | padding: 10px 0;
250 | }
251 |
252 | }
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/02-calculating-the-answer/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/03-displaying-the-question-and-answer/02-calculating-the-answer/assets/images/logo.png
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/02-calculating-the-answer/assets/js/script.js:
--------------------------------------------------------------------------------
1 | // Wait for the DOM to finish loading before running the game
2 | // Get the button elements and add event listeners to them
3 |
4 | document.addEventListener("DOMContentLoaded", function() {
5 | let buttons = document.getElementsByTagName("button");
6 |
7 | for (let button of buttons) {
8 | button.addEventListener("click", function() {
9 | if (this.getAttribute("data-type") === "submit") {
10 | alert("You clicked Submit!");
11 | } else {
12 | let gameType = this.getAttribute("data-type");
13 | runGame(gameType);
14 | }
15 | });
16 | }
17 |
18 | runGame("addition");
19 |
20 | });
21 |
22 | /**
23 | * The main game "loop", called when the script is first loaded
24 | * and after the user's answer has been processed
25 | */
26 | function runGame(gameType) {
27 |
28 | // Creates two random numbers between 1 and 25
29 | let num1 = Math.floor(Math.random() * 25) + 1;
30 | let num2 = Math.floor(Math.random() * 25) + 1;
31 |
32 | if (gameType === "addition") {
33 | displayAdditionQuestion(num1, num2);
34 | } else {
35 | alert(`Unknown game type: ${gameType}`);
36 | throw `Unknown game type: ${gameType}. Aborting!`;
37 | }
38 |
39 | }
40 |
41 | function checkAnswer() {
42 |
43 | }
44 |
45 | /**
46 | * Gets the operands (the numbers) and the operator (plus, minus etc)
47 | * directly from the dom, and returns the correct answer.
48 | */
49 | function calculateCorrectAnswer() {
50 |
51 | let operand1 = parseInt(document.getElementById('operand1').innerText);
52 | let operand2 = parseInt(document.getElementById('operand2').innerText);
53 | let operator = document.getElementById("operator").innerText;
54 |
55 | if (operator === "+") {
56 | return [operand1 + operand2, "addition"];
57 | } else {
58 | alert(`Unimplemented operator ${operator}`);
59 | throw `Unimplemented operator ${operator}. Aborting!`;
60 | }
61 |
62 | }
63 |
64 | function incrementScore() {
65 |
66 | }
67 |
68 | function incrementWrongAnswer() {
69 |
70 | }
71 |
72 | function displayAdditionQuestion(operand1, operand2) {
73 |
74 | document.getElementById('operand1').textContent = operand1;
75 | document.getElementById('operand2').textContent = operand2;
76 | document.getElementById('operator').textContent = "+";
77 |
78 | }
79 |
80 | function displaySubtractQuestion() {
81 |
82 | }
83 |
84 | function displayMultiplyQuestion() {
85 |
86 | }
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/02-calculating-the-answer/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/03-checking-the-answer/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* --------- Global style */
2 |
3 | body {
4 | background-color: white;
5 | font-family: "Raleway", sans-serif;
6 | color: #445361;
7 | text-align: center;
8 | }
9 |
10 | /* --------- Heading */
11 |
12 | .heading {
13 | text-align: center;
14 | font-size: 2.5rem;
15 | }
16 |
17 | .logo {
18 | height: 40px;
19 | padding-right: 5px;
20 | }
21 |
22 | /* --------- Game layout */
23 |
24 | .game-area {
25 | background-color: #E6ECF0;
26 | box-sizing: border-box;
27 | width: 85%;
28 | height: 65vh;
29 | max-height: 450px;
30 | max-width: 830px;
31 | margin-left: auto;
32 | margin-right: auto;
33 | padding: 1%;
34 | }
35 |
36 | .question-area {
37 | width: 50%;
38 | font-size: 2rem;
39 | margin: auto;
40 | padding: 50px 0;
41 | }
42 |
43 | .question-area span {
44 | padding: 0 15px;
45 | }
46 |
47 | .score-area {
48 | margin: 5px auto;
49 | width: 60%;
50 | font-size: 1.2rem;
51 | }
52 |
53 | .controls-area {
54 | width: 85%;
55 | margin: 30px auto;
56 | }
57 |
58 | #score {
59 | color: green;
60 | font-weight: bold;
61 | }
62 |
63 | #incorrect {
64 | color: red;
65 | font-weight: bold;
66 | }
67 |
68 | .answer-message {
69 | display: none;
70 | font-size: 1rem;
71 | }
72 |
73 | #answer-box {
74 | border: none;
75 | color: #445361;
76 | display: inline-block;
77 | height: 40px;
78 | width: 80px;
79 | font-size: 1.2rem;
80 | }
81 |
82 | .scores {
83 | display: inline-block;
84 | padding: 25px;
85 | }
86 |
87 | /* --------- Buttons */
88 |
89 | .btn {
90 | width: 220px;
91 | height: 60px;
92 | font-family: "Raleway", sans-serif;
93 | text-transform: uppercase;
94 | letter-spacing: 1.2px;
95 | color: white;
96 | }
97 |
98 | .btn:focus {
99 | outline: none;
100 | }
101 |
102 | .btn--big {
103 | padding-top: 10px;
104 | border-radius: 50%;
105 | background-color: white;
106 | border: 10px solid;
107 | width: 100px;
108 | height: 100px;
109 | font-size: 3.2rem;
110 | margin: 0 30px;
111 | transition: all 0.5s;
112 | }
113 |
114 | .btn--big::after{
115 | content: attr(data-type);
116 | font-size: 1rem;
117 | color: #445361;
118 | position: relative;
119 | left: -0.5em;
120 | }
121 |
122 | .btn--blue {
123 | border-color: blue;
124 | color: blue;
125 | }
126 |
127 | .btn--blue:active,
128 | .btn--blue:hover {
129 | background-color: darkblue;
130 | color: white;
131 | }
132 |
133 | .btn--orange {
134 | border-color: orange;
135 | color: orange;
136 | }
137 |
138 | .btn--orange:active,
139 | .btn--orange:hover {
140 | background-color: darkorange;
141 | color: white;
142 | }
143 |
144 | .btn--red {
145 | border-color: red;
146 | color: red;
147 | }
148 |
149 | .btn--red:active,
150 | .btn--red:hover {
151 | background-color: darkred;
152 | color: white;
153 | }
154 |
155 | .btn--green {
156 | border-color: green;
157 | color: green;
158 | }
159 |
160 | .btn--green:active,
161 | .btn--green:hover {
162 | background-color: darkgreen;
163 | color: white;
164 | }
165 |
166 | .btn--gray {
167 | margin-top: 25px;
168 | background-color: #445361;
169 | border: 1px transparent;
170 | border-radius: 20px;
171 | }
172 |
173 | .btn--gray:active,
174 | .btn--gray:hover {
175 | background-color: #0d1013;
176 | }
177 |
178 | /* --------- Media queries */
179 |
180 | @media (max-width: 414px) {
181 | .controls-area {
182 | width: 100%;
183 | }
184 |
185 | .btn--big {
186 | margin: 0 10px;
187 | padding: 5px;
188 | border: 5px solid;
189 | width: 50px;
190 | height: 50px;
191 | font-size: 1.5rem;
192 | }
193 |
194 | .btn--big::after {
195 | font-size: 0.6rem;
196 | left: -0.7rem;
197 | }
198 |
199 | .question-area {
200 | padding: 10% 0;
201 | width: 100%;
202 | }
203 |
204 | .question-area span {
205 | padding: 0;
206 | }
207 |
208 | .answer-message {
209 | display: block;
210 | }
211 |
212 | #answer-box {
213 | display: block;
214 | margin: 0 auto;
215 | }
216 | .btn--gray {
217 | margin-top: 0;
218 | }
219 |
220 | .score-area {
221 | width: 100%;
222 | }
223 |
224 | .scores {
225 | margin: 0.5em auto;
226 | display: block;
227 | padding: 5px;
228 | }
229 |
230 | .heading {
231 | font-size: 2rem;
232 | }
233 | }
234 |
235 | @media (max-width: 320px) {
236 | .game-area {
237 | height: 70vh;
238 | }
239 |
240 | .controls-area {
241 | width: 75%;
242 | margin: 10px auto;
243 | }
244 |
245 | .btn--big {
246 | margin: 10px 10px;
247 | }
248 | .question-area {
249 | padding: 10px 0;
250 | }
251 |
252 | }
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/03-checking-the-answer/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/03-displaying-the-question-and-answer/03-checking-the-answer/assets/images/logo.png
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/03-checking-the-answer/assets/js/script.js:
--------------------------------------------------------------------------------
1 | // Wait for the DOM to finish loading before running the game
2 | // Get the button elements and add event listeners to them
3 |
4 | document.addEventListener("DOMContentLoaded", function() {
5 | let buttons = document.getElementsByTagName("button");
6 |
7 | for (let button of buttons) {
8 | button.addEventListener("click", function() {
9 | if (this.getAttribute("data-type") === "submit") {
10 | checkAnswer();
11 | } else {
12 | let gameType = this.getAttribute("data-type");
13 | runGame(gameType);
14 | }
15 | });
16 | }
17 |
18 | runGame("addition");
19 |
20 | });
21 |
22 | /**
23 | * The main game "loop", called when the script is first loaded
24 | * and after the user's answer has been processed
25 | */
26 | function runGame(gameType) {
27 |
28 | // Creates two random numbers between 1 and 25
29 | let num1 = Math.floor(Math.random() * 25) + 1;
30 | let num2 = Math.floor(Math.random() * 25) + 1;
31 |
32 | if (gameType === "addition") {
33 | displayAdditionQuestion(num1, num2);
34 | } else {
35 | alert(`Unknown game type: ${gameType}`);
36 | throw `Unknown game type: ${gameType}. Aborting!`;
37 | }
38 |
39 | }
40 |
41 | /**
42 | * Checks the answer agaist the first element in
43 | * the returned calculateCorrectAnswer array
44 | */
45 | function checkAnswer() {
46 |
47 | let userAnswer = parseInt(document.getElementById("answer-box").value);
48 | let calculatedAnswer = calculateCorrectAnswer();
49 | let isCorrect = userAnswer === calculatedAnswer[0];
50 |
51 | if (isCorrect) {
52 | alert("Hey! You got it right! :D");
53 | } else {
54 | alert(`Awwww.... you answered ${userAnswer}. The correct answer was ${calculatedAnswer[0]}!`);
55 | }
56 |
57 | runGame(calculatedAnswer[1]);
58 |
59 | }
60 |
61 | /**
62 | * Gets the operands (the numbers) and the operator (plus, minus etc)
63 | * directly from the dom, and returns the correct answer.
64 | */
65 | function calculateCorrectAnswer() {
66 |
67 | let operand1 = parseInt(document.getElementById('operand1').innerText);
68 | let operand2 = parseInt(document.getElementById('operand2').innerText);
69 | let operator = document.getElementById("operator").innerText;
70 |
71 | if (operator === "+") {
72 | return [operand1 + operand2, "addition"];
73 | } else {
74 | alert(`Unimplemented operator ${operator}`);
75 | throw `Unimplemented operator ${operator}. Aborting!`;
76 | }
77 |
78 | }
79 |
80 | function incrementScore() {
81 |
82 | }
83 |
84 | function incrementWrongAnswer() {
85 |
86 | }
87 |
88 | function displayAdditionQuestion(operand1, operand2) {
89 |
90 | document.getElementById('operand1').textContent = operand1;
91 | document.getElementById('operand2').textContent = operand2;
92 | document.getElementById('operator').textContent = "+";
93 |
94 | }
95 |
96 | function displaySubtractQuestion() {
97 |
98 | }
99 |
100 | function displayMultiplyQuestion() {
101 |
102 | }
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/03-checking-the-answer/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/04-updating-the-scores/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* --------- Global style */
2 |
3 | body {
4 | background-color: white;
5 | font-family: "Raleway", sans-serif;
6 | color: #445361;
7 | text-align: center;
8 | }
9 |
10 | /* --------- Heading */
11 |
12 | .heading {
13 | text-align: center;
14 | font-size: 2.5rem;
15 | }
16 |
17 | .logo {
18 | height: 40px;
19 | padding-right: 5px;
20 | }
21 |
22 | /* --------- Game layout */
23 |
24 | .game-area {
25 | background-color: #E6ECF0;
26 | box-sizing: border-box;
27 | width: 85%;
28 | height: 65vh;
29 | max-height: 450px;
30 | max-width: 830px;
31 | margin-left: auto;
32 | margin-right: auto;
33 | padding: 1%;
34 | }
35 |
36 | .question-area {
37 | width: 50%;
38 | font-size: 2rem;
39 | margin: auto;
40 | padding: 50px 0;
41 | }
42 |
43 | .question-area span {
44 | padding: 0 15px;
45 | }
46 |
47 | .score-area {
48 | margin: 5px auto;
49 | width: 60%;
50 | font-size: 1.2rem;
51 | }
52 |
53 | .controls-area {
54 | width: 85%;
55 | margin: 30px auto;
56 | }
57 |
58 | #score {
59 | color: green;
60 | font-weight: bold;
61 | }
62 |
63 | #incorrect {
64 | color: red;
65 | font-weight: bold;
66 | }
67 |
68 | .answer-message {
69 | display: none;
70 | font-size: 1rem;
71 | }
72 |
73 | #answer-box {
74 | border: none;
75 | color: #445361;
76 | display: inline-block;
77 | height: 40px;
78 | width: 80px;
79 | font-size: 1.2rem;
80 | }
81 |
82 | .scores {
83 | display: inline-block;
84 | padding: 25px;
85 | }
86 |
87 | /* --------- Buttons */
88 |
89 | .btn {
90 | width: 220px;
91 | height: 60px;
92 | font-family: "Raleway", sans-serif;
93 | text-transform: uppercase;
94 | letter-spacing: 1.2px;
95 | color: white;
96 | }
97 |
98 | .btn:focus {
99 | outline: none;
100 | }
101 |
102 | .btn--big {
103 | padding-top: 10px;
104 | border-radius: 50%;
105 | background-color: white;
106 | border: 10px solid;
107 | width: 100px;
108 | height: 100px;
109 | font-size: 3.2rem;
110 | margin: 0 30px;
111 | transition: all 0.5s;
112 | }
113 |
114 | .btn--big::after{
115 | content: attr(data-type);
116 | font-size: 1rem;
117 | color: #445361;
118 | position: relative;
119 | left: -0.5em;
120 | }
121 |
122 | .btn--blue {
123 | border-color: blue;
124 | color: blue;
125 | }
126 |
127 | .btn--blue:active,
128 | .btn--blue:hover {
129 | background-color: darkblue;
130 | color: white;
131 | }
132 |
133 | .btn--orange {
134 | border-color: orange;
135 | color: orange;
136 | }
137 |
138 | .btn--orange:active,
139 | .btn--orange:hover {
140 | background-color: darkorange;
141 | color: white;
142 | }
143 |
144 | .btn--red {
145 | border-color: red;
146 | color: red;
147 | }
148 |
149 | .btn--red:active,
150 | .btn--red:hover {
151 | background-color: darkred;
152 | color: white;
153 | }
154 |
155 | .btn--green {
156 | border-color: green;
157 | color: green;
158 | }
159 |
160 | .btn--green:active,
161 | .btn--green:hover {
162 | background-color: darkgreen;
163 | color: white;
164 | }
165 |
166 | .btn--gray {
167 | margin-top: 25px;
168 | background-color: #445361;
169 | border: 1px transparent;
170 | border-radius: 20px;
171 | }
172 |
173 | .btn--gray:active,
174 | .btn--gray:hover {
175 | background-color: #0d1013;
176 | }
177 |
178 | /* --------- Media queries */
179 |
180 | @media (max-width: 414px) {
181 | .controls-area {
182 | width: 100%;
183 | }
184 |
185 | .btn--big {
186 | margin: 0 10px;
187 | padding: 5px;
188 | border: 5px solid;
189 | width: 50px;
190 | height: 50px;
191 | font-size: 1.5rem;
192 | }
193 |
194 | .btn--big::after {
195 | font-size: 0.6rem;
196 | left: -0.7rem;
197 | }
198 |
199 | .question-area {
200 | padding: 10% 0;
201 | width: 100%;
202 | }
203 |
204 | .question-area span {
205 | padding: 0;
206 | }
207 |
208 | .answer-message {
209 | display: block;
210 | }
211 |
212 | #answer-box {
213 | display: block;
214 | margin: 0 auto;
215 | }
216 | .btn--gray {
217 | margin-top: 0;
218 | }
219 |
220 | .score-area {
221 | width: 100%;
222 | }
223 |
224 | .scores {
225 | margin: 0.5em auto;
226 | display: block;
227 | padding: 5px;
228 | }
229 |
230 | .heading {
231 | font-size: 2rem;
232 | }
233 | }
234 |
235 | @media (max-width: 320px) {
236 | .game-area {
237 | height: 70vh;
238 | }
239 |
240 | .controls-area {
241 | width: 75%;
242 | margin: 10px auto;
243 | }
244 |
245 | .btn--big {
246 | margin: 10px 10px;
247 | }
248 | .question-area {
249 | padding: 10px 0;
250 | }
251 |
252 | }
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/04-updating-the-scores/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/03-displaying-the-question-and-answer/04-updating-the-scores/assets/images/logo.png
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/04-updating-the-scores/assets/js/script.js:
--------------------------------------------------------------------------------
1 | // Wait for the DOM to finish loading before running the game
2 | // Get the button elements and add event listeners to them
3 |
4 | document.addEventListener("DOMContentLoaded", function() {
5 | let buttons = document.getElementsByTagName("button");
6 |
7 | for (let button of buttons) {
8 | button.addEventListener("click", function() {
9 | if (this.getAttribute("data-type") === "submit") {
10 | checkAnswer();
11 | } else {
12 | let gameType = this.getAttribute("data-type");
13 | runGame(gameType);
14 | }
15 | });
16 | }
17 |
18 | runGame("addition");
19 |
20 | });
21 |
22 | /**
23 | * The main game "loop", called when the script is first loaded
24 | * and after the user's answer has been processed
25 | */
26 | function runGame(gameType) {
27 |
28 | // Creates two random numbers between 1 and 25
29 | let num1 = Math.floor(Math.random() * 25) + 1;
30 | let num2 = Math.floor(Math.random() * 25) + 1;
31 |
32 | if (gameType === "addition") {
33 | displayAdditionQuestion(num1, num2);
34 | } else {
35 | alert(`Unknown game type: ${gameType}`);
36 | throw `Unknown game type: ${gameType}. Aborting!`;
37 | }
38 |
39 | }
40 |
41 | /**
42 | * Checks the answer against the first element in
43 | * the returned calculateCorrectAnswer array
44 | */
45 | function checkAnswer() {
46 |
47 | let userAnswer = parseInt(document.getElementById("answer-box").value);
48 | let calculatedAnswer = calculateCorrectAnswer();
49 | let isCorrect = userAnswer === calculatedAnswer[0];
50 |
51 | if (isCorrect) {
52 | alert("Hey! You got it right! :D");
53 | incrementScore();
54 | } else {
55 | alert(`Awwww.... you answered ${userAnswer}. The correct answer was ${calculatedAnswer[0]}!`);
56 | incrementWrongAnswer();
57 | }
58 |
59 | runGame(calculatedAnswer[1]);
60 |
61 | }
62 |
63 | /**
64 | * Gets the operands (the numbers) and the operator (plus, minus etc)
65 | * directly from the dom, and returns the correct answer.
66 | */
67 | function calculateCorrectAnswer() {
68 |
69 | let operand1 = parseInt(document.getElementById('operand1').innerText);
70 | let operand2 = parseInt(document.getElementById('operand2').innerText);
71 | let operator = document.getElementById("operator").innerText;
72 |
73 | if (operator === "+") {
74 | return [operand1 + operand2, "addition"];
75 | } else {
76 | alert(`Unimplemented operator ${operator}`);
77 | throw `Unimplemented operator ${operator}. Aborting!`;
78 | }
79 |
80 | }
81 |
82 | /**
83 | * Gets the current score from the DOM and increments it by 1
84 | */
85 | function incrementScore() {
86 |
87 | let oldScore = parseInt(document.getElementById("score").innerText);
88 | document.getElementById("score").innerText = ++oldScore;
89 |
90 | }
91 |
92 | /**
93 | * Gets the current tally of incorrect answers from the DOM and increments it by 1
94 | */
95 | function incrementWrongAnswer() {
96 |
97 | let oldScore = parseInt(document.getElementById("incorrect").innerText);
98 | document.getElementById("incorrect").innerText = ++oldScore;
99 |
100 | }
101 |
102 | function displayAdditionQuestion(operand1, operand2) {
103 |
104 | document.getElementById('operand1').textContent = operand1;
105 | document.getElementById('operand2').textContent = operand2;
106 | document.getElementById('operator').textContent = "+";
107 |
108 | }
109 |
110 | function displaySubtractQuestion() {
111 |
112 | }
113 |
114 | function displayMultiplyQuestion() {
115 |
116 | }
--------------------------------------------------------------------------------
/03-displaying-the-question-and-answer/04-updating-the-scores/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/04-multiplication-and-subtraction-questions/01-the-multiplication-game/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* --------- Global style */
2 |
3 | body {
4 | background-color: white;
5 | font-family: "Raleway", sans-serif;
6 | color: #445361;
7 | text-align: center;
8 | }
9 |
10 | /* --------- Heading */
11 |
12 | .heading {
13 | text-align: center;
14 | font-size: 2.5rem;
15 | }
16 |
17 | .logo {
18 | height: 40px;
19 | padding-right: 5px;
20 | }
21 |
22 | /* --------- Game layout */
23 |
24 | .game-area {
25 | background-color: #E6ECF0;
26 | box-sizing: border-box;
27 | width: 85%;
28 | height: 65vh;
29 | max-height: 450px;
30 | max-width: 830px;
31 | margin-left: auto;
32 | margin-right: auto;
33 | padding: 1%;
34 | }
35 |
36 | .question-area {
37 | width: 50%;
38 | font-size: 2rem;
39 | margin: auto;
40 | padding: 50px 0;
41 | }
42 |
43 | .question-area span {
44 | padding: 0 15px;
45 | }
46 |
47 | .score-area {
48 | margin: 5px auto;
49 | width: 60%;
50 | font-size: 1.2rem;
51 | }
52 |
53 | .controls-area {
54 | width: 85%;
55 | margin: 30px auto;
56 | }
57 |
58 | #score {
59 | color: green;
60 | font-weight: bold;
61 | }
62 |
63 | #incorrect {
64 | color: red;
65 | font-weight: bold;
66 | }
67 |
68 | .answer-message {
69 | display: none;
70 | font-size: 1rem;
71 | }
72 |
73 | #answer-box {
74 | border: none;
75 | color: #445361;
76 | display: inline-block;
77 | height: 40px;
78 | width: 80px;
79 | font-size: 1.2rem;
80 | }
81 |
82 | .scores {
83 | display: inline-block;
84 | padding: 25px;
85 | }
86 |
87 | /* --------- Buttons */
88 |
89 | .btn {
90 | width: 220px;
91 | height: 60px;
92 | font-family: "Raleway", sans-serif;
93 | text-transform: uppercase;
94 | letter-spacing: 1.2px;
95 | color: white;
96 | }
97 |
98 | .btn:focus {
99 | outline: none;
100 | }
101 |
102 | .btn--big {
103 | padding-top: 10px;
104 | border-radius: 50%;
105 | background-color: white;
106 | border: 10px solid;
107 | width: 100px;
108 | height: 100px;
109 | font-size: 3.2rem;
110 | margin: 0 30px;
111 | transition: all 0.5s;
112 | }
113 |
114 | .btn--big::after{
115 | content: attr(data-type);
116 | font-size: 1rem;
117 | color: #445361;
118 | position: relative;
119 | left: -0.5em;
120 | }
121 |
122 | .btn--blue {
123 | border-color: blue;
124 | color: blue;
125 | }
126 |
127 | .btn--blue:active,
128 | .btn--blue:hover {
129 | background-color: darkblue;
130 | color: white;
131 | }
132 |
133 | .btn--orange {
134 | border-color: orange;
135 | color: orange;
136 | }
137 |
138 | .btn--orange:active,
139 | .btn--orange:hover {
140 | background-color: darkorange;
141 | color: white;
142 | }
143 |
144 | .btn--red {
145 | border-color: red;
146 | color: red;
147 | }
148 |
149 | .btn--red:active,
150 | .btn--red:hover {
151 | background-color: darkred;
152 | color: white;
153 | }
154 |
155 | .btn--green {
156 | border-color: green;
157 | color: green;
158 | }
159 |
160 | .btn--green:active,
161 | .btn--green:hover {
162 | background-color: darkgreen;
163 | color: white;
164 | }
165 |
166 | .btn--gray {
167 | margin-top: 25px;
168 | background-color: #445361;
169 | border: 1px transparent;
170 | border-radius: 20px;
171 | }
172 |
173 | .btn--gray:active,
174 | .btn--gray:hover {
175 | background-color: #0d1013;
176 | }
177 |
178 | /* --------- Media queries */
179 |
180 | @media (max-width: 414px) {
181 | .controls-area {
182 | width: 100%;
183 | }
184 |
185 | .btn--big {
186 | margin: 0 10px;
187 | padding: 5px;
188 | border: 5px solid;
189 | width: 50px;
190 | height: 50px;
191 | font-size: 1.5rem;
192 | }
193 |
194 | .btn--big::after {
195 | font-size: 0.6rem;
196 | left: -0.7rem;
197 | }
198 |
199 | .question-area {
200 | padding: 10% 0;
201 | width: 100%;
202 | }
203 |
204 | .question-area span {
205 | padding: 0;
206 | }
207 |
208 | .answer-message {
209 | display: block;
210 | }
211 |
212 | #answer-box {
213 | display: block;
214 | margin: 0 auto;
215 | }
216 | .btn--gray {
217 | margin-top: 0;
218 | }
219 |
220 | .score-area {
221 | width: 100%;
222 | }
223 |
224 | .scores {
225 | margin: 0.5em auto;
226 | display: block;
227 | padding: 5px;
228 | }
229 |
230 | .heading {
231 | font-size: 2rem;
232 | }
233 | }
234 |
235 | @media (max-width: 320px) {
236 | .game-area {
237 | height: 70vh;
238 | }
239 |
240 | .controls-area {
241 | width: 75%;
242 | margin: 10px auto;
243 | }
244 |
245 | .btn--big {
246 | margin: 10px 10px;
247 | }
248 | .question-area {
249 | padding: 10px 0;
250 | }
251 |
252 | }
--------------------------------------------------------------------------------
/04-multiplication-and-subtraction-questions/01-the-multiplication-game/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/04-multiplication-and-subtraction-questions/01-the-multiplication-game/assets/images/logo.png
--------------------------------------------------------------------------------
/04-multiplication-and-subtraction-questions/01-the-multiplication-game/assets/js/script.js:
--------------------------------------------------------------------------------
1 | // Wait for the DOM to finish loading before running the game
2 | // Get the button elements and add event listeners to them
3 |
4 | document.addEventListener("DOMContentLoaded", function() {
5 | let buttons = document.getElementsByTagName("button");
6 |
7 | for (let button of buttons) {
8 | button.addEventListener("click", function() {
9 | if (this.getAttribute("data-type") === "submit") {
10 | checkAnswer();
11 | } else {
12 | let gameType = this.getAttribute("data-type");
13 | runGame(gameType);
14 | }
15 | });
16 | }
17 |
18 | runGame("addition");
19 |
20 | });
21 |
22 | /**
23 | * The main game "loop", called when the script is first loaded
24 | * and after the user's answer has been processed
25 | */
26 | function runGame(gameType) {
27 |
28 | // Creates two random numbers between 1 and 25
29 | let num1 = Math.floor(Math.random() * 25) + 1;
30 | let num2 = Math.floor(Math.random() * 25) + 1;
31 |
32 | if (gameType === "addition") {
33 | displayAdditionQuestion(num1, num2);
34 | } else if (gameType === "multiply") {
35 | displayMultiplyQuestion(num1, num2);
36 | } else {
37 | alert(`Unknown game type: ${gameType}`);
38 | throw `Unknown game type: ${gameType}. Aborting!`;
39 | }
40 |
41 | }
42 |
43 | /**
44 | * Checks the answer against the first element in
45 | * the returned calculateCorrectAnswer array
46 | */
47 | function checkAnswer() {
48 |
49 | let userAnswer = parseInt(document.getElementById("answer-box").value);
50 | let calculatedAnswer = calculateCorrectAnswer();
51 | let isCorrect = userAnswer === calculatedAnswer[0];
52 |
53 | if (isCorrect) {
54 | alert("Hey! You got it right! :D");
55 | incrementScore();
56 | } else {
57 | alert(`Awwww.... you answered ${userAnswer}. The correct answer was ${calculatedAnswer[0]}!`);
58 | incrementWrongAnswer();
59 | }
60 |
61 | runGame(calculatedAnswer[1]);
62 |
63 | }
64 |
65 | /**
66 | * Gets the operands (the numbers) and the operator (plus, minus etc)
67 | * directly from the dom, and returns the correct answer.
68 | */
69 | function calculateCorrectAnswer() {
70 |
71 | let operand1 = parseInt(document.getElementById('operand1').innerText);
72 | let operand2 = parseInt(document.getElementById('operand2').innerText);
73 | let operator = document.getElementById("operator").innerText;
74 |
75 | if (operator === "+") {
76 | return [operand1 + operand2, "addition"];
77 | } else if (operator === "x") {
78 | return [operand1 * operand2, "multiply"];
79 | } else {
80 | alert(`Unimplemented operator ${operator}`);
81 | throw `Unimplemented operator ${operator}. Aborting!`;
82 | }
83 |
84 | }
85 |
86 | /**
87 | * Gets the current score from the DOM and increments it by 1
88 | */
89 | function incrementScore() {
90 |
91 | let oldScore = parseInt(document.getElementById("score").innerText);
92 | document.getElementById("score").innerText = ++oldScore;
93 |
94 | }
95 |
96 | /**
97 | * Gets the current tally of incorrect answers from the DOM and increments it by 1
98 | */
99 | function incrementWrongAnswer() {
100 |
101 | let oldScore = parseInt(document.getElementById("incorrect").innerText);
102 | document.getElementById("incorrect").innerText = ++oldScore;
103 |
104 | }
105 |
106 | function displayAdditionQuestion(operand1, operand2) {
107 |
108 | document.getElementById('operand1').textContent = operand1;
109 | document.getElementById('operand2').textContent = operand2;
110 | document.getElementById('operator').textContent = "+";
111 |
112 | }
113 |
114 | function displaySubtractQuestion() {
115 |
116 | }
117 |
118 | function displayMultiplyQuestion(operand1, operand2) {
119 |
120 | document.getElementById('operand1').textContent = operand1;
121 | document.getElementById('operand2').textContent = operand2;
122 | document.getElementById('operator').textContent = "x";
123 |
124 | }
--------------------------------------------------------------------------------
/04-multiplication-and-subtraction-questions/01-the-multiplication-game/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/04-multiplication-and-subtraction-questions/02-the-subtraction-game/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* --------- Global style */
2 |
3 | body {
4 | background-color: white;
5 | font-family: "Raleway", sans-serif;
6 | color: #445361;
7 | text-align: center;
8 | }
9 |
10 | /* --------- Heading */
11 |
12 | .heading {
13 | text-align: center;
14 | font-size: 2.5rem;
15 | }
16 |
17 | .logo {
18 | height: 40px;
19 | padding-right: 5px;
20 | }
21 |
22 | /* --------- Game layout */
23 |
24 | .game-area {
25 | background-color: #E6ECF0;
26 | box-sizing: border-box;
27 | width: 85%;
28 | height: 65vh;
29 | max-height: 450px;
30 | max-width: 830px;
31 | margin-left: auto;
32 | margin-right: auto;
33 | padding: 1%;
34 | }
35 |
36 | .question-area {
37 | width: 50%;
38 | font-size: 2rem;
39 | margin: auto;
40 | padding: 50px 0;
41 | }
42 |
43 | .question-area span {
44 | padding: 0 15px;
45 | }
46 |
47 | .score-area {
48 | margin: 5px auto;
49 | width: 60%;
50 | font-size: 1.2rem;
51 | }
52 |
53 | .controls-area {
54 | width: 85%;
55 | margin: 30px auto;
56 | }
57 |
58 | #score {
59 | color: green;
60 | font-weight: bold;
61 | }
62 |
63 | #incorrect {
64 | color: red;
65 | font-weight: bold;
66 | }
67 |
68 | .answer-message {
69 | display: none;
70 | font-size: 1rem;
71 | }
72 |
73 | #answer-box {
74 | border: none;
75 | color: #445361;
76 | display: inline-block;
77 | height: 40px;
78 | width: 80px;
79 | font-size: 1.2rem;
80 | }
81 |
82 | .scores {
83 | display: inline-block;
84 | padding: 25px;
85 | }
86 |
87 | /* --------- Buttons */
88 |
89 | .btn {
90 | width: 220px;
91 | height: 60px;
92 | font-family: "Raleway", sans-serif;
93 | text-transform: uppercase;
94 | letter-spacing: 1.2px;
95 | color: white;
96 | }
97 |
98 | .btn:focus {
99 | outline: none;
100 | }
101 |
102 | .btn--big {
103 | padding-top: 10px;
104 | border-radius: 50%;
105 | background-color: white;
106 | border: 10px solid;
107 | width: 100px;
108 | height: 100px;
109 | font-size: 3.2rem;
110 | margin: 0 30px;
111 | transition: all 0.5s;
112 | }
113 |
114 | .btn--big::after{
115 | content: attr(data-type);
116 | font-size: 1rem;
117 | color: #445361;
118 | position: relative;
119 | left: -0.5em;
120 | }
121 |
122 | .btn--blue {
123 | border-color: blue;
124 | color: blue;
125 | }
126 |
127 | .btn--blue:active,
128 | .btn--blue:hover {
129 | background-color: darkblue;
130 | color: white;
131 | }
132 |
133 | .btn--orange {
134 | border-color: orange;
135 | color: orange;
136 | }
137 |
138 | .btn--orange:active,
139 | .btn--orange:hover {
140 | background-color: darkorange;
141 | color: white;
142 | }
143 |
144 | .btn--red {
145 | border-color: red;
146 | color: red;
147 | }
148 |
149 | .btn--red:active,
150 | .btn--red:hover {
151 | background-color: darkred;
152 | color: white;
153 | }
154 |
155 | .btn--green {
156 | border-color: green;
157 | color: green;
158 | }
159 |
160 | .btn--green:active,
161 | .btn--green:hover {
162 | background-color: darkgreen;
163 | color: white;
164 | }
165 |
166 | .btn--gray {
167 | margin-top: 25px;
168 | background-color: #445361;
169 | border: 1px transparent;
170 | border-radius: 20px;
171 | }
172 |
173 | .btn--gray:active,
174 | .btn--gray:hover {
175 | background-color: #0d1013;
176 | }
177 |
178 | /* --------- Media queries */
179 |
180 | @media (max-width: 414px) {
181 | .controls-area {
182 | width: 100%;
183 | }
184 |
185 | .btn--big {
186 | margin: 0 10px;
187 | padding: 5px;
188 | border: 5px solid;
189 | width: 50px;
190 | height: 50px;
191 | font-size: 1.5rem;
192 | }
193 |
194 | .btn--big::after {
195 | font-size: 0.6rem;
196 | left: -0.7rem;
197 | }
198 |
199 | .question-area {
200 | padding: 10% 0;
201 | width: 100%;
202 | }
203 |
204 | .question-area span {
205 | padding: 0;
206 | }
207 |
208 | .answer-message {
209 | display: block;
210 | }
211 |
212 | #answer-box {
213 | display: block;
214 | margin: 0 auto;
215 | }
216 | .btn--gray {
217 | margin-top: 0;
218 | }
219 |
220 | .score-area {
221 | width: 100%;
222 | }
223 |
224 | .scores {
225 | margin: 0.5em auto;
226 | display: block;
227 | padding: 5px;
228 | }
229 |
230 | .heading {
231 | font-size: 2rem;
232 | }
233 | }
234 |
235 | @media (max-width: 320px) {
236 | .game-area {
237 | height: 70vh;
238 | }
239 |
240 | .controls-area {
241 | width: 75%;
242 | margin: 10px auto;
243 | }
244 |
245 | .btn--big {
246 | margin: 10px 10px;
247 | }
248 | .question-area {
249 | padding: 10px 0;
250 | }
251 |
252 | }
--------------------------------------------------------------------------------
/04-multiplication-and-subtraction-questions/02-the-subtraction-game/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/04-multiplication-and-subtraction-questions/02-the-subtraction-game/assets/images/logo.png
--------------------------------------------------------------------------------
/04-multiplication-and-subtraction-questions/02-the-subtraction-game/assets/js/script.js:
--------------------------------------------------------------------------------
1 | // Wait for the DOM to finish loading before running the game
2 | // Get the button elements and add event listeners to them
3 |
4 | document.addEventListener("DOMContentLoaded", function() {
5 | let buttons = document.getElementsByTagName("button");
6 |
7 | for (let button of buttons) {
8 | button.addEventListener("click", function() {
9 | if (this.getAttribute("data-type") === "submit") {
10 | checkAnswer();
11 | } else {
12 | let gameType = this.getAttribute("data-type");
13 | runGame(gameType);
14 | }
15 | });
16 | }
17 |
18 | runGame("addition");
19 |
20 | });
21 |
22 | /**
23 | * The main game "loop", called when the script is first loaded
24 | * and after the user's answer has been processed
25 | */
26 | function runGame(gameType) {
27 |
28 | // Creates two random numbers between 1 and 25
29 | let num1 = Math.floor(Math.random() * 25) + 1;
30 | let num2 = Math.floor(Math.random() * 25) + 1;
31 |
32 | if (gameType === "addition") {
33 | displayAdditionQuestion(num1, num2);
34 | } else if (gameType === "multiply") {
35 | displayMultiplyQuestion(num1, num2);
36 | } else if (gameType === "subtract" ) {
37 | displaySubtractQuestion(num1, num2);
38 | } else {
39 | alert(`Unknown game type: ${gameType}`);
40 | throw `Unknown game type: ${gameType}. Aborting!`;
41 | }
42 |
43 | }
44 |
45 | /**
46 | * Checks the answer against the first element in
47 | * the returned calculateCorrectAnswer array
48 | */
49 | function checkAnswer() {
50 |
51 | let userAnswer = parseInt(document.getElementById("answer-box").value);
52 | let calculatedAnswer = calculateCorrectAnswer();
53 | let isCorrect = userAnswer === calculatedAnswer[0];
54 |
55 | if (isCorrect) {
56 | alert("Hey! You got it right! :D");
57 | incrementScore();
58 | } else {
59 | alert(`Awwww.... you answered ${userAnswer}. The correct answer was ${calculatedAnswer[0]}!`);
60 | incrementWrongAnswer();
61 | }
62 |
63 | runGame(calculatedAnswer[1]);
64 |
65 | }
66 |
67 | /**
68 | * Gets the operands (the numbers) and the operator (plus, minus etc)
69 | * directly from the dom, and returns the correct answer.
70 | */
71 | function calculateCorrectAnswer() {
72 |
73 | let operand1 = parseInt(document.getElementById('operand1').innerText);
74 | let operand2 = parseInt(document.getElementById('operand2').innerText);
75 | let operator = document.getElementById("operator").innerText;
76 |
77 | if (operator === "+") {
78 | return [operand1 + operand2, "addition"];
79 | } else if (operator === "x") {
80 | return [operand1 * operand2, "multiply"];
81 | } else if (operator === "-") {
82 | return [operand1 - operand2, "subtract"];
83 | } else {
84 | alert(`Unimplemented operator ${operator}`);
85 | throw `Unimplemented operator ${operator}. Aborting!`;
86 | }
87 |
88 | }
89 |
90 | /**
91 | * Gets the current score from the DOM and increments it by 1
92 | */
93 | function incrementScore() {
94 |
95 | let oldScore = parseInt(document.getElementById("score").innerText);
96 | document.getElementById("score").innerText = ++oldScore;
97 |
98 | }
99 |
100 | /**
101 | * Gets the current tally of incorrect answers from the DOM and increments it by 1
102 | */
103 | function incrementWrongAnswer() {
104 |
105 | let oldScore = parseInt(document.getElementById("incorrect").innerText);
106 | document.getElementById("incorrect").innerText = ++oldScore;
107 |
108 | }
109 |
110 | function displayAdditionQuestion(operand1, operand2) {
111 |
112 | document.getElementById('operand1').textContent = operand1;
113 | document.getElementById('operand2').textContent = operand2;
114 | document.getElementById('operator').textContent = "+";
115 |
116 | }
117 |
118 | function displaySubtractQuestion(operand1, operand2) {
119 |
120 | document.getElementById("operand1").textContent = operand1 > operand2 ? operand1 : operand2;
121 | document.getElementById("operand2").textContent = operand1 > operand2 ? operand2 : operand1;
122 | document.getElementById('operator').textContent = "-";
123 |
124 | }
125 |
126 | function displayMultiplyQuestion(operand1, operand2) {
127 |
128 | document.getElementById('operand1').textContent = operand1;
129 | document.getElementById('operand2').textContent = operand2;
130 | document.getElementById('operator').textContent = "x";
131 |
132 | }
--------------------------------------------------------------------------------
/04-multiplication-and-subtraction-questions/02-the-subtraction-game/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/05-tidying-up/01-a-few-last-things/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* --------- Global style */
2 |
3 | body {
4 | background-color: white;
5 | font-family: "Raleway", sans-serif;
6 | color: #445361;
7 | text-align: center;
8 | }
9 |
10 | /* --------- Heading */
11 |
12 | .heading {
13 | text-align: center;
14 | font-size: 2.5rem;
15 | }
16 |
17 | .logo {
18 | height: 40px;
19 | padding-right: 5px;
20 | }
21 |
22 | /* --------- Game layout */
23 |
24 | .game-area {
25 | background-color: #E6ECF0;
26 | box-sizing: border-box;
27 | width: 85%;
28 | height: 65vh;
29 | max-height: 450px;
30 | max-width: 830px;
31 | margin-left: auto;
32 | margin-right: auto;
33 | padding: 1%;
34 | }
35 |
36 | .question-area {
37 | width: 50%;
38 | font-size: 2rem;
39 | margin: auto;
40 | padding: 50px 0;
41 | }
42 |
43 | .question-area span {
44 | padding: 0 15px;
45 | }
46 |
47 | .score-area {
48 | margin: 5px auto;
49 | width: 60%;
50 | font-size: 1.2rem;
51 | }
52 |
53 | .controls-area {
54 | width: 85%;
55 | margin: 30px auto;
56 | }
57 |
58 | #score {
59 | color: green;
60 | font-weight: bold;
61 | }
62 |
63 | #incorrect {
64 | color: red;
65 | font-weight: bold;
66 | }
67 |
68 | .answer-message {
69 | display: none;
70 | font-size: 1rem;
71 | }
72 |
73 | #answer-box {
74 | border: none;
75 | color: #445361;
76 | display: inline-block;
77 | height: 40px;
78 | width: 80px;
79 | font-size: 1.2rem;
80 | }
81 |
82 | .scores {
83 | display: inline-block;
84 | padding: 25px;
85 | }
86 |
87 | /* --------- Buttons */
88 |
89 | .btn {
90 | width: 220px;
91 | height: 60px;
92 | font-family: "Raleway", sans-serif;
93 | text-transform: uppercase;
94 | letter-spacing: 1.2px;
95 | color: white;
96 | }
97 |
98 | .btn:focus {
99 | outline: none;
100 | }
101 |
102 | .btn--big {
103 | padding-top: 10px;
104 | border-radius: 50%;
105 | background-color: white;
106 | border: 10px solid;
107 | width: 100px;
108 | height: 100px;
109 | font-size: 3.2rem;
110 | margin: 0 30px;
111 | transition: all 0.5s;
112 | }
113 |
114 | .btn--big::after{
115 | content: attr(data-type);
116 | font-size: 1rem;
117 | color: #445361;
118 | position: relative;
119 | left: -0.5em;
120 | }
121 |
122 | .btn--blue {
123 | border-color: blue;
124 | color: blue;
125 | }
126 |
127 | .btn--blue:active,
128 | .btn--blue:hover {
129 | background-color: darkblue;
130 | color: white;
131 | }
132 |
133 | .btn--orange {
134 | border-color: orange;
135 | color: orange;
136 | }
137 |
138 | .btn--orange:active,
139 | .btn--orange:hover {
140 | background-color: darkorange;
141 | color: white;
142 | }
143 |
144 | .btn--red {
145 | border-color: red;
146 | color: red;
147 | }
148 |
149 | .btn--red:active,
150 | .btn--red:hover {
151 | background-color: darkred;
152 | color: white;
153 | }
154 |
155 | .btn--green {
156 | border-color: green;
157 | color: green;
158 | }
159 |
160 | .btn--green:active,
161 | .btn--green:hover {
162 | background-color: darkgreen;
163 | color: white;
164 | }
165 |
166 | .btn--gray {
167 | margin-top: 25px;
168 | background-color: #445361;
169 | border: 1px transparent;
170 | border-radius: 20px;
171 | }
172 |
173 | .btn--gray:active,
174 | .btn--gray:hover {
175 | background-color: #0d1013;
176 | }
177 |
178 | /* --------- Media queries */
179 |
180 | @media (max-width: 414px) {
181 | .controls-area {
182 | width: 100%;
183 | }
184 |
185 | .btn--big {
186 | margin: 0 10px;
187 | padding: 5px;
188 | border: 5px solid;
189 | width: 50px;
190 | height: 50px;
191 | font-size: 1.5rem;
192 | }
193 |
194 | .btn--big::after {
195 | font-size: 0.6rem;
196 | left: -0.7rem;
197 | }
198 |
199 | .question-area {
200 | padding: 10% 0;
201 | width: 100%;
202 | }
203 |
204 | .question-area span {
205 | padding: 0;
206 | }
207 |
208 | .answer-message {
209 | display: block;
210 | }
211 |
212 | #answer-box {
213 | display: block;
214 | margin: 0 auto;
215 | }
216 | .btn--gray {
217 | margin-top: 0;
218 | }
219 |
220 | .score-area {
221 | width: 100%;
222 | }
223 |
224 | .scores {
225 | margin: 0.5em auto;
226 | display: block;
227 | padding: 5px;
228 | }
229 |
230 | .heading {
231 | font-size: 2rem;
232 | }
233 | }
234 |
235 | @media (max-width: 320px) {
236 | .game-area {
237 | height: 70vh;
238 | }
239 |
240 | .controls-area {
241 | width: 75%;
242 | margin: 10px auto;
243 | }
244 |
245 | .btn--big {
246 | margin: 10px 10px;
247 | }
248 | .question-area {
249 | padding: 10px 0;
250 | }
251 |
252 | }
--------------------------------------------------------------------------------
/05-tidying-up/01-a-few-last-things/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/05-tidying-up/01-a-few-last-things/assets/images/logo.png
--------------------------------------------------------------------------------
/05-tidying-up/01-a-few-last-things/assets/js/script.js:
--------------------------------------------------------------------------------
1 | // Wait for the DOM to finish loading before running the game
2 | // Get the button elements and add event listeners to them
3 |
4 | document.addEventListener("DOMContentLoaded", function() {
5 | let buttons = document.getElementsByTagName("button");
6 |
7 | for (let button of buttons) {
8 | button.addEventListener("click", function() {
9 | if (this.getAttribute("data-type") === "submit") {
10 | checkAnswer();
11 | } else {
12 | let gameType = this.getAttribute("data-type");
13 | runGame(gameType);
14 | }
15 | });
16 | }
17 |
18 | document.getElementById("answer-box").addEventListener("keydown", function(event) {
19 | if (event.key === "Enter") {
20 | checkAnswer();
21 | }
22 | });
23 |
24 | runGame("addition");
25 |
26 | });
27 |
28 | /**
29 | * The main game "loop", called when the script is first loaded
30 | * and after the user's answer has been processed
31 | */
32 | function runGame(gameType) {
33 |
34 | document.getElementById("answer-box").value = "";
35 | document.getElementById("answer-box").focus();
36 |
37 | // Creates two random numbers between 1 and 25
38 | let num1 = Math.floor(Math.random() * 25) + 1;
39 | let num2 = Math.floor(Math.random() * 25) + 1;
40 |
41 | if (gameType === "addition") {
42 | displayAdditionQuestion(num1, num2);
43 | } else if (gameType === "multiply") {
44 | displayMultiplyQuestion(num1, num2);
45 | } else if (gameType === "subtract" ) {
46 | displaySubtractQuestion(num1, num2);
47 | } else {
48 | alert(`Unknown game type: ${gameType}`);
49 | throw `Unknown game type: ${gameType}. Aborting!`;
50 | }
51 |
52 | }
53 |
54 | /**
55 | * Checks the answer against the first element in
56 | * the returned calculateCorrectAnswer array
57 | */
58 | function checkAnswer() {
59 |
60 | let userAnswer = parseInt(document.getElementById("answer-box").value);
61 | let calculatedAnswer = calculateCorrectAnswer();
62 | let isCorrect = userAnswer === calculatedAnswer[0];
63 |
64 | if (isCorrect) {
65 | alert("Hey! You got it right! :D");
66 | incrementScore();
67 | } else {
68 | alert(`Awwww.... you answered ${userAnswer}. The correct answer was ${calculatedAnswer[0]}!`);
69 | incrementWrongAnswer();
70 | }
71 |
72 | runGame(calculatedAnswer[1]);
73 |
74 | }
75 |
76 | /**
77 | * Gets the operands (the numbers) and the operator (plus, minus etc)
78 | * directly from the dom, and returns the correct answer.
79 | */
80 | function calculateCorrectAnswer() {
81 |
82 | let operand1 = parseInt(document.getElementById('operand1').innerText);
83 | let operand2 = parseInt(document.getElementById('operand2').innerText);
84 | let operator = document.getElementById("operator").innerText;
85 |
86 | if (operator === "+") {
87 | return [operand1 + operand2, "addition"];
88 | } else if (operator === "x") {
89 | return [operand1 * operand2, "multiply"];
90 | } else if (operator === "-") {
91 | return [operand1 - operand2, "subtract"];
92 | } else {
93 | alert(`Unimplemented operator ${operator}`);
94 | throw `Unimplemented operator ${operator}. Aborting!`;
95 | }
96 |
97 | }
98 |
99 | /**
100 | * Gets the current score from the DOM and increments it by 1
101 | */
102 | function incrementScore() {
103 |
104 | let oldScore = parseInt(document.getElementById("score").innerText);
105 | document.getElementById("score").innerText = ++oldScore;
106 |
107 | }
108 |
109 | /**
110 | * Gets the current tally of incorrect answers from the DOM and increments it by 1
111 | */
112 | function incrementWrongAnswer() {
113 |
114 | let oldScore = parseInt(document.getElementById("incorrect").innerText);
115 | document.getElementById("incorrect").innerText = ++oldScore;
116 |
117 | }
118 |
119 | function displayAdditionQuestion(operand1, operand2) {
120 |
121 | document.getElementById('operand1').textContent = operand1;
122 | document.getElementById('operand2').textContent = operand2;
123 | document.getElementById('operator').textContent = "+";
124 |
125 | }
126 |
127 | function displaySubtractQuestion(operand1, operand2) {
128 |
129 | document.getElementById("operand1").textContent = operand1 > operand2 ? operand1 : operand2;
130 | document.getElementById("operand2").textContent = operand1 > operand2 ? operand2 : operand1;
131 | document.getElementById('operator').textContent = "-";
132 |
133 | }
134 |
135 | function displayMultiplyQuestion(operand1, operand2) {
136 |
137 | document.getElementById('operand1').textContent = operand1;
138 | document.getElementById('operand2').textContent = operand2;
139 | document.getElementById('operator').textContent = "x";
140 |
141 | }
--------------------------------------------------------------------------------
/05-tidying-up/01-a-few-last-things/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/06-division-challenge/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* --------- Global style */
2 |
3 | body {
4 | background-color: white;
5 | font-family: "Raleway", sans-serif;
6 | color: #445361;
7 | text-align: center;
8 | }
9 |
10 | /* --------- Heading */
11 |
12 | .heading {
13 | text-align: center;
14 | font-size: 2.5rem;
15 | }
16 |
17 | .logo {
18 | height: 40px;
19 | padding-right: 5px;
20 | }
21 |
22 | /* --------- Game layout */
23 |
24 | .game-area {
25 | background-color: #E6ECF0;
26 | box-sizing: border-box;
27 | width: 85%;
28 | height: 65vh;
29 | max-height: 450px;
30 | max-width: 830px;
31 | margin-left: auto;
32 | margin-right: auto;
33 | padding: 1%;
34 | }
35 |
36 | .question-area {
37 | width: 50%;
38 | font-size: 2rem;
39 | margin: auto;
40 | padding: 50px 0;
41 | }
42 |
43 | .question-area span {
44 | padding: 0 15px;
45 | }
46 |
47 | .score-area {
48 | margin: 5px auto;
49 | width: 60%;
50 | font-size: 1.2rem;
51 | }
52 |
53 | .controls-area {
54 | width: 85%;
55 | margin: 30px auto;
56 | }
57 |
58 | #score {
59 | color: green;
60 | font-weight: bold;
61 | }
62 |
63 | #incorrect {
64 | color: red;
65 | font-weight: bold;
66 | }
67 |
68 | .answer-message {
69 | display: none;
70 | font-size: 1rem;
71 | }
72 |
73 | #answer-box {
74 | border: none;
75 | color: #445361;
76 | display: inline-block;
77 | height: 40px;
78 | width: 80px;
79 | font-size: 1.2rem;
80 | }
81 |
82 | .scores {
83 | display: inline-block;
84 | padding: 25px;
85 | }
86 |
87 | /* --------- Buttons */
88 |
89 | .btn {
90 | width: 220px;
91 | height: 60px;
92 | font-family: "Raleway", sans-serif;
93 | text-transform: uppercase;
94 | letter-spacing: 1.2px;
95 | color: white;
96 | }
97 |
98 | .btn:focus {
99 | outline: none;
100 | }
101 |
102 | .btn--big {
103 | padding-top: 10px;
104 | border-radius: 50%;
105 | background-color: white;
106 | border: 10px solid;
107 | width: 100px;
108 | height: 100px;
109 | font-size: 3.2rem;
110 | margin: 0 30px;
111 | transition: all 0.5s;
112 | }
113 |
114 | .btn--big::after{
115 | content: attr(data-type);
116 | font-size: 1rem;
117 | color: #445361;
118 | position: relative;
119 | left: -0.5em;
120 | }
121 |
122 | .btn--blue {
123 | border-color: blue;
124 | color: blue;
125 | }
126 |
127 | .btn--blue:active,
128 | .btn--blue:hover {
129 | background-color: darkblue;
130 | color: white;
131 | }
132 |
133 | .btn--orange {
134 | border-color: orange;
135 | color: orange;
136 | }
137 |
138 | .btn--orange:active,
139 | .btn--orange:hover {
140 | background-color: darkorange;
141 | color: white;
142 | }
143 |
144 | .btn--red {
145 | border-color: red;
146 | color: red;
147 | }
148 |
149 | .btn--red:active,
150 | .btn--red:hover {
151 | background-color: darkred;
152 | color: white;
153 | }
154 |
155 | .btn--green {
156 | border-color: green;
157 | color: green;
158 | }
159 |
160 | .btn--green:active,
161 | .btn--green:hover {
162 | background-color: darkgreen;
163 | color: white;
164 | }
165 |
166 | .btn--gray {
167 | margin-top: 25px;
168 | background-color: #445361;
169 | border: 1px transparent;
170 | border-radius: 20px;
171 | }
172 |
173 | .btn--gray:active,
174 | .btn--gray:hover {
175 | background-color: #0d1013;
176 | }
177 |
178 | /* --------- Media queries */
179 |
180 | @media (max-width: 414px) {
181 | .controls-area {
182 | width: 100%;
183 | }
184 |
185 | .btn--big {
186 | margin: 0 10px;
187 | padding: 5px;
188 | border: 5px solid;
189 | width: 50px;
190 | height: 50px;
191 | font-size: 1.5rem;
192 | }
193 |
194 | .btn--big::after {
195 | font-size: 0.6rem;
196 | left: -0.7rem;
197 | }
198 |
199 | .question-area {
200 | padding: 10% 0;
201 | width: 100%;
202 | }
203 |
204 | .question-area span {
205 | padding: 0;
206 | }
207 |
208 | .answer-message {
209 | display: block;
210 | }
211 |
212 | #answer-box {
213 | display: block;
214 | margin: 0 auto;
215 | }
216 | .btn--gray {
217 | margin-top: 0;
218 | }
219 |
220 | .score-area {
221 | width: 100%;
222 | }
223 |
224 | .scores {
225 | margin: 0.5em auto;
226 | display: block;
227 | padding: 5px;
228 | }
229 |
230 | .heading {
231 | font-size: 2rem;
232 | }
233 | }
234 |
235 | @media (max-width: 320px) {
236 | .game-area {
237 | height: 70vh;
238 | }
239 |
240 | .controls-area {
241 | width: 75%;
242 | margin: 10px auto;
243 | }
244 |
245 | .btn--big {
246 | margin: 10px 10px;
247 | }
248 | .question-area {
249 | padding: 10px 0;
250 | }
251 |
252 | }
--------------------------------------------------------------------------------
/06-division-challenge/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/06-division-challenge/assets/images/logo.png
--------------------------------------------------------------------------------
/06-division-challenge/assets/js/script.js:
--------------------------------------------------------------------------------
1 | // Wait for the DOM to finish loading before running the game
2 | // Get the button elements and add event listeners to them
3 |
4 | document.addEventListener("DOMContentLoaded", function() {
5 | let buttons = document.getElementsByTagName("button");
6 |
7 | for (let button of buttons) {
8 | button.addEventListener("click", function() {
9 | if (this.getAttribute("data-type") === "submit") {
10 | checkAnswer();
11 | } else {
12 | let gameType = this.getAttribute("data-type");
13 | runGame(gameType);
14 | }
15 | });
16 | }
17 |
18 | document.getElementById("answer-box").addEventListener("keydown", function(event) {
19 | if (event.key === "Enter") {
20 | checkAnswer();
21 | }
22 | });
23 |
24 | runGame("addition");
25 |
26 | });
27 |
28 | /**
29 | * The main game "loop", called when the script is first loaded
30 | * and after the user's answer has been processed
31 | */
32 | function runGame(gameType) {
33 |
34 | document.getElementById("answer-box").value = "";
35 | document.getElementById("answer-box").focus();
36 |
37 | // Creates two random numbers between 1 and 25
38 | let num1 = Math.floor(Math.random() * 25) + 1;
39 | let num2 = Math.floor(Math.random() * 25) + 1;
40 |
41 | if (gameType === "addition") {
42 | displayAdditionQuestion(num1, num2);
43 | } else if (gameType === "multiply") {
44 | displayMultiplyQuestion(num1, num2);
45 | } else if (gameType === "subtract" ) {
46 | displaySubtractQuestion(num1, num2);
47 | } else if (gameType === "division"){
48 | displayDivisionQuestion(num1,num2);
49 | } else {
50 | alert(`Unknown game type: ${gameType}`);
51 | throw `Unknown game type: ${gameType}. Aborting!`;
52 | }
53 |
54 | }
55 |
56 | /**
57 | * Checks the answer against the first element in
58 | * the returned calculateCorrectAnswer array
59 | */
60 | function checkAnswer() {
61 |
62 | let userAnswer = parseInt(document.getElementById("answer-box").value);
63 | let calculatedAnswer = calculateCorrectAnswer();
64 | let isCorrect = userAnswer === calculatedAnswer[0];
65 |
66 | if (isCorrect) {
67 | alert("Hey! You got it right! :D");
68 | incrementScore();
69 | } else {
70 | alert(`Awwww.... you answered ${userAnswer}. The correct answer was ${calculatedAnswer[0]}!`);
71 | incrementWrongAnswer();
72 | }
73 |
74 | runGame(calculatedAnswer[1]);
75 |
76 | }
77 |
78 | /**
79 | * Gets the operands (the numbers) and the operator (plus, minus etc)
80 | * directly from the dom, and returns the correct answer.
81 | */
82 | function calculateCorrectAnswer() {
83 |
84 | let operand1 = parseInt(document.getElementById('operand1').innerText);
85 | let operand2 = parseInt(document.getElementById('operand2').innerText);
86 | let operator = document.getElementById("operator").innerText;
87 |
88 | if (operator === "+") {
89 | return [operand1 + operand2, "addition"];
90 | } else if (operator === "x") {
91 | return [operand1 * operand2, "multiply"];
92 | } else if (operator === "-") {
93 | return [operand1 - operand2, "subtract"];
94 | } else if (operator ==="/") {
95 | return [operand1 / operand2, "division"];
96 | } else {
97 | alert(`Unimplemented operator ${operator}`);
98 | throw `Unimplemented operator ${operator}. Aborting!`;
99 | }
100 |
101 | }
102 |
103 | /**
104 | * Gets the current score from the DOM and increments it by 1
105 | */
106 | function incrementScore() {
107 |
108 | let oldScore = parseInt(document.getElementById("score").innerText);
109 | document.getElementById("score").innerText = ++oldScore;
110 |
111 | }
112 |
113 | /**
114 | * Gets the current tally of incorrect answers from the DOM and increments it by 1
115 | */
116 | function incrementWrongAnswer() {
117 |
118 | let oldScore = parseInt(document.getElementById("incorrect").innerText);
119 | document.getElementById("incorrect").innerText = ++oldScore;
120 |
121 | }
122 |
123 | function displayAdditionQuestion(operand1, operand2) {
124 |
125 | document.getElementById('operand1').textContent = operand1;
126 | document.getElementById('operand2').textContent = operand2;
127 | document.getElementById('operator').textContent = "+";
128 |
129 | }
130 |
131 | function displaySubtractQuestion(operand1, operand2) {
132 |
133 | document.getElementById("operand1").textContent = operand1 > operand2 ? operand1 : operand2;
134 | document.getElementById("operand2").textContent = operand1 > operand2 ? operand2 : operand1;
135 | document.getElementById('operator').textContent = "-";
136 |
137 | }
138 |
139 | function displayMultiplyQuestion(operand1, operand2) {
140 |
141 | document.getElementById('operand1').textContent = operand1;
142 | document.getElementById('operand2').textContent = operand2;
143 | document.getElementById('operator').textContent = "x";
144 |
145 | }
146 |
147 | // Add your division question here
148 | function displayDivisionQuestion(operand1, operand2) {
149 | operand1 = operand1 * operand2;
150 | document.getElementById("operand1").textContent = operand1;
151 | document.getElementById("operand2").textContent = operand2;
152 | document.getElementById("operator").textContent = "/";
153 | }
--------------------------------------------------------------------------------
/06-division-challenge/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Document
15 |
16 |
17 |
18 |
19 | Love Maths
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
0
39 |
x
40 |
0
41 |
=
42 |
Enter Answer:
43 |
44 |
45 |
Submit Answer
46 |
47 |
48 |
49 |
Correct Answers 0
50 |
Incorrect Answers 0
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Starter Maths Game
2 |
3 | This maths game is used to teach the basics of JavaScript and the DOM.
4 |
5 | ## REQUIRED (TESTED):
6 |
7 | * Add a division game that requires integers as answers
8 |
9 | ## BONUS (NOT TESTED):
10 |
11 | * Provide better feedback to the user - we don't want to use `alert()`
12 | * Add difficulty levels - Easy, Normal, Difficult - that affect the complexity of the questions
13 |
14 | ## SUPER BONUS (NOT TESTED):
15 | * Add a countdown timer to the game
16 | * Add a high-score chart for people who get the most answers right in the time available (research using local storage)
--------------------------------------------------------------------------------