├── .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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 | 
24 |     </div>
25 | 
26 |     <div class="score-area">
27 |         <p class="scores">Correct Answers <span id="score">0</span></p>
28 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
29 |     </div>
30 | 
31 |     <script src="assets/js/script.js"></script>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button data-type="addition" class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button data-type="subtract" class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button data-type="multiply" class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button data-type="division" class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button data-type="submit" class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button data-type="addition" class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button data-type="subtract" class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button data-type="multiply" class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button data-type="division" class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button data-type="submit" class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button data-type="addition" class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button data-type="subtract" class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button data-type="multiply" class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button data-type="division" class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button data-type="submit" class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button data-type="addition" class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button data-type="subtract" class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button data-type="multiply" class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button data-type="division" class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button data-type="submit" class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button data-type="addition" class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button data-type="subtract" class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button data-type="multiply" class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button data-type="division" class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button data-type="submit" class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button data-type="addition" class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button data-type="subtract" class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button data-type="multiply" class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button data-type="division" class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button data-type="submit" class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button data-type="addition" class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button data-type="subtract" class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button data-type="multiply" class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button data-type="division" class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button data-type="submit" class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button data-type="addition" class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button data-type="subtract" class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button data-type="multiply" class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button data-type="division" class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button data-type="submit" class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button data-type="addition" class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button data-type="subtract" class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button data-type="multiply" class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button data-type="division" class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button data-type="submit" class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button data-type="addition" class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button data-type="subtract" class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button data-type="multiply" class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button data-type="division" class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button data-type="submit" class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button data-type="addition" class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button data-type="subtract" class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button data-type="multiply" class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button data-type="division" class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button data-type="submit" class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <!-- font awesome and google fonts -->
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
10 |         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway%7CRighteous" rel="stylesheet">
12 | 
13 |     <link rel="stylesheet" href="assets/css/style.css">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <h1 class="heading">
19 |         <img class="logo" src="assets/images/logo.png" alt="logo"> Love Maths
20 |     </h1>
21 | 
22 |     <div class="game-area">
23 |         <div class="controls-area">
24 |             <button data-type="addition" class="btn btn--big btn--green">
25 |                 <i class="fas fa-plus"></i>
26 |             </button>
27 |             <button data-type="subtract" class="btn btn--big btn--blue">
28 |                 <i class="fas fa-minus"></i>
29 |             </button>
30 |             <button data-type="multiply" class="btn btn--big btn--orange">
31 |                 <i class="fas fa-times"></i>
32 |             </button>
33 |             <button data-type="division" class="btn btn--big btn--red">
34 |                 <i class="fas fa-divide"></i>
35 |             </button>
36 |         </div>
37 |         <div class="question-area">
38 |             <span id="operand1">0</span>
39 |             <span id="operator">x</span>
40 |             <span id="operand2">0</span>
41 |             <span>=</span>
42 |             <p class="answer-message">Enter Answer:</p>
43 |             <input id="answer-box" type="number">
44 |         </div>
45 |         <button data-type="submit" class="btn btn--gray">Submit Answer</button>
46 |     </div>
47 | 
48 |     <div class="score-area">
49 |         <p class="scores">Correct Answers <span id="score">0</span></p>
50 |         <p class="scores">Incorrect Answers <span id="incorrect">0</span></p>
51 |     </div>
52 | 
53 |     <script src="assets/js/script.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/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)


--------------------------------------------------------------------------------