├── .gitignore ├── .gitpod.dockerfile ├── .gitpod.yml ├── .theia ├── client.cnf ├── init_tasks.sh ├── launch.json ├── mysql.cnf ├── settings.json ├── snippets.json └── start_mysql.sh ├── 01-putting-the-basics-in-place ├── 01-getting-set-up │ ├── assets │ │ ├── css │ │ │ └── style.css │ │ └── js │ │ │ └── script.js │ └── index.html ├── 02-writing-some-html-part1 │ ├── assets │ │ ├── css │ │ │ └── style.css │ │ ├── images │ │ │ └── logo.png │ │ └── js │ │ │ └── script.js │ └── index.html ├── 03-writing-some-html-part2 │ ├── assets │ │ ├── css │ │ │ └── style.css │ │ ├── images │ │ │ └── logo.png │ │ └── js │ │ │ └── script.js │ └── index.html └── 04-lets-get-stylish │ ├── assets │ ├── css │ │ └── style.css │ ├── images │ │ └── logo.png │ └── js │ │ └── script.js │ └── index.html ├── 02-adding-some-javascript ├── 01-adding-structure │ ├── assets │ │ ├── css │ │ │ └── style.css │ │ ├── images │ │ │ └── logo.png │ │ └── js │ │ │ └── script.js │ └── index.html ├── 02-creating-event-listeners │ ├── assets │ │ ├── css │ │ │ └── style.css │ │ ├── images │ │ │ └── logo.png │ │ └── js │ │ │ └── script.js │ └── index.html └── 03-generating-random-numbers │ ├── assets │ ├── css │ │ └── style.css │ ├── images │ │ └── logo.png │ └── js │ │ └── script.js │ └── index.html ├── 03-displaying-the-question-and-answer ├── 01-displaying-the-addition-question │ ├── assets │ │ ├── css │ │ │ └── style.css │ │ ├── images │ │ │ └── logo.png │ │ └── js │ │ │ └── script.js │ └── index.html ├── 02-calculating-the-answer │ ├── assets │ │ ├── css │ │ │ └── style.css │ │ ├── images │ │ │ └── logo.png │ │ └── js │ │ │ └── script.js │ └── index.html ├── 03-checking-the-answer │ ├── assets │ │ ├── css │ │ │ └── style.css │ │ ├── images │ │ │ └── logo.png │ │ └── js │ │ │ └── script.js │ └── index.html └── 04-updating-the-scores │ ├── assets │ ├── css │ │ └── style.css │ ├── images │ │ └── logo.png │ └── js │ │ └── script.js │ └── index.html ├── 04-multiplication-and-subtraction-questions ├── 01-the-multiplication-game │ ├── assets │ │ ├── css │ │ │ └── style.css │ │ ├── images │ │ │ └── logo.png │ │ └── js │ │ │ └── script.js │ └── index.html └── 02-the-subtraction-game │ ├── assets │ ├── css │ │ └── style.css │ ├── images │ │ └── logo.png │ └── js │ │ └── script.js │ └── index.html ├── 05-tidying-up └── 01-a-few-last-things │ ├── assets │ ├── css │ │ └── style.css │ ├── images │ │ └── logo.png │ └── js │ │ └── script.js │ └── index.html ├── 06-division-challenge ├── assets │ ├── css │ │ └── style.css │ ├── images │ │ └── logo.png │ └── js │ │ └── script.js └── index.html └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | core.Microsoft* 2 | core.mongo* 3 | core.python* 4 | env.py 5 | __pycache__/ 6 | *.py[cod] 7 | -------------------------------------------------------------------------------- /.gitpod.dockerfile: -------------------------------------------------------------------------------- 1 | FROM gitpod/workspace-full 2 | 3 | USER root 4 | # Setup Heroku CLI 5 | RUN curl https://cli-assets.heroku.com/install.sh | sh 6 | 7 | # Setup MongoDB and MySQL 8 | RUN apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 20691eec35216c63caf66ce1656408e390cfb1f5 && \ 9 | echo "deb http://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-4.4.list && \ 10 | apt-get update -y && \ 11 | touch /etc/init.d/mongod && \ 12 | apt-get -y install mongodb-org-shell -y && \ 13 | apt-get -y install links && \ 14 | apt-get install -y mysql-server && \ 15 | apt-get clean && rm -rf /var/cache/apt/* /var/lib/apt/lists/* /tmp/* && \ 16 | mkdir /var/run/mysqld && \ 17 | chown -R gitpod:gitpod /etc/mysql /var/run/mysqld /var/log/mysql /var/lib/mysql /var/lib/mysql-files /var/lib/mysql-keyring /var/lib/mysql-upgrade /home/gitpod/.cache/heroku/ && \ 18 | pip3 install flake8 flake8-flask flake8-django 19 | 20 | # Create our own config files 21 | 22 | COPY .theia/mysql.cnf /etc/mysql/mysql.conf.d/mysqld.cnf 23 | 24 | COPY .theia/client.cnf /etc/mysql/mysql.conf.d/client.cnf 25 | 26 | COPY .theia/start_mysql.sh /etc/mysql/mysql-bashrc-launch.sh 27 | 28 | USER gitpod 29 | 30 | # Start MySQL when we log in 31 | 32 | RUN echo ". /etc/mysql/mysql-bashrc-launch.sh" >> ~/.bashrc 33 | 34 | # Local environment variables 35 | # C9USER is temporary to allow the MySQL Gist to run 36 | ENV C9_USER="gitpod" 37 | ENV PORT="8080" 38 | ENV IP="0.0.0.0" 39 | ENV C9_HOSTNAME="localhost" 40 | 41 | USER root 42 | # Switch back to root to allow IDE to load 43 | -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | image: 2 | file: .gitpod.dockerfile 3 | tasks: 4 | - init: . ${GITPOD_REPO_ROOT}/.theia/init_tasks.sh 5 | vscode: 6 | extensions: 7 | - ms-python.python@2019.8.30787:TnGEOx35GXMhyKLjDGz9Aw== 8 | - formulahendry.auto-close-tag@0.5.9:JZIefALANqOfhSK1TU4+Fw== 9 | - mkaufman.HTMLHint@0.10.0:xevX4CvYOkKd8xjvtJQiGQ== 10 | - eventyret.bootstrap-4-cdn-snippet@1.9.0:I8wcXFcKWQIROg7J0SLLqg== 11 | - esbenp.prettier-vscode@5.7.1:4Zx39KyQMoIz7x94PSmDmQ== 12 | - kevinglasson.cornflakes-linter@0.5.1:KAaMshgHOKan8eojXQ53OQ== 13 | 14 | -------------------------------------------------------------------------------- /.theia/client.cnf: -------------------------------------------------------------------------------- 1 | [client] 2 | host = localhost 3 | user = root 4 | password = 5 | socket = /var/run/mysqld/mysqld.sock 6 | [mysql_upgrade] 7 | host = localhost 8 | user = root 9 | password = 10 | socket = /var/run/mysqld/mysqld.sock 11 | -------------------------------------------------------------------------------- /.theia/init_tasks.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Creates a user record for the current Cloud9 user 4 | # Gives a personalised greeting 5 | # Adds configuration options for SQLite 6 | # Creates run aliases 7 | # Author: Matt Rudge 8 | 9 | echo "Setting the greeting" 10 | sed -i "s/USER_NAME/$GITPOD_GIT_USER_NAME/g" ${GITPOD_REPO_ROOT}/README.md 11 | echo "Creating the ${C9_USER} user in MySQL" 12 | RESULT="$(mysql -sse "SELECT EXISTS(SELECT 1 FROM mysql.user WHERE user = '${C9_USER}')")" 13 | if [ "$RESULT" = 1 ]; then 14 | echo "${C9_USER} already exists" 15 | else 16 | mysql -e "CREATE USER '${C9_USER}'@'%' IDENTIFIED BY '';" -u root 17 | echo "Granting privileges" 18 | mysql -e "GRANT ALL PRIVILEGES ON *.* TO '${C9_USER}'@'%' WITH GRANT OPTION;" -u root 19 | fi 20 | echo "Creating .sqliterc file" 21 | echo ".headers on" > ~/.sqliterc 22 | echo ".mode column" >> ~/.sqliterc 23 | echo "Adding run aliases" 24 | echo 'alias run="python3 $GITPOD_REPO_ROOT/manage.py runserver 0.0.0.0:8000"' >> ~/.bashrc 25 | echo 'alias python=python3' >> ~/.bashrc 26 | echo 'alias pip=pip3' >> ~/.bashrc 27 | echo "Your workspace is ready to use. Happy coding!" 28 | source ~/.bashrc 29 | -------------------------------------------------------------------------------- /.theia/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | "version": "0.2.0", 5 | "configurations": [ 6 | { 7 | "name": "Python: Current File (Integrated Terminal)", 8 | "type": "python", 9 | "request": "launch", 10 | "program": "${file}", 11 | "console": "internalConsole" 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /.theia/mysql.cnf: -------------------------------------------------------------------------------- 1 | [mysqld_safe] 2 | socket = /var/run/mysqld/mysqld.sock 3 | nice = 0 4 | 5 | [mysqld] 6 | user = gitpod 7 | pid-file = /var/run/mysqld/mysqld.pid 8 | socket = /var/run/mysqld/mysqld.sock 9 | port = 3306 10 | basedir = /usr 11 | datadir = /workspace/mysql 12 | tmpdir = /tmp 13 | lc-messages-dir = /usr/share/mysql 14 | skip-external-locking 15 | 16 | key_buffer_size = 16M 17 | max_allowed_packet = 16M 18 | thread_stack = 192K 19 | thread_cache_size = 8 20 | 21 | myisam-recover-options = BACKUP 22 | 23 | general_log_file = /var/log/mysql/mysql.log 24 | general_log = 1 25 | log_error = /var/log/mysql/error.log 26 | -------------------------------------------------------------------------------- /.theia/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "python.linting.pylintEnabled": true, 3 | "python.linting.enabled": true, 4 | "python.linting.pep8Enabled": false, 5 | "python.linting.flake8Enabled": true, 6 | "python.terminal.activateEnvironment": false, 7 | "python.formatting.autopep8Path": "/home/gitpod/.pyenv/shims/autopep8", 8 | "python.linting.flake8Path": "/home/gitpod/.pyenv/shims/flake8", 9 | "cornflakes.linter.executablePath": "/home/gitpod/.pyenv/shims/flake8", 10 | "files.exclude": { 11 | "**/.git": true, 12 | "**/.gitp*": true, 13 | "**/.svn": true, 14 | "**/.hg": true, 15 | "**/CVS": true, 16 | "**/.DS_Store": true, 17 | "**/.theia": true, 18 | "**/core.Microsoft*": true, 19 | "**/core.mongo*": true, 20 | "**/core.python*": true 21 | }, 22 | "emmet.extensionsPath": ".theia" 23 | } 24 | -------------------------------------------------------------------------------- /.theia/snippets.json: -------------------------------------------------------------------------------- 1 | { 2 | "html": { 3 | "snippets": { 4 | "form": "form>input>input:submit[value=\"Submit\"]" 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.theia/start_mysql.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # this script is intended to be called from .bashrc 4 | # This is a workaround for not having something like supervisord 5 | 6 | if [ ! -e /var/run/mysqld/gitpod-init.lock ] 7 | then 8 | touch /var/run/mysqld/gitpod-init.lock 9 | 10 | # initialize database structures on disk, if needed 11 | [ ! -d /workspace/mysql ] && mysqld --initialize-insecure 12 | 13 | # launch database, if not running 14 | [ ! -e /var/run/mysqld/mysqld.pid ] && mysqld --daemonize 15 | 16 | rm /var/run/mysqld/gitpod-init.lock 17 | fi 18 | -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/01-getting-set-up/assets/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/01-getting-set-up/assets/css/style.css -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/01-getting-set-up/assets/js/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/01-getting-set-up/assets/js/script.js -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/01-getting-set-up/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/01-getting-set-up/index.html -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/02-writing-some-html-part1/assets/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/02-writing-some-html-part1/assets/css/style.css -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/02-writing-some-html-part1/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/02-writing-some-html-part1/assets/images/logo.png -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/02-writing-some-html-part1/assets/js/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/02-writing-some-html-part1/assets/js/script.js -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/02-writing-some-html-part1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 | 24 |
25 | 26 |
27 |

Correct Answers 0

28 |

Incorrect Answers 0

29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/03-writing-some-html-part2/assets/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/03-writing-some-html-part2/assets/css/style.css -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/03-writing-some-html-part2/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/03-writing-some-html-part2/assets/images/logo.png -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/03-writing-some-html-part2/assets/js/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/03-writing-some-html-part2/assets/js/script.js -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/03-writing-some-html-part2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/04-lets-get-stylish/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* --------- Global style */ 2 | 3 | body { 4 | background-color: white; 5 | font-family: "Raleway", sans-serif; 6 | color: #445361; 7 | text-align: center; 8 | } 9 | 10 | /* --------- Heading */ 11 | 12 | .heading { 13 | text-align: center; 14 | font-size: 2.5rem; 15 | } 16 | 17 | .logo { 18 | height: 40px; 19 | padding-right: 5px; 20 | } 21 | 22 | /* --------- Game layout */ 23 | 24 | .game-area { 25 | background-color: #E6ECF0; 26 | box-sizing: border-box; 27 | width: 85%; 28 | height: 65vh; 29 | max-height: 450px; 30 | max-width: 830px; 31 | margin-left: auto; 32 | margin-right: auto; 33 | padding: 1%; 34 | } 35 | 36 | .question-area { 37 | width: 50%; 38 | font-size: 2rem; 39 | margin: auto; 40 | padding: 50px 0; 41 | } 42 | 43 | .question-area span { 44 | padding: 0 15px; 45 | } 46 | 47 | .score-area { 48 | margin: 5px auto; 49 | width: 60%; 50 | font-size: 1.2rem; 51 | } 52 | 53 | .controls-area { 54 | width: 85%; 55 | margin: 30px auto; 56 | } 57 | 58 | #score { 59 | color: green; 60 | font-weight: bold; 61 | } 62 | 63 | #incorrect { 64 | color: red; 65 | font-weight: bold; 66 | } 67 | 68 | .answer-message { 69 | display: none; 70 | font-size: 1rem; 71 | } 72 | 73 | #answer-box { 74 | border: none; 75 | color: #445361; 76 | display: inline-block; 77 | height: 40px; 78 | width: 80px; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .scores { 83 | display: inline-block; 84 | padding: 25px; 85 | } 86 | 87 | /* --------- Buttons */ 88 | 89 | .btn { 90 | width: 220px; 91 | height: 60px; 92 | font-family: "Raleway", sans-serif; 93 | text-transform: uppercase; 94 | letter-spacing: 1.2px; 95 | color: white; 96 | } 97 | 98 | .btn:focus { 99 | outline: none; 100 | } 101 | 102 | .btn--big { 103 | padding-top: 10px; 104 | border-radius: 50%; 105 | background-color: white; 106 | border: 10px solid; 107 | width: 100px; 108 | height: 100px; 109 | font-size: 3.2rem; 110 | margin: 0 30px; 111 | transition: all 0.5s; 112 | } 113 | 114 | .btn--big::after{ 115 | content: attr(data-type); 116 | font-size: 1rem; 117 | color: #445361; 118 | position: relative; 119 | left: -0.5em; 120 | } 121 | 122 | .btn--blue { 123 | border-color: blue; 124 | color: blue; 125 | } 126 | 127 | .btn--blue:active, 128 | .btn--blue:hover { 129 | background-color: darkblue; 130 | color: white; 131 | } 132 | 133 | .btn--orange { 134 | border-color: orange; 135 | color: orange; 136 | } 137 | 138 | .btn--orange:active, 139 | .btn--orange:hover { 140 | background-color: darkorange; 141 | color: white; 142 | } 143 | 144 | .btn--red { 145 | border-color: red; 146 | color: red; 147 | } 148 | 149 | .btn--red:active, 150 | .btn--red:hover { 151 | background-color: darkred; 152 | color: white; 153 | } 154 | 155 | .btn--green { 156 | border-color: green; 157 | color: green; 158 | } 159 | 160 | .btn--green:active, 161 | .btn--green:hover { 162 | background-color: darkgreen; 163 | color: white; 164 | } 165 | 166 | .btn--gray { 167 | margin-top: 25px; 168 | background-color: #445361; 169 | border: 1px transparent; 170 | border-radius: 20px; 171 | } 172 | 173 | .btn--gray:active, 174 | .btn--gray:hover { 175 | background-color: #0d1013; 176 | } 177 | 178 | /* --------- Media queries */ 179 | 180 | @media (max-width: 414px) { 181 | .controls-area { 182 | width: 100%; 183 | } 184 | 185 | .btn--big { 186 | margin: 0 10px; 187 | padding: 5px; 188 | border: 5px solid; 189 | width: 50px; 190 | height: 50px; 191 | font-size: 1.5rem; 192 | } 193 | 194 | .btn--big::after { 195 | font-size: 0.6rem; 196 | left: -0.7rem; 197 | } 198 | 199 | .question-area { 200 | padding: 10% 0; 201 | width: 100%; 202 | } 203 | 204 | .question-area span { 205 | padding: 0; 206 | } 207 | 208 | .answer-message { 209 | display: block; 210 | } 211 | 212 | #answer-box { 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | .btn--gray { 217 | margin-top: 0; 218 | } 219 | 220 | .score-area { 221 | width: 100%; 222 | } 223 | 224 | .scores { 225 | margin: 0.5em auto; 226 | display: block; 227 | padding: 5px; 228 | } 229 | 230 | .heading { 231 | font-size: 2rem; 232 | } 233 | } 234 | 235 | @media (max-width: 320px) { 236 | .game-area { 237 | height: 70vh; 238 | } 239 | 240 | .controls-area { 241 | width: 75%; 242 | margin: 10px auto; 243 | } 244 | 245 | .btn--big { 246 | margin: 10px 10px; 247 | } 248 | .question-area { 249 | padding: 10px 0; 250 | } 251 | 252 | } -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/04-lets-get-stylish/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/04-lets-get-stylish/assets/images/logo.png -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/04-lets-get-stylish/assets/js/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/01-putting-the-basics-in-place/04-lets-get-stylish/assets/js/script.js -------------------------------------------------------------------------------- /01-putting-the-basics-in-place/04-lets-get-stylish/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /02-adding-some-javascript/01-adding-structure/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* --------- Global style */ 2 | 3 | body { 4 | background-color: white; 5 | font-family: "Raleway", sans-serif; 6 | color: #445361; 7 | text-align: center; 8 | } 9 | 10 | /* --------- Heading */ 11 | 12 | .heading { 13 | text-align: center; 14 | font-size: 2.5rem; 15 | } 16 | 17 | .logo { 18 | height: 40px; 19 | padding-right: 5px; 20 | } 21 | 22 | /* --------- Game layout */ 23 | 24 | .game-area { 25 | background-color: #E6ECF0; 26 | box-sizing: border-box; 27 | width: 85%; 28 | height: 65vh; 29 | max-height: 450px; 30 | max-width: 830px; 31 | margin-left: auto; 32 | margin-right: auto; 33 | padding: 1%; 34 | } 35 | 36 | .question-area { 37 | width: 50%; 38 | font-size: 2rem; 39 | margin: auto; 40 | padding: 50px 0; 41 | } 42 | 43 | .question-area span { 44 | padding: 0 15px; 45 | } 46 | 47 | .score-area { 48 | margin: 5px auto; 49 | width: 60%; 50 | font-size: 1.2rem; 51 | } 52 | 53 | .controls-area { 54 | width: 85%; 55 | margin: 30px auto; 56 | } 57 | 58 | #score { 59 | color: green; 60 | font-weight: bold; 61 | } 62 | 63 | #incorrect { 64 | color: red; 65 | font-weight: bold; 66 | } 67 | 68 | .answer-message { 69 | display: none; 70 | font-size: 1rem; 71 | } 72 | 73 | #answer-box { 74 | border: none; 75 | color: #445361; 76 | display: inline-block; 77 | height: 40px; 78 | width: 80px; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .scores { 83 | display: inline-block; 84 | padding: 25px; 85 | } 86 | 87 | /* --------- Buttons */ 88 | 89 | .btn { 90 | width: 220px; 91 | height: 60px; 92 | font-family: "Raleway", sans-serif; 93 | text-transform: uppercase; 94 | letter-spacing: 1.2px; 95 | color: white; 96 | } 97 | 98 | .btn:focus { 99 | outline: none; 100 | } 101 | 102 | .btn--big { 103 | padding-top: 10px; 104 | border-radius: 50%; 105 | background-color: white; 106 | border: 10px solid; 107 | width: 100px; 108 | height: 100px; 109 | font-size: 3.2rem; 110 | margin: 0 30px; 111 | transition: all 0.5s; 112 | } 113 | 114 | .btn--big::after{ 115 | content: attr(data-type); 116 | font-size: 1rem; 117 | color: #445361; 118 | position: relative; 119 | left: -0.5em; 120 | } 121 | 122 | .btn--blue { 123 | border-color: blue; 124 | color: blue; 125 | } 126 | 127 | .btn--blue:active, 128 | .btn--blue:hover { 129 | background-color: darkblue; 130 | color: white; 131 | } 132 | 133 | .btn--orange { 134 | border-color: orange; 135 | color: orange; 136 | } 137 | 138 | .btn--orange:active, 139 | .btn--orange:hover { 140 | background-color: darkorange; 141 | color: white; 142 | } 143 | 144 | .btn--red { 145 | border-color: red; 146 | color: red; 147 | } 148 | 149 | .btn--red:active, 150 | .btn--red:hover { 151 | background-color: darkred; 152 | color: white; 153 | } 154 | 155 | .btn--green { 156 | border-color: green; 157 | color: green; 158 | } 159 | 160 | .btn--green:active, 161 | .btn--green:hover { 162 | background-color: darkgreen; 163 | color: white; 164 | } 165 | 166 | .btn--gray { 167 | margin-top: 25px; 168 | background-color: #445361; 169 | border: 1px transparent; 170 | border-radius: 20px; 171 | } 172 | 173 | .btn--gray:active, 174 | .btn--gray:hover { 175 | background-color: #0d1013; 176 | } 177 | 178 | /* --------- Media queries */ 179 | 180 | @media (max-width: 414px) { 181 | .controls-area { 182 | width: 100%; 183 | } 184 | 185 | .btn--big { 186 | margin: 0 10px; 187 | padding: 5px; 188 | border: 5px solid; 189 | width: 50px; 190 | height: 50px; 191 | font-size: 1.5rem; 192 | } 193 | 194 | .btn--big::after { 195 | font-size: 0.6rem; 196 | left: -0.7rem; 197 | } 198 | 199 | .question-area { 200 | padding: 10% 0; 201 | width: 100%; 202 | } 203 | 204 | .question-area span { 205 | padding: 0; 206 | } 207 | 208 | .answer-message { 209 | display: block; 210 | } 211 | 212 | #answer-box { 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | .btn--gray { 217 | margin-top: 0; 218 | } 219 | 220 | .score-area { 221 | width: 100%; 222 | } 223 | 224 | .scores { 225 | margin: 0.5em auto; 226 | display: block; 227 | padding: 5px; 228 | } 229 | 230 | .heading { 231 | font-size: 2rem; 232 | } 233 | } 234 | 235 | @media (max-width: 320px) { 236 | .game-area { 237 | height: 70vh; 238 | } 239 | 240 | .controls-area { 241 | width: 75%; 242 | margin: 10px auto; 243 | } 244 | 245 | .btn--big { 246 | margin: 10px 10px; 247 | } 248 | .question-area { 249 | padding: 10px 0; 250 | } 251 | 252 | } -------------------------------------------------------------------------------- /02-adding-some-javascript/01-adding-structure/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/02-adding-some-javascript/01-adding-structure/assets/images/logo.png -------------------------------------------------------------------------------- /02-adding-some-javascript/01-adding-structure/assets/js/script.js: -------------------------------------------------------------------------------- 1 | function runGame() { 2 | 3 | } 4 | 5 | function checkAnswer() { 6 | 7 | } 8 | 9 | function calculateCorrectAnswer() { 10 | 11 | } 12 | 13 | function incrementScore() { 14 | 15 | } 16 | 17 | function incrementWrongAnswer() { 18 | 19 | } 20 | 21 | function displayAdditionQuestion() { 22 | 23 | } 24 | 25 | function displaySubtractQuestion() { 26 | 27 | } 28 | 29 | function displayMultiplyQuestion() { 30 | 31 | } -------------------------------------------------------------------------------- /02-adding-some-javascript/01-adding-structure/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /02-adding-some-javascript/02-creating-event-listeners/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* --------- Global style */ 2 | 3 | body { 4 | background-color: white; 5 | font-family: "Raleway", sans-serif; 6 | color: #445361; 7 | text-align: center; 8 | } 9 | 10 | /* --------- Heading */ 11 | 12 | .heading { 13 | text-align: center; 14 | font-size: 2.5rem; 15 | } 16 | 17 | .logo { 18 | height: 40px; 19 | padding-right: 5px; 20 | } 21 | 22 | /* --------- Game layout */ 23 | 24 | .game-area { 25 | background-color: #E6ECF0; 26 | box-sizing: border-box; 27 | width: 85%; 28 | height: 65vh; 29 | max-height: 450px; 30 | max-width: 830px; 31 | margin-left: auto; 32 | margin-right: auto; 33 | padding: 1%; 34 | } 35 | 36 | .question-area { 37 | width: 50%; 38 | font-size: 2rem; 39 | margin: auto; 40 | padding: 50px 0; 41 | } 42 | 43 | .question-area span { 44 | padding: 0 15px; 45 | } 46 | 47 | .score-area { 48 | margin: 5px auto; 49 | width: 60%; 50 | font-size: 1.2rem; 51 | } 52 | 53 | .controls-area { 54 | width: 85%; 55 | margin: 30px auto; 56 | } 57 | 58 | #score { 59 | color: green; 60 | font-weight: bold; 61 | } 62 | 63 | #incorrect { 64 | color: red; 65 | font-weight: bold; 66 | } 67 | 68 | .answer-message { 69 | display: none; 70 | font-size: 1rem; 71 | } 72 | 73 | #answer-box { 74 | border: none; 75 | color: #445361; 76 | display: inline-block; 77 | height: 40px; 78 | width: 80px; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .scores { 83 | display: inline-block; 84 | padding: 25px; 85 | } 86 | 87 | /* --------- Buttons */ 88 | 89 | .btn { 90 | width: 220px; 91 | height: 60px; 92 | font-family: "Raleway", sans-serif; 93 | text-transform: uppercase; 94 | letter-spacing: 1.2px; 95 | color: white; 96 | } 97 | 98 | .btn:focus { 99 | outline: none; 100 | } 101 | 102 | .btn--big { 103 | padding-top: 10px; 104 | border-radius: 50%; 105 | background-color: white; 106 | border: 10px solid; 107 | width: 100px; 108 | height: 100px; 109 | font-size: 3.2rem; 110 | margin: 0 30px; 111 | transition: all 0.5s; 112 | } 113 | 114 | .btn--big::after{ 115 | content: attr(data-type); 116 | font-size: 1rem; 117 | color: #445361; 118 | position: relative; 119 | left: -0.5em; 120 | } 121 | 122 | .btn--blue { 123 | border-color: blue; 124 | color: blue; 125 | } 126 | 127 | .btn--blue:active, 128 | .btn--blue:hover { 129 | background-color: darkblue; 130 | color: white; 131 | } 132 | 133 | .btn--orange { 134 | border-color: orange; 135 | color: orange; 136 | } 137 | 138 | .btn--orange:active, 139 | .btn--orange:hover { 140 | background-color: darkorange; 141 | color: white; 142 | } 143 | 144 | .btn--red { 145 | border-color: red; 146 | color: red; 147 | } 148 | 149 | .btn--red:active, 150 | .btn--red:hover { 151 | background-color: darkred; 152 | color: white; 153 | } 154 | 155 | .btn--green { 156 | border-color: green; 157 | color: green; 158 | } 159 | 160 | .btn--green:active, 161 | .btn--green:hover { 162 | background-color: darkgreen; 163 | color: white; 164 | } 165 | 166 | .btn--gray { 167 | margin-top: 25px; 168 | background-color: #445361; 169 | border: 1px transparent; 170 | border-radius: 20px; 171 | } 172 | 173 | .btn--gray:active, 174 | .btn--gray:hover { 175 | background-color: #0d1013; 176 | } 177 | 178 | /* --------- Media queries */ 179 | 180 | @media (max-width: 414px) { 181 | .controls-area { 182 | width: 100%; 183 | } 184 | 185 | .btn--big { 186 | margin: 0 10px; 187 | padding: 5px; 188 | border: 5px solid; 189 | width: 50px; 190 | height: 50px; 191 | font-size: 1.5rem; 192 | } 193 | 194 | .btn--big::after { 195 | font-size: 0.6rem; 196 | left: -0.7rem; 197 | } 198 | 199 | .question-area { 200 | padding: 10% 0; 201 | width: 100%; 202 | } 203 | 204 | .question-area span { 205 | padding: 0; 206 | } 207 | 208 | .answer-message { 209 | display: block; 210 | } 211 | 212 | #answer-box { 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | .btn--gray { 217 | margin-top: 0; 218 | } 219 | 220 | .score-area { 221 | width: 100%; 222 | } 223 | 224 | .scores { 225 | margin: 0.5em auto; 226 | display: block; 227 | padding: 5px; 228 | } 229 | 230 | .heading { 231 | font-size: 2rem; 232 | } 233 | } 234 | 235 | @media (max-width: 320px) { 236 | .game-area { 237 | height: 70vh; 238 | } 239 | 240 | .controls-area { 241 | width: 75%; 242 | margin: 10px auto; 243 | } 244 | 245 | .btn--big { 246 | margin: 10px 10px; 247 | } 248 | .question-area { 249 | padding: 10px 0; 250 | } 251 | 252 | } -------------------------------------------------------------------------------- /02-adding-some-javascript/02-creating-event-listeners/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/02-adding-some-javascript/02-creating-event-listeners/assets/images/logo.png -------------------------------------------------------------------------------- /02-adding-some-javascript/02-creating-event-listeners/assets/js/script.js: -------------------------------------------------------------------------------- 1 | // Wait for the DOM to finish loading before running the game 2 | // Get the button elements and add event listeners to them 3 | 4 | document.addEventListener("DOMContentLoaded", function() { 5 | let buttons = document.getElementsByTagName("button"); 6 | 7 | for (let button of buttons) { 8 | button.addEventListener("click", function() { 9 | if (this.getAttribute("data-type") === "submit") { 10 | alert("You clicked Submit!"); 11 | } else { 12 | let gameType = this.getAttribute("data-type"); 13 | alert(`You clicked ${gameType}`); 14 | } 15 | }); 16 | } 17 | }); 18 | 19 | function runGame() { 20 | 21 | } 22 | 23 | function checkAnswer() { 24 | 25 | } 26 | 27 | function calculateCorrectAnswer() { 28 | 29 | } 30 | 31 | function incrementScore() { 32 | 33 | } 34 | 35 | function incrementWrongAnswer() { 36 | 37 | } 38 | 39 | function displayAdditionQuestion() { 40 | 41 | } 42 | 43 | function displaySubtractQuestion() { 44 | 45 | } 46 | 47 | function displayMultiplyQuestion() { 48 | 49 | } -------------------------------------------------------------------------------- /02-adding-some-javascript/02-creating-event-listeners/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /02-adding-some-javascript/03-generating-random-numbers/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* --------- Global style */ 2 | 3 | body { 4 | background-color: white; 5 | font-family: "Raleway", sans-serif; 6 | color: #445361; 7 | text-align: center; 8 | } 9 | 10 | /* --------- Heading */ 11 | 12 | .heading { 13 | text-align: center; 14 | font-size: 2.5rem; 15 | } 16 | 17 | .logo { 18 | height: 40px; 19 | padding-right: 5px; 20 | } 21 | 22 | /* --------- Game layout */ 23 | 24 | .game-area { 25 | background-color: #E6ECF0; 26 | box-sizing: border-box; 27 | width: 85%; 28 | height: 65vh; 29 | max-height: 450px; 30 | max-width: 830px; 31 | margin-left: auto; 32 | margin-right: auto; 33 | padding: 1%; 34 | } 35 | 36 | .question-area { 37 | width: 50%; 38 | font-size: 2rem; 39 | margin: auto; 40 | padding: 50px 0; 41 | } 42 | 43 | .question-area span { 44 | padding: 0 15px; 45 | } 46 | 47 | .score-area { 48 | margin: 5px auto; 49 | width: 60%; 50 | font-size: 1.2rem; 51 | } 52 | 53 | .controls-area { 54 | width: 85%; 55 | margin: 30px auto; 56 | } 57 | 58 | #score { 59 | color: green; 60 | font-weight: bold; 61 | } 62 | 63 | #incorrect { 64 | color: red; 65 | font-weight: bold; 66 | } 67 | 68 | .answer-message { 69 | display: none; 70 | font-size: 1rem; 71 | } 72 | 73 | #answer-box { 74 | border: none; 75 | color: #445361; 76 | display: inline-block; 77 | height: 40px; 78 | width: 80px; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .scores { 83 | display: inline-block; 84 | padding: 25px; 85 | } 86 | 87 | /* --------- Buttons */ 88 | 89 | .btn { 90 | width: 220px; 91 | height: 60px; 92 | font-family: "Raleway", sans-serif; 93 | text-transform: uppercase; 94 | letter-spacing: 1.2px; 95 | color: white; 96 | } 97 | 98 | .btn:focus { 99 | outline: none; 100 | } 101 | 102 | .btn--big { 103 | padding-top: 10px; 104 | border-radius: 50%; 105 | background-color: white; 106 | border: 10px solid; 107 | width: 100px; 108 | height: 100px; 109 | font-size: 3.2rem; 110 | margin: 0 30px; 111 | transition: all 0.5s; 112 | } 113 | 114 | .btn--big::after{ 115 | content: attr(data-type); 116 | font-size: 1rem; 117 | color: #445361; 118 | position: relative; 119 | left: -0.5em; 120 | } 121 | 122 | .btn--blue { 123 | border-color: blue; 124 | color: blue; 125 | } 126 | 127 | .btn--blue:active, 128 | .btn--blue:hover { 129 | background-color: darkblue; 130 | color: white; 131 | } 132 | 133 | .btn--orange { 134 | border-color: orange; 135 | color: orange; 136 | } 137 | 138 | .btn--orange:active, 139 | .btn--orange:hover { 140 | background-color: darkorange; 141 | color: white; 142 | } 143 | 144 | .btn--red { 145 | border-color: red; 146 | color: red; 147 | } 148 | 149 | .btn--red:active, 150 | .btn--red:hover { 151 | background-color: darkred; 152 | color: white; 153 | } 154 | 155 | .btn--green { 156 | border-color: green; 157 | color: green; 158 | } 159 | 160 | .btn--green:active, 161 | .btn--green:hover { 162 | background-color: darkgreen; 163 | color: white; 164 | } 165 | 166 | .btn--gray { 167 | margin-top: 25px; 168 | background-color: #445361; 169 | border: 1px transparent; 170 | border-radius: 20px; 171 | } 172 | 173 | .btn--gray:active, 174 | .btn--gray:hover { 175 | background-color: #0d1013; 176 | } 177 | 178 | /* --------- Media queries */ 179 | 180 | @media (max-width: 414px) { 181 | .controls-area { 182 | width: 100%; 183 | } 184 | 185 | .btn--big { 186 | margin: 0 10px; 187 | padding: 5px; 188 | border: 5px solid; 189 | width: 50px; 190 | height: 50px; 191 | font-size: 1.5rem; 192 | } 193 | 194 | .btn--big::after { 195 | font-size: 0.6rem; 196 | left: -0.7rem; 197 | } 198 | 199 | .question-area { 200 | padding: 10% 0; 201 | width: 100%; 202 | } 203 | 204 | .question-area span { 205 | padding: 0; 206 | } 207 | 208 | .answer-message { 209 | display: block; 210 | } 211 | 212 | #answer-box { 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | .btn--gray { 217 | margin-top: 0; 218 | } 219 | 220 | .score-area { 221 | width: 100%; 222 | } 223 | 224 | .scores { 225 | margin: 0.5em auto; 226 | display: block; 227 | padding: 5px; 228 | } 229 | 230 | .heading { 231 | font-size: 2rem; 232 | } 233 | } 234 | 235 | @media (max-width: 320px) { 236 | .game-area { 237 | height: 70vh; 238 | } 239 | 240 | .controls-area { 241 | width: 75%; 242 | margin: 10px auto; 243 | } 244 | 245 | .btn--big { 246 | margin: 10px 10px; 247 | } 248 | .question-area { 249 | padding: 10px 0; 250 | } 251 | 252 | } -------------------------------------------------------------------------------- /02-adding-some-javascript/03-generating-random-numbers/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/02-adding-some-javascript/03-generating-random-numbers/assets/images/logo.png -------------------------------------------------------------------------------- /02-adding-some-javascript/03-generating-random-numbers/assets/js/script.js: -------------------------------------------------------------------------------- 1 | // Wait for the DOM to finish loading before running the game 2 | // Get the button elements and add event listeners to them 3 | 4 | document.addEventListener("DOMContentLoaded", function() { 5 | let buttons = document.getElementsByTagName("button"); 6 | 7 | for (let button of buttons) { 8 | button.addEventListener("click", function() { 9 | if (this.getAttribute("data-type") === "submit") { 10 | alert("You clicked Submit!"); 11 | } else { 12 | let gameType = this.getAttribute("data-type"); 13 | alert(`You clicked ${gameType}`); 14 | } 15 | }); 16 | } 17 | 18 | }); 19 | 20 | /** 21 | * The main game "loop", called when the script is first loaded 22 | * and after the user's answer has been processed 23 | */ 24 | function runGame() { 25 | 26 | // Creates two random numbers between 1 and 25 27 | let num1 = Math.floor(Math.random() * 25) + 1; 28 | let num2 = Math.floor(Math.random() * 25) + 1; 29 | 30 | } 31 | 32 | function checkAnswer() { 33 | 34 | } 35 | 36 | function calculateCorrectAnswer() { 37 | 38 | } 39 | 40 | function incrementScore() { 41 | 42 | } 43 | 44 | function incrementWrongAnswer() { 45 | 46 | } 47 | 48 | function displayAdditionQuestion(operand1, operand2) { 49 | 50 | } 51 | 52 | function displaySubtractQuestion() { 53 | 54 | } 55 | 56 | function displayMultiplyQuestion() { 57 | 58 | } -------------------------------------------------------------------------------- /02-adding-some-javascript/03-generating-random-numbers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/01-displaying-the-addition-question/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* --------- Global style */ 2 | 3 | body { 4 | background-color: white; 5 | font-family: "Raleway", sans-serif; 6 | color: #445361; 7 | text-align: center; 8 | } 9 | 10 | /* --------- Heading */ 11 | 12 | .heading { 13 | text-align: center; 14 | font-size: 2.5rem; 15 | } 16 | 17 | .logo { 18 | height: 40px; 19 | padding-right: 5px; 20 | } 21 | 22 | /* --------- Game layout */ 23 | 24 | .game-area { 25 | background-color: #E6ECF0; 26 | box-sizing: border-box; 27 | width: 85%; 28 | height: 65vh; 29 | max-height: 450px; 30 | max-width: 830px; 31 | margin-left: auto; 32 | margin-right: auto; 33 | padding: 1%; 34 | } 35 | 36 | .question-area { 37 | width: 50%; 38 | font-size: 2rem; 39 | margin: auto; 40 | padding: 50px 0; 41 | } 42 | 43 | .question-area span { 44 | padding: 0 15px; 45 | } 46 | 47 | .score-area { 48 | margin: 5px auto; 49 | width: 60%; 50 | font-size: 1.2rem; 51 | } 52 | 53 | .controls-area { 54 | width: 85%; 55 | margin: 30px auto; 56 | } 57 | 58 | #score { 59 | color: green; 60 | font-weight: bold; 61 | } 62 | 63 | #incorrect { 64 | color: red; 65 | font-weight: bold; 66 | } 67 | 68 | .answer-message { 69 | display: none; 70 | font-size: 1rem; 71 | } 72 | 73 | #answer-box { 74 | border: none; 75 | color: #445361; 76 | display: inline-block; 77 | height: 40px; 78 | width: 80px; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .scores { 83 | display: inline-block; 84 | padding: 25px; 85 | } 86 | 87 | /* --------- Buttons */ 88 | 89 | .btn { 90 | width: 220px; 91 | height: 60px; 92 | font-family: "Raleway", sans-serif; 93 | text-transform: uppercase; 94 | letter-spacing: 1.2px; 95 | color: white; 96 | } 97 | 98 | .btn:focus { 99 | outline: none; 100 | } 101 | 102 | .btn--big { 103 | padding-top: 10px; 104 | border-radius: 50%; 105 | background-color: white; 106 | border: 10px solid; 107 | width: 100px; 108 | height: 100px; 109 | font-size: 3.2rem; 110 | margin: 0 30px; 111 | transition: all 0.5s; 112 | } 113 | 114 | .btn--big::after{ 115 | content: attr(data-type); 116 | font-size: 1rem; 117 | color: #445361; 118 | position: relative; 119 | left: -0.5em; 120 | } 121 | 122 | .btn--blue { 123 | border-color: blue; 124 | color: blue; 125 | } 126 | 127 | .btn--blue:active, 128 | .btn--blue:hover { 129 | background-color: darkblue; 130 | color: white; 131 | } 132 | 133 | .btn--orange { 134 | border-color: orange; 135 | color: orange; 136 | } 137 | 138 | .btn--orange:active, 139 | .btn--orange:hover { 140 | background-color: darkorange; 141 | color: white; 142 | } 143 | 144 | .btn--red { 145 | border-color: red; 146 | color: red; 147 | } 148 | 149 | .btn--red:active, 150 | .btn--red:hover { 151 | background-color: darkred; 152 | color: white; 153 | } 154 | 155 | .btn--green { 156 | border-color: green; 157 | color: green; 158 | } 159 | 160 | .btn--green:active, 161 | .btn--green:hover { 162 | background-color: darkgreen; 163 | color: white; 164 | } 165 | 166 | .btn--gray { 167 | margin-top: 25px; 168 | background-color: #445361; 169 | border: 1px transparent; 170 | border-radius: 20px; 171 | } 172 | 173 | .btn--gray:active, 174 | .btn--gray:hover { 175 | background-color: #0d1013; 176 | } 177 | 178 | /* --------- Media queries */ 179 | 180 | @media (max-width: 414px) { 181 | .controls-area { 182 | width: 100%; 183 | } 184 | 185 | .btn--big { 186 | margin: 0 10px; 187 | padding: 5px; 188 | border: 5px solid; 189 | width: 50px; 190 | height: 50px; 191 | font-size: 1.5rem; 192 | } 193 | 194 | .btn--big::after { 195 | font-size: 0.6rem; 196 | left: -0.7rem; 197 | } 198 | 199 | .question-area { 200 | padding: 10% 0; 201 | width: 100%; 202 | } 203 | 204 | .question-area span { 205 | padding: 0; 206 | } 207 | 208 | .answer-message { 209 | display: block; 210 | } 211 | 212 | #answer-box { 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | .btn--gray { 217 | margin-top: 0; 218 | } 219 | 220 | .score-area { 221 | width: 100%; 222 | } 223 | 224 | .scores { 225 | margin: 0.5em auto; 226 | display: block; 227 | padding: 5px; 228 | } 229 | 230 | .heading { 231 | font-size: 2rem; 232 | } 233 | } 234 | 235 | @media (max-width: 320px) { 236 | .game-area { 237 | height: 70vh; 238 | } 239 | 240 | .controls-area { 241 | width: 75%; 242 | margin: 10px auto; 243 | } 244 | 245 | .btn--big { 246 | margin: 10px 10px; 247 | } 248 | .question-area { 249 | padding: 10px 0; 250 | } 251 | 252 | } -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/01-displaying-the-addition-question/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/03-displaying-the-question-and-answer/01-displaying-the-addition-question/assets/images/logo.png -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/01-displaying-the-addition-question/assets/js/script.js: -------------------------------------------------------------------------------- 1 | // Wait for the DOM to finish loading before running the game 2 | // Get the button elements and add event listeners to them 3 | 4 | document.addEventListener("DOMContentLoaded", function() { 5 | let buttons = document.getElementsByTagName("button"); 6 | 7 | for (let button of buttons) { 8 | button.addEventListener("click", function() { 9 | if (this.getAttribute("data-type") === "submit") { 10 | alert("You clicked Submit!"); 11 | } else { 12 | let gameType = this.getAttribute("data-type"); 13 | runGame(gameType); 14 | } 15 | }); 16 | } 17 | 18 | runGame("addition"); 19 | 20 | }); 21 | 22 | /** 23 | * The main game "loop", called when the script is first loaded 24 | * and after the user's answer has been processed 25 | */ 26 | function runGame(gameType) { 27 | 28 | // Creates two random numbers between 1 and 25 29 | let num1 = Math.floor(Math.random() * 25) + 1; 30 | let num2 = Math.floor(Math.random() * 25) + 1; 31 | 32 | if (gameType === "addition") { 33 | displayAdditionQuestion(num1, num2); 34 | } else { 35 | alert(`Unknown game type: ${gameType}`); 36 | throw `Unknown game type: ${gameType}. Aborting!`; 37 | } 38 | 39 | } 40 | 41 | function checkAnswer() { 42 | 43 | } 44 | 45 | function calculateCorrectAnswer() { 46 | 47 | } 48 | 49 | function incrementScore() { 50 | 51 | } 52 | 53 | function incrementWrongAnswer() { 54 | 55 | } 56 | 57 | function displayAdditionQuestion(operand1, operand2) { 58 | 59 | document.getElementById('operand1').textContent = operand1; 60 | document.getElementById('operand2').textContent = operand2; 61 | document.getElementById('operator').textContent = "+"; 62 | 63 | } 64 | 65 | function displaySubtractQuestion() { 66 | 67 | } 68 | 69 | function displayMultiplyQuestion() { 70 | 71 | } -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/01-displaying-the-addition-question/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/02-calculating-the-answer/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* --------- Global style */ 2 | 3 | body { 4 | background-color: white; 5 | font-family: "Raleway", sans-serif; 6 | color: #445361; 7 | text-align: center; 8 | } 9 | 10 | /* --------- Heading */ 11 | 12 | .heading { 13 | text-align: center; 14 | font-size: 2.5rem; 15 | } 16 | 17 | .logo { 18 | height: 40px; 19 | padding-right: 5px; 20 | } 21 | 22 | /* --------- Game layout */ 23 | 24 | .game-area { 25 | background-color: #E6ECF0; 26 | box-sizing: border-box; 27 | width: 85%; 28 | height: 65vh; 29 | max-height: 450px; 30 | max-width: 830px; 31 | margin-left: auto; 32 | margin-right: auto; 33 | padding: 1%; 34 | } 35 | 36 | .question-area { 37 | width: 50%; 38 | font-size: 2rem; 39 | margin: auto; 40 | padding: 50px 0; 41 | } 42 | 43 | .question-area span { 44 | padding: 0 15px; 45 | } 46 | 47 | .score-area { 48 | margin: 5px auto; 49 | width: 60%; 50 | font-size: 1.2rem; 51 | } 52 | 53 | .controls-area { 54 | width: 85%; 55 | margin: 30px auto; 56 | } 57 | 58 | #score { 59 | color: green; 60 | font-weight: bold; 61 | } 62 | 63 | #incorrect { 64 | color: red; 65 | font-weight: bold; 66 | } 67 | 68 | .answer-message { 69 | display: none; 70 | font-size: 1rem; 71 | } 72 | 73 | #answer-box { 74 | border: none; 75 | color: #445361; 76 | display: inline-block; 77 | height: 40px; 78 | width: 80px; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .scores { 83 | display: inline-block; 84 | padding: 25px; 85 | } 86 | 87 | /* --------- Buttons */ 88 | 89 | .btn { 90 | width: 220px; 91 | height: 60px; 92 | font-family: "Raleway", sans-serif; 93 | text-transform: uppercase; 94 | letter-spacing: 1.2px; 95 | color: white; 96 | } 97 | 98 | .btn:focus { 99 | outline: none; 100 | } 101 | 102 | .btn--big { 103 | padding-top: 10px; 104 | border-radius: 50%; 105 | background-color: white; 106 | border: 10px solid; 107 | width: 100px; 108 | height: 100px; 109 | font-size: 3.2rem; 110 | margin: 0 30px; 111 | transition: all 0.5s; 112 | } 113 | 114 | .btn--big::after{ 115 | content: attr(data-type); 116 | font-size: 1rem; 117 | color: #445361; 118 | position: relative; 119 | left: -0.5em; 120 | } 121 | 122 | .btn--blue { 123 | border-color: blue; 124 | color: blue; 125 | } 126 | 127 | .btn--blue:active, 128 | .btn--blue:hover { 129 | background-color: darkblue; 130 | color: white; 131 | } 132 | 133 | .btn--orange { 134 | border-color: orange; 135 | color: orange; 136 | } 137 | 138 | .btn--orange:active, 139 | .btn--orange:hover { 140 | background-color: darkorange; 141 | color: white; 142 | } 143 | 144 | .btn--red { 145 | border-color: red; 146 | color: red; 147 | } 148 | 149 | .btn--red:active, 150 | .btn--red:hover { 151 | background-color: darkred; 152 | color: white; 153 | } 154 | 155 | .btn--green { 156 | border-color: green; 157 | color: green; 158 | } 159 | 160 | .btn--green:active, 161 | .btn--green:hover { 162 | background-color: darkgreen; 163 | color: white; 164 | } 165 | 166 | .btn--gray { 167 | margin-top: 25px; 168 | background-color: #445361; 169 | border: 1px transparent; 170 | border-radius: 20px; 171 | } 172 | 173 | .btn--gray:active, 174 | .btn--gray:hover { 175 | background-color: #0d1013; 176 | } 177 | 178 | /* --------- Media queries */ 179 | 180 | @media (max-width: 414px) { 181 | .controls-area { 182 | width: 100%; 183 | } 184 | 185 | .btn--big { 186 | margin: 0 10px; 187 | padding: 5px; 188 | border: 5px solid; 189 | width: 50px; 190 | height: 50px; 191 | font-size: 1.5rem; 192 | } 193 | 194 | .btn--big::after { 195 | font-size: 0.6rem; 196 | left: -0.7rem; 197 | } 198 | 199 | .question-area { 200 | padding: 10% 0; 201 | width: 100%; 202 | } 203 | 204 | .question-area span { 205 | padding: 0; 206 | } 207 | 208 | .answer-message { 209 | display: block; 210 | } 211 | 212 | #answer-box { 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | .btn--gray { 217 | margin-top: 0; 218 | } 219 | 220 | .score-area { 221 | width: 100%; 222 | } 223 | 224 | .scores { 225 | margin: 0.5em auto; 226 | display: block; 227 | padding: 5px; 228 | } 229 | 230 | .heading { 231 | font-size: 2rem; 232 | } 233 | } 234 | 235 | @media (max-width: 320px) { 236 | .game-area { 237 | height: 70vh; 238 | } 239 | 240 | .controls-area { 241 | width: 75%; 242 | margin: 10px auto; 243 | } 244 | 245 | .btn--big { 246 | margin: 10px 10px; 247 | } 248 | .question-area { 249 | padding: 10px 0; 250 | } 251 | 252 | } -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/02-calculating-the-answer/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/03-displaying-the-question-and-answer/02-calculating-the-answer/assets/images/logo.png -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/02-calculating-the-answer/assets/js/script.js: -------------------------------------------------------------------------------- 1 | // Wait for the DOM to finish loading before running the game 2 | // Get the button elements and add event listeners to them 3 | 4 | document.addEventListener("DOMContentLoaded", function() { 5 | let buttons = document.getElementsByTagName("button"); 6 | 7 | for (let button of buttons) { 8 | button.addEventListener("click", function() { 9 | if (this.getAttribute("data-type") === "submit") { 10 | alert("You clicked Submit!"); 11 | } else { 12 | let gameType = this.getAttribute("data-type"); 13 | runGame(gameType); 14 | } 15 | }); 16 | } 17 | 18 | runGame("addition"); 19 | 20 | }); 21 | 22 | /** 23 | * The main game "loop", called when the script is first loaded 24 | * and after the user's answer has been processed 25 | */ 26 | function runGame(gameType) { 27 | 28 | // Creates two random numbers between 1 and 25 29 | let num1 = Math.floor(Math.random() * 25) + 1; 30 | let num2 = Math.floor(Math.random() * 25) + 1; 31 | 32 | if (gameType === "addition") { 33 | displayAdditionQuestion(num1, num2); 34 | } else { 35 | alert(`Unknown game type: ${gameType}`); 36 | throw `Unknown game type: ${gameType}. Aborting!`; 37 | } 38 | 39 | } 40 | 41 | function checkAnswer() { 42 | 43 | } 44 | 45 | /** 46 | * Gets the operands (the numbers) and the operator (plus, minus etc) 47 | * directly from the dom, and returns the correct answer. 48 | */ 49 | function calculateCorrectAnswer() { 50 | 51 | let operand1 = parseInt(document.getElementById('operand1').innerText); 52 | let operand2 = parseInt(document.getElementById('operand2').innerText); 53 | let operator = document.getElementById("operator").innerText; 54 | 55 | if (operator === "+") { 56 | return [operand1 + operand2, "addition"]; 57 | } else { 58 | alert(`Unimplemented operator ${operator}`); 59 | throw `Unimplemented operator ${operator}. Aborting!`; 60 | } 61 | 62 | } 63 | 64 | function incrementScore() { 65 | 66 | } 67 | 68 | function incrementWrongAnswer() { 69 | 70 | } 71 | 72 | function displayAdditionQuestion(operand1, operand2) { 73 | 74 | document.getElementById('operand1').textContent = operand1; 75 | document.getElementById('operand2').textContent = operand2; 76 | document.getElementById('operator').textContent = "+"; 77 | 78 | } 79 | 80 | function displaySubtractQuestion() { 81 | 82 | } 83 | 84 | function displayMultiplyQuestion() { 85 | 86 | } -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/02-calculating-the-answer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/03-checking-the-answer/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* --------- Global style */ 2 | 3 | body { 4 | background-color: white; 5 | font-family: "Raleway", sans-serif; 6 | color: #445361; 7 | text-align: center; 8 | } 9 | 10 | /* --------- Heading */ 11 | 12 | .heading { 13 | text-align: center; 14 | font-size: 2.5rem; 15 | } 16 | 17 | .logo { 18 | height: 40px; 19 | padding-right: 5px; 20 | } 21 | 22 | /* --------- Game layout */ 23 | 24 | .game-area { 25 | background-color: #E6ECF0; 26 | box-sizing: border-box; 27 | width: 85%; 28 | height: 65vh; 29 | max-height: 450px; 30 | max-width: 830px; 31 | margin-left: auto; 32 | margin-right: auto; 33 | padding: 1%; 34 | } 35 | 36 | .question-area { 37 | width: 50%; 38 | font-size: 2rem; 39 | margin: auto; 40 | padding: 50px 0; 41 | } 42 | 43 | .question-area span { 44 | padding: 0 15px; 45 | } 46 | 47 | .score-area { 48 | margin: 5px auto; 49 | width: 60%; 50 | font-size: 1.2rem; 51 | } 52 | 53 | .controls-area { 54 | width: 85%; 55 | margin: 30px auto; 56 | } 57 | 58 | #score { 59 | color: green; 60 | font-weight: bold; 61 | } 62 | 63 | #incorrect { 64 | color: red; 65 | font-weight: bold; 66 | } 67 | 68 | .answer-message { 69 | display: none; 70 | font-size: 1rem; 71 | } 72 | 73 | #answer-box { 74 | border: none; 75 | color: #445361; 76 | display: inline-block; 77 | height: 40px; 78 | width: 80px; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .scores { 83 | display: inline-block; 84 | padding: 25px; 85 | } 86 | 87 | /* --------- Buttons */ 88 | 89 | .btn { 90 | width: 220px; 91 | height: 60px; 92 | font-family: "Raleway", sans-serif; 93 | text-transform: uppercase; 94 | letter-spacing: 1.2px; 95 | color: white; 96 | } 97 | 98 | .btn:focus { 99 | outline: none; 100 | } 101 | 102 | .btn--big { 103 | padding-top: 10px; 104 | border-radius: 50%; 105 | background-color: white; 106 | border: 10px solid; 107 | width: 100px; 108 | height: 100px; 109 | font-size: 3.2rem; 110 | margin: 0 30px; 111 | transition: all 0.5s; 112 | } 113 | 114 | .btn--big::after{ 115 | content: attr(data-type); 116 | font-size: 1rem; 117 | color: #445361; 118 | position: relative; 119 | left: -0.5em; 120 | } 121 | 122 | .btn--blue { 123 | border-color: blue; 124 | color: blue; 125 | } 126 | 127 | .btn--blue:active, 128 | .btn--blue:hover { 129 | background-color: darkblue; 130 | color: white; 131 | } 132 | 133 | .btn--orange { 134 | border-color: orange; 135 | color: orange; 136 | } 137 | 138 | .btn--orange:active, 139 | .btn--orange:hover { 140 | background-color: darkorange; 141 | color: white; 142 | } 143 | 144 | .btn--red { 145 | border-color: red; 146 | color: red; 147 | } 148 | 149 | .btn--red:active, 150 | .btn--red:hover { 151 | background-color: darkred; 152 | color: white; 153 | } 154 | 155 | .btn--green { 156 | border-color: green; 157 | color: green; 158 | } 159 | 160 | .btn--green:active, 161 | .btn--green:hover { 162 | background-color: darkgreen; 163 | color: white; 164 | } 165 | 166 | .btn--gray { 167 | margin-top: 25px; 168 | background-color: #445361; 169 | border: 1px transparent; 170 | border-radius: 20px; 171 | } 172 | 173 | .btn--gray:active, 174 | .btn--gray:hover { 175 | background-color: #0d1013; 176 | } 177 | 178 | /* --------- Media queries */ 179 | 180 | @media (max-width: 414px) { 181 | .controls-area { 182 | width: 100%; 183 | } 184 | 185 | .btn--big { 186 | margin: 0 10px; 187 | padding: 5px; 188 | border: 5px solid; 189 | width: 50px; 190 | height: 50px; 191 | font-size: 1.5rem; 192 | } 193 | 194 | .btn--big::after { 195 | font-size: 0.6rem; 196 | left: -0.7rem; 197 | } 198 | 199 | .question-area { 200 | padding: 10% 0; 201 | width: 100%; 202 | } 203 | 204 | .question-area span { 205 | padding: 0; 206 | } 207 | 208 | .answer-message { 209 | display: block; 210 | } 211 | 212 | #answer-box { 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | .btn--gray { 217 | margin-top: 0; 218 | } 219 | 220 | .score-area { 221 | width: 100%; 222 | } 223 | 224 | .scores { 225 | margin: 0.5em auto; 226 | display: block; 227 | padding: 5px; 228 | } 229 | 230 | .heading { 231 | font-size: 2rem; 232 | } 233 | } 234 | 235 | @media (max-width: 320px) { 236 | .game-area { 237 | height: 70vh; 238 | } 239 | 240 | .controls-area { 241 | width: 75%; 242 | margin: 10px auto; 243 | } 244 | 245 | .btn--big { 246 | margin: 10px 10px; 247 | } 248 | .question-area { 249 | padding: 10px 0; 250 | } 251 | 252 | } -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/03-checking-the-answer/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/03-displaying-the-question-and-answer/03-checking-the-answer/assets/images/logo.png -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/03-checking-the-answer/assets/js/script.js: -------------------------------------------------------------------------------- 1 | // Wait for the DOM to finish loading before running the game 2 | // Get the button elements and add event listeners to them 3 | 4 | document.addEventListener("DOMContentLoaded", function() { 5 | let buttons = document.getElementsByTagName("button"); 6 | 7 | for (let button of buttons) { 8 | button.addEventListener("click", function() { 9 | if (this.getAttribute("data-type") === "submit") { 10 | checkAnswer(); 11 | } else { 12 | let gameType = this.getAttribute("data-type"); 13 | runGame(gameType); 14 | } 15 | }); 16 | } 17 | 18 | runGame("addition"); 19 | 20 | }); 21 | 22 | /** 23 | * The main game "loop", called when the script is first loaded 24 | * and after the user's answer has been processed 25 | */ 26 | function runGame(gameType) { 27 | 28 | // Creates two random numbers between 1 and 25 29 | let num1 = Math.floor(Math.random() * 25) + 1; 30 | let num2 = Math.floor(Math.random() * 25) + 1; 31 | 32 | if (gameType === "addition") { 33 | displayAdditionQuestion(num1, num2); 34 | } else { 35 | alert(`Unknown game type: ${gameType}`); 36 | throw `Unknown game type: ${gameType}. Aborting!`; 37 | } 38 | 39 | } 40 | 41 | /** 42 | * Checks the answer agaist the first element in 43 | * the returned calculateCorrectAnswer array 44 | */ 45 | function checkAnswer() { 46 | 47 | let userAnswer = parseInt(document.getElementById("answer-box").value); 48 | let calculatedAnswer = calculateCorrectAnswer(); 49 | let isCorrect = userAnswer === calculatedAnswer[0]; 50 | 51 | if (isCorrect) { 52 | alert("Hey! You got it right! :D"); 53 | } else { 54 | alert(`Awwww.... you answered ${userAnswer}. The correct answer was ${calculatedAnswer[0]}!`); 55 | } 56 | 57 | runGame(calculatedAnswer[1]); 58 | 59 | } 60 | 61 | /** 62 | * Gets the operands (the numbers) and the operator (plus, minus etc) 63 | * directly from the dom, and returns the correct answer. 64 | */ 65 | function calculateCorrectAnswer() { 66 | 67 | let operand1 = parseInt(document.getElementById('operand1').innerText); 68 | let operand2 = parseInt(document.getElementById('operand2').innerText); 69 | let operator = document.getElementById("operator").innerText; 70 | 71 | if (operator === "+") { 72 | return [operand1 + operand2, "addition"]; 73 | } else { 74 | alert(`Unimplemented operator ${operator}`); 75 | throw `Unimplemented operator ${operator}. Aborting!`; 76 | } 77 | 78 | } 79 | 80 | function incrementScore() { 81 | 82 | } 83 | 84 | function incrementWrongAnswer() { 85 | 86 | } 87 | 88 | function displayAdditionQuestion(operand1, operand2) { 89 | 90 | document.getElementById('operand1').textContent = operand1; 91 | document.getElementById('operand2').textContent = operand2; 92 | document.getElementById('operator').textContent = "+"; 93 | 94 | } 95 | 96 | function displaySubtractQuestion() { 97 | 98 | } 99 | 100 | function displayMultiplyQuestion() { 101 | 102 | } -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/03-checking-the-answer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/04-updating-the-scores/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* --------- Global style */ 2 | 3 | body { 4 | background-color: white; 5 | font-family: "Raleway", sans-serif; 6 | color: #445361; 7 | text-align: center; 8 | } 9 | 10 | /* --------- Heading */ 11 | 12 | .heading { 13 | text-align: center; 14 | font-size: 2.5rem; 15 | } 16 | 17 | .logo { 18 | height: 40px; 19 | padding-right: 5px; 20 | } 21 | 22 | /* --------- Game layout */ 23 | 24 | .game-area { 25 | background-color: #E6ECF0; 26 | box-sizing: border-box; 27 | width: 85%; 28 | height: 65vh; 29 | max-height: 450px; 30 | max-width: 830px; 31 | margin-left: auto; 32 | margin-right: auto; 33 | padding: 1%; 34 | } 35 | 36 | .question-area { 37 | width: 50%; 38 | font-size: 2rem; 39 | margin: auto; 40 | padding: 50px 0; 41 | } 42 | 43 | .question-area span { 44 | padding: 0 15px; 45 | } 46 | 47 | .score-area { 48 | margin: 5px auto; 49 | width: 60%; 50 | font-size: 1.2rem; 51 | } 52 | 53 | .controls-area { 54 | width: 85%; 55 | margin: 30px auto; 56 | } 57 | 58 | #score { 59 | color: green; 60 | font-weight: bold; 61 | } 62 | 63 | #incorrect { 64 | color: red; 65 | font-weight: bold; 66 | } 67 | 68 | .answer-message { 69 | display: none; 70 | font-size: 1rem; 71 | } 72 | 73 | #answer-box { 74 | border: none; 75 | color: #445361; 76 | display: inline-block; 77 | height: 40px; 78 | width: 80px; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .scores { 83 | display: inline-block; 84 | padding: 25px; 85 | } 86 | 87 | /* --------- Buttons */ 88 | 89 | .btn { 90 | width: 220px; 91 | height: 60px; 92 | font-family: "Raleway", sans-serif; 93 | text-transform: uppercase; 94 | letter-spacing: 1.2px; 95 | color: white; 96 | } 97 | 98 | .btn:focus { 99 | outline: none; 100 | } 101 | 102 | .btn--big { 103 | padding-top: 10px; 104 | border-radius: 50%; 105 | background-color: white; 106 | border: 10px solid; 107 | width: 100px; 108 | height: 100px; 109 | font-size: 3.2rem; 110 | margin: 0 30px; 111 | transition: all 0.5s; 112 | } 113 | 114 | .btn--big::after{ 115 | content: attr(data-type); 116 | font-size: 1rem; 117 | color: #445361; 118 | position: relative; 119 | left: -0.5em; 120 | } 121 | 122 | .btn--blue { 123 | border-color: blue; 124 | color: blue; 125 | } 126 | 127 | .btn--blue:active, 128 | .btn--blue:hover { 129 | background-color: darkblue; 130 | color: white; 131 | } 132 | 133 | .btn--orange { 134 | border-color: orange; 135 | color: orange; 136 | } 137 | 138 | .btn--orange:active, 139 | .btn--orange:hover { 140 | background-color: darkorange; 141 | color: white; 142 | } 143 | 144 | .btn--red { 145 | border-color: red; 146 | color: red; 147 | } 148 | 149 | .btn--red:active, 150 | .btn--red:hover { 151 | background-color: darkred; 152 | color: white; 153 | } 154 | 155 | .btn--green { 156 | border-color: green; 157 | color: green; 158 | } 159 | 160 | .btn--green:active, 161 | .btn--green:hover { 162 | background-color: darkgreen; 163 | color: white; 164 | } 165 | 166 | .btn--gray { 167 | margin-top: 25px; 168 | background-color: #445361; 169 | border: 1px transparent; 170 | border-radius: 20px; 171 | } 172 | 173 | .btn--gray:active, 174 | .btn--gray:hover { 175 | background-color: #0d1013; 176 | } 177 | 178 | /* --------- Media queries */ 179 | 180 | @media (max-width: 414px) { 181 | .controls-area { 182 | width: 100%; 183 | } 184 | 185 | .btn--big { 186 | margin: 0 10px; 187 | padding: 5px; 188 | border: 5px solid; 189 | width: 50px; 190 | height: 50px; 191 | font-size: 1.5rem; 192 | } 193 | 194 | .btn--big::after { 195 | font-size: 0.6rem; 196 | left: -0.7rem; 197 | } 198 | 199 | .question-area { 200 | padding: 10% 0; 201 | width: 100%; 202 | } 203 | 204 | .question-area span { 205 | padding: 0; 206 | } 207 | 208 | .answer-message { 209 | display: block; 210 | } 211 | 212 | #answer-box { 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | .btn--gray { 217 | margin-top: 0; 218 | } 219 | 220 | .score-area { 221 | width: 100%; 222 | } 223 | 224 | .scores { 225 | margin: 0.5em auto; 226 | display: block; 227 | padding: 5px; 228 | } 229 | 230 | .heading { 231 | font-size: 2rem; 232 | } 233 | } 234 | 235 | @media (max-width: 320px) { 236 | .game-area { 237 | height: 70vh; 238 | } 239 | 240 | .controls-area { 241 | width: 75%; 242 | margin: 10px auto; 243 | } 244 | 245 | .btn--big { 246 | margin: 10px 10px; 247 | } 248 | .question-area { 249 | padding: 10px 0; 250 | } 251 | 252 | } -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/04-updating-the-scores/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/03-displaying-the-question-and-answer/04-updating-the-scores/assets/images/logo.png -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/04-updating-the-scores/assets/js/script.js: -------------------------------------------------------------------------------- 1 | // Wait for the DOM to finish loading before running the game 2 | // Get the button elements and add event listeners to them 3 | 4 | document.addEventListener("DOMContentLoaded", function() { 5 | let buttons = document.getElementsByTagName("button"); 6 | 7 | for (let button of buttons) { 8 | button.addEventListener("click", function() { 9 | if (this.getAttribute("data-type") === "submit") { 10 | checkAnswer(); 11 | } else { 12 | let gameType = this.getAttribute("data-type"); 13 | runGame(gameType); 14 | } 15 | }); 16 | } 17 | 18 | runGame("addition"); 19 | 20 | }); 21 | 22 | /** 23 | * The main game "loop", called when the script is first loaded 24 | * and after the user's answer has been processed 25 | */ 26 | function runGame(gameType) { 27 | 28 | // Creates two random numbers between 1 and 25 29 | let num1 = Math.floor(Math.random() * 25) + 1; 30 | let num2 = Math.floor(Math.random() * 25) + 1; 31 | 32 | if (gameType === "addition") { 33 | displayAdditionQuestion(num1, num2); 34 | } else { 35 | alert(`Unknown game type: ${gameType}`); 36 | throw `Unknown game type: ${gameType}. Aborting!`; 37 | } 38 | 39 | } 40 | 41 | /** 42 | * Checks the answer against the first element in 43 | * the returned calculateCorrectAnswer array 44 | */ 45 | function checkAnswer() { 46 | 47 | let userAnswer = parseInt(document.getElementById("answer-box").value); 48 | let calculatedAnswer = calculateCorrectAnswer(); 49 | let isCorrect = userAnswer === calculatedAnswer[0]; 50 | 51 | if (isCorrect) { 52 | alert("Hey! You got it right! :D"); 53 | incrementScore(); 54 | } else { 55 | alert(`Awwww.... you answered ${userAnswer}. The correct answer was ${calculatedAnswer[0]}!`); 56 | incrementWrongAnswer(); 57 | } 58 | 59 | runGame(calculatedAnswer[1]); 60 | 61 | } 62 | 63 | /** 64 | * Gets the operands (the numbers) and the operator (plus, minus etc) 65 | * directly from the dom, and returns the correct answer. 66 | */ 67 | function calculateCorrectAnswer() { 68 | 69 | let operand1 = parseInt(document.getElementById('operand1').innerText); 70 | let operand2 = parseInt(document.getElementById('operand2').innerText); 71 | let operator = document.getElementById("operator").innerText; 72 | 73 | if (operator === "+") { 74 | return [operand1 + operand2, "addition"]; 75 | } else { 76 | alert(`Unimplemented operator ${operator}`); 77 | throw `Unimplemented operator ${operator}. Aborting!`; 78 | } 79 | 80 | } 81 | 82 | /** 83 | * Gets the current score from the DOM and increments it by 1 84 | */ 85 | function incrementScore() { 86 | 87 | let oldScore = parseInt(document.getElementById("score").innerText); 88 | document.getElementById("score").innerText = ++oldScore; 89 | 90 | } 91 | 92 | /** 93 | * Gets the current tally of incorrect answers from the DOM and increments it by 1 94 | */ 95 | function incrementWrongAnswer() { 96 | 97 | let oldScore = parseInt(document.getElementById("incorrect").innerText); 98 | document.getElementById("incorrect").innerText = ++oldScore; 99 | 100 | } 101 | 102 | function displayAdditionQuestion(operand1, operand2) { 103 | 104 | document.getElementById('operand1').textContent = operand1; 105 | document.getElementById('operand2').textContent = operand2; 106 | document.getElementById('operator').textContent = "+"; 107 | 108 | } 109 | 110 | function displaySubtractQuestion() { 111 | 112 | } 113 | 114 | function displayMultiplyQuestion() { 115 | 116 | } -------------------------------------------------------------------------------- /03-displaying-the-question-and-answer/04-updating-the-scores/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /04-multiplication-and-subtraction-questions/01-the-multiplication-game/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* --------- Global style */ 2 | 3 | body { 4 | background-color: white; 5 | font-family: "Raleway", sans-serif; 6 | color: #445361; 7 | text-align: center; 8 | } 9 | 10 | /* --------- Heading */ 11 | 12 | .heading { 13 | text-align: center; 14 | font-size: 2.5rem; 15 | } 16 | 17 | .logo { 18 | height: 40px; 19 | padding-right: 5px; 20 | } 21 | 22 | /* --------- Game layout */ 23 | 24 | .game-area { 25 | background-color: #E6ECF0; 26 | box-sizing: border-box; 27 | width: 85%; 28 | height: 65vh; 29 | max-height: 450px; 30 | max-width: 830px; 31 | margin-left: auto; 32 | margin-right: auto; 33 | padding: 1%; 34 | } 35 | 36 | .question-area { 37 | width: 50%; 38 | font-size: 2rem; 39 | margin: auto; 40 | padding: 50px 0; 41 | } 42 | 43 | .question-area span { 44 | padding: 0 15px; 45 | } 46 | 47 | .score-area { 48 | margin: 5px auto; 49 | width: 60%; 50 | font-size: 1.2rem; 51 | } 52 | 53 | .controls-area { 54 | width: 85%; 55 | margin: 30px auto; 56 | } 57 | 58 | #score { 59 | color: green; 60 | font-weight: bold; 61 | } 62 | 63 | #incorrect { 64 | color: red; 65 | font-weight: bold; 66 | } 67 | 68 | .answer-message { 69 | display: none; 70 | font-size: 1rem; 71 | } 72 | 73 | #answer-box { 74 | border: none; 75 | color: #445361; 76 | display: inline-block; 77 | height: 40px; 78 | width: 80px; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .scores { 83 | display: inline-block; 84 | padding: 25px; 85 | } 86 | 87 | /* --------- Buttons */ 88 | 89 | .btn { 90 | width: 220px; 91 | height: 60px; 92 | font-family: "Raleway", sans-serif; 93 | text-transform: uppercase; 94 | letter-spacing: 1.2px; 95 | color: white; 96 | } 97 | 98 | .btn:focus { 99 | outline: none; 100 | } 101 | 102 | .btn--big { 103 | padding-top: 10px; 104 | border-radius: 50%; 105 | background-color: white; 106 | border: 10px solid; 107 | width: 100px; 108 | height: 100px; 109 | font-size: 3.2rem; 110 | margin: 0 30px; 111 | transition: all 0.5s; 112 | } 113 | 114 | .btn--big::after{ 115 | content: attr(data-type); 116 | font-size: 1rem; 117 | color: #445361; 118 | position: relative; 119 | left: -0.5em; 120 | } 121 | 122 | .btn--blue { 123 | border-color: blue; 124 | color: blue; 125 | } 126 | 127 | .btn--blue:active, 128 | .btn--blue:hover { 129 | background-color: darkblue; 130 | color: white; 131 | } 132 | 133 | .btn--orange { 134 | border-color: orange; 135 | color: orange; 136 | } 137 | 138 | .btn--orange:active, 139 | .btn--orange:hover { 140 | background-color: darkorange; 141 | color: white; 142 | } 143 | 144 | .btn--red { 145 | border-color: red; 146 | color: red; 147 | } 148 | 149 | .btn--red:active, 150 | .btn--red:hover { 151 | background-color: darkred; 152 | color: white; 153 | } 154 | 155 | .btn--green { 156 | border-color: green; 157 | color: green; 158 | } 159 | 160 | .btn--green:active, 161 | .btn--green:hover { 162 | background-color: darkgreen; 163 | color: white; 164 | } 165 | 166 | .btn--gray { 167 | margin-top: 25px; 168 | background-color: #445361; 169 | border: 1px transparent; 170 | border-radius: 20px; 171 | } 172 | 173 | .btn--gray:active, 174 | .btn--gray:hover { 175 | background-color: #0d1013; 176 | } 177 | 178 | /* --------- Media queries */ 179 | 180 | @media (max-width: 414px) { 181 | .controls-area { 182 | width: 100%; 183 | } 184 | 185 | .btn--big { 186 | margin: 0 10px; 187 | padding: 5px; 188 | border: 5px solid; 189 | width: 50px; 190 | height: 50px; 191 | font-size: 1.5rem; 192 | } 193 | 194 | .btn--big::after { 195 | font-size: 0.6rem; 196 | left: -0.7rem; 197 | } 198 | 199 | .question-area { 200 | padding: 10% 0; 201 | width: 100%; 202 | } 203 | 204 | .question-area span { 205 | padding: 0; 206 | } 207 | 208 | .answer-message { 209 | display: block; 210 | } 211 | 212 | #answer-box { 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | .btn--gray { 217 | margin-top: 0; 218 | } 219 | 220 | .score-area { 221 | width: 100%; 222 | } 223 | 224 | .scores { 225 | margin: 0.5em auto; 226 | display: block; 227 | padding: 5px; 228 | } 229 | 230 | .heading { 231 | font-size: 2rem; 232 | } 233 | } 234 | 235 | @media (max-width: 320px) { 236 | .game-area { 237 | height: 70vh; 238 | } 239 | 240 | .controls-area { 241 | width: 75%; 242 | margin: 10px auto; 243 | } 244 | 245 | .btn--big { 246 | margin: 10px 10px; 247 | } 248 | .question-area { 249 | padding: 10px 0; 250 | } 251 | 252 | } -------------------------------------------------------------------------------- /04-multiplication-and-subtraction-questions/01-the-multiplication-game/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/04-multiplication-and-subtraction-questions/01-the-multiplication-game/assets/images/logo.png -------------------------------------------------------------------------------- /04-multiplication-and-subtraction-questions/01-the-multiplication-game/assets/js/script.js: -------------------------------------------------------------------------------- 1 | // Wait for the DOM to finish loading before running the game 2 | // Get the button elements and add event listeners to them 3 | 4 | document.addEventListener("DOMContentLoaded", function() { 5 | let buttons = document.getElementsByTagName("button"); 6 | 7 | for (let button of buttons) { 8 | button.addEventListener("click", function() { 9 | if (this.getAttribute("data-type") === "submit") { 10 | checkAnswer(); 11 | } else { 12 | let gameType = this.getAttribute("data-type"); 13 | runGame(gameType); 14 | } 15 | }); 16 | } 17 | 18 | runGame("addition"); 19 | 20 | }); 21 | 22 | /** 23 | * The main game "loop", called when the script is first loaded 24 | * and after the user's answer has been processed 25 | */ 26 | function runGame(gameType) { 27 | 28 | // Creates two random numbers between 1 and 25 29 | let num1 = Math.floor(Math.random() * 25) + 1; 30 | let num2 = Math.floor(Math.random() * 25) + 1; 31 | 32 | if (gameType === "addition") { 33 | displayAdditionQuestion(num1, num2); 34 | } else if (gameType === "multiply") { 35 | displayMultiplyQuestion(num1, num2); 36 | } else { 37 | alert(`Unknown game type: ${gameType}`); 38 | throw `Unknown game type: ${gameType}. Aborting!`; 39 | } 40 | 41 | } 42 | 43 | /** 44 | * Checks the answer against the first element in 45 | * the returned calculateCorrectAnswer array 46 | */ 47 | function checkAnswer() { 48 | 49 | let userAnswer = parseInt(document.getElementById("answer-box").value); 50 | let calculatedAnswer = calculateCorrectAnswer(); 51 | let isCorrect = userAnswer === calculatedAnswer[0]; 52 | 53 | if (isCorrect) { 54 | alert("Hey! You got it right! :D"); 55 | incrementScore(); 56 | } else { 57 | alert(`Awwww.... you answered ${userAnswer}. The correct answer was ${calculatedAnswer[0]}!`); 58 | incrementWrongAnswer(); 59 | } 60 | 61 | runGame(calculatedAnswer[1]); 62 | 63 | } 64 | 65 | /** 66 | * Gets the operands (the numbers) and the operator (plus, minus etc) 67 | * directly from the dom, and returns the correct answer. 68 | */ 69 | function calculateCorrectAnswer() { 70 | 71 | let operand1 = parseInt(document.getElementById('operand1').innerText); 72 | let operand2 = parseInt(document.getElementById('operand2').innerText); 73 | let operator = document.getElementById("operator").innerText; 74 | 75 | if (operator === "+") { 76 | return [operand1 + operand2, "addition"]; 77 | } else if (operator === "x") { 78 | return [operand1 * operand2, "multiply"]; 79 | } else { 80 | alert(`Unimplemented operator ${operator}`); 81 | throw `Unimplemented operator ${operator}. Aborting!`; 82 | } 83 | 84 | } 85 | 86 | /** 87 | * Gets the current score from the DOM and increments it by 1 88 | */ 89 | function incrementScore() { 90 | 91 | let oldScore = parseInt(document.getElementById("score").innerText); 92 | document.getElementById("score").innerText = ++oldScore; 93 | 94 | } 95 | 96 | /** 97 | * Gets the current tally of incorrect answers from the DOM and increments it by 1 98 | */ 99 | function incrementWrongAnswer() { 100 | 101 | let oldScore = parseInt(document.getElementById("incorrect").innerText); 102 | document.getElementById("incorrect").innerText = ++oldScore; 103 | 104 | } 105 | 106 | function displayAdditionQuestion(operand1, operand2) { 107 | 108 | document.getElementById('operand1').textContent = operand1; 109 | document.getElementById('operand2').textContent = operand2; 110 | document.getElementById('operator').textContent = "+"; 111 | 112 | } 113 | 114 | function displaySubtractQuestion() { 115 | 116 | } 117 | 118 | function displayMultiplyQuestion(operand1, operand2) { 119 | 120 | document.getElementById('operand1').textContent = operand1; 121 | document.getElementById('operand2').textContent = operand2; 122 | document.getElementById('operator').textContent = "x"; 123 | 124 | } -------------------------------------------------------------------------------- /04-multiplication-and-subtraction-questions/01-the-multiplication-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /04-multiplication-and-subtraction-questions/02-the-subtraction-game/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* --------- Global style */ 2 | 3 | body { 4 | background-color: white; 5 | font-family: "Raleway", sans-serif; 6 | color: #445361; 7 | text-align: center; 8 | } 9 | 10 | /* --------- Heading */ 11 | 12 | .heading { 13 | text-align: center; 14 | font-size: 2.5rem; 15 | } 16 | 17 | .logo { 18 | height: 40px; 19 | padding-right: 5px; 20 | } 21 | 22 | /* --------- Game layout */ 23 | 24 | .game-area { 25 | background-color: #E6ECF0; 26 | box-sizing: border-box; 27 | width: 85%; 28 | height: 65vh; 29 | max-height: 450px; 30 | max-width: 830px; 31 | margin-left: auto; 32 | margin-right: auto; 33 | padding: 1%; 34 | } 35 | 36 | .question-area { 37 | width: 50%; 38 | font-size: 2rem; 39 | margin: auto; 40 | padding: 50px 0; 41 | } 42 | 43 | .question-area span { 44 | padding: 0 15px; 45 | } 46 | 47 | .score-area { 48 | margin: 5px auto; 49 | width: 60%; 50 | font-size: 1.2rem; 51 | } 52 | 53 | .controls-area { 54 | width: 85%; 55 | margin: 30px auto; 56 | } 57 | 58 | #score { 59 | color: green; 60 | font-weight: bold; 61 | } 62 | 63 | #incorrect { 64 | color: red; 65 | font-weight: bold; 66 | } 67 | 68 | .answer-message { 69 | display: none; 70 | font-size: 1rem; 71 | } 72 | 73 | #answer-box { 74 | border: none; 75 | color: #445361; 76 | display: inline-block; 77 | height: 40px; 78 | width: 80px; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .scores { 83 | display: inline-block; 84 | padding: 25px; 85 | } 86 | 87 | /* --------- Buttons */ 88 | 89 | .btn { 90 | width: 220px; 91 | height: 60px; 92 | font-family: "Raleway", sans-serif; 93 | text-transform: uppercase; 94 | letter-spacing: 1.2px; 95 | color: white; 96 | } 97 | 98 | .btn:focus { 99 | outline: none; 100 | } 101 | 102 | .btn--big { 103 | padding-top: 10px; 104 | border-radius: 50%; 105 | background-color: white; 106 | border: 10px solid; 107 | width: 100px; 108 | height: 100px; 109 | font-size: 3.2rem; 110 | margin: 0 30px; 111 | transition: all 0.5s; 112 | } 113 | 114 | .btn--big::after{ 115 | content: attr(data-type); 116 | font-size: 1rem; 117 | color: #445361; 118 | position: relative; 119 | left: -0.5em; 120 | } 121 | 122 | .btn--blue { 123 | border-color: blue; 124 | color: blue; 125 | } 126 | 127 | .btn--blue:active, 128 | .btn--blue:hover { 129 | background-color: darkblue; 130 | color: white; 131 | } 132 | 133 | .btn--orange { 134 | border-color: orange; 135 | color: orange; 136 | } 137 | 138 | .btn--orange:active, 139 | .btn--orange:hover { 140 | background-color: darkorange; 141 | color: white; 142 | } 143 | 144 | .btn--red { 145 | border-color: red; 146 | color: red; 147 | } 148 | 149 | .btn--red:active, 150 | .btn--red:hover { 151 | background-color: darkred; 152 | color: white; 153 | } 154 | 155 | .btn--green { 156 | border-color: green; 157 | color: green; 158 | } 159 | 160 | .btn--green:active, 161 | .btn--green:hover { 162 | background-color: darkgreen; 163 | color: white; 164 | } 165 | 166 | .btn--gray { 167 | margin-top: 25px; 168 | background-color: #445361; 169 | border: 1px transparent; 170 | border-radius: 20px; 171 | } 172 | 173 | .btn--gray:active, 174 | .btn--gray:hover { 175 | background-color: #0d1013; 176 | } 177 | 178 | /* --------- Media queries */ 179 | 180 | @media (max-width: 414px) { 181 | .controls-area { 182 | width: 100%; 183 | } 184 | 185 | .btn--big { 186 | margin: 0 10px; 187 | padding: 5px; 188 | border: 5px solid; 189 | width: 50px; 190 | height: 50px; 191 | font-size: 1.5rem; 192 | } 193 | 194 | .btn--big::after { 195 | font-size: 0.6rem; 196 | left: -0.7rem; 197 | } 198 | 199 | .question-area { 200 | padding: 10% 0; 201 | width: 100%; 202 | } 203 | 204 | .question-area span { 205 | padding: 0; 206 | } 207 | 208 | .answer-message { 209 | display: block; 210 | } 211 | 212 | #answer-box { 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | .btn--gray { 217 | margin-top: 0; 218 | } 219 | 220 | .score-area { 221 | width: 100%; 222 | } 223 | 224 | .scores { 225 | margin: 0.5em auto; 226 | display: block; 227 | padding: 5px; 228 | } 229 | 230 | .heading { 231 | font-size: 2rem; 232 | } 233 | } 234 | 235 | @media (max-width: 320px) { 236 | .game-area { 237 | height: 70vh; 238 | } 239 | 240 | .controls-area { 241 | width: 75%; 242 | margin: 10px auto; 243 | } 244 | 245 | .btn--big { 246 | margin: 10px 10px; 247 | } 248 | .question-area { 249 | padding: 10px 0; 250 | } 251 | 252 | } -------------------------------------------------------------------------------- /04-multiplication-and-subtraction-questions/02-the-subtraction-game/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/04-multiplication-and-subtraction-questions/02-the-subtraction-game/assets/images/logo.png -------------------------------------------------------------------------------- /04-multiplication-and-subtraction-questions/02-the-subtraction-game/assets/js/script.js: -------------------------------------------------------------------------------- 1 | // Wait for the DOM to finish loading before running the game 2 | // Get the button elements and add event listeners to them 3 | 4 | document.addEventListener("DOMContentLoaded", function() { 5 | let buttons = document.getElementsByTagName("button"); 6 | 7 | for (let button of buttons) { 8 | button.addEventListener("click", function() { 9 | if (this.getAttribute("data-type") === "submit") { 10 | checkAnswer(); 11 | } else { 12 | let gameType = this.getAttribute("data-type"); 13 | runGame(gameType); 14 | } 15 | }); 16 | } 17 | 18 | runGame("addition"); 19 | 20 | }); 21 | 22 | /** 23 | * The main game "loop", called when the script is first loaded 24 | * and after the user's answer has been processed 25 | */ 26 | function runGame(gameType) { 27 | 28 | // Creates two random numbers between 1 and 25 29 | let num1 = Math.floor(Math.random() * 25) + 1; 30 | let num2 = Math.floor(Math.random() * 25) + 1; 31 | 32 | if (gameType === "addition") { 33 | displayAdditionQuestion(num1, num2); 34 | } else if (gameType === "multiply") { 35 | displayMultiplyQuestion(num1, num2); 36 | } else if (gameType === "subtract" ) { 37 | displaySubtractQuestion(num1, num2); 38 | } else { 39 | alert(`Unknown game type: ${gameType}`); 40 | throw `Unknown game type: ${gameType}. Aborting!`; 41 | } 42 | 43 | } 44 | 45 | /** 46 | * Checks the answer against the first element in 47 | * the returned calculateCorrectAnswer array 48 | */ 49 | function checkAnswer() { 50 | 51 | let userAnswer = parseInt(document.getElementById("answer-box").value); 52 | let calculatedAnswer = calculateCorrectAnswer(); 53 | let isCorrect = userAnswer === calculatedAnswer[0]; 54 | 55 | if (isCorrect) { 56 | alert("Hey! You got it right! :D"); 57 | incrementScore(); 58 | } else { 59 | alert(`Awwww.... you answered ${userAnswer}. The correct answer was ${calculatedAnswer[0]}!`); 60 | incrementWrongAnswer(); 61 | } 62 | 63 | runGame(calculatedAnswer[1]); 64 | 65 | } 66 | 67 | /** 68 | * Gets the operands (the numbers) and the operator (plus, minus etc) 69 | * directly from the dom, and returns the correct answer. 70 | */ 71 | function calculateCorrectAnswer() { 72 | 73 | let operand1 = parseInt(document.getElementById('operand1').innerText); 74 | let operand2 = parseInt(document.getElementById('operand2').innerText); 75 | let operator = document.getElementById("operator").innerText; 76 | 77 | if (operator === "+") { 78 | return [operand1 + operand2, "addition"]; 79 | } else if (operator === "x") { 80 | return [operand1 * operand2, "multiply"]; 81 | } else if (operator === "-") { 82 | return [operand1 - operand2, "subtract"]; 83 | } else { 84 | alert(`Unimplemented operator ${operator}`); 85 | throw `Unimplemented operator ${operator}. Aborting!`; 86 | } 87 | 88 | } 89 | 90 | /** 91 | * Gets the current score from the DOM and increments it by 1 92 | */ 93 | function incrementScore() { 94 | 95 | let oldScore = parseInt(document.getElementById("score").innerText); 96 | document.getElementById("score").innerText = ++oldScore; 97 | 98 | } 99 | 100 | /** 101 | * Gets the current tally of incorrect answers from the DOM and increments it by 1 102 | */ 103 | function incrementWrongAnswer() { 104 | 105 | let oldScore = parseInt(document.getElementById("incorrect").innerText); 106 | document.getElementById("incorrect").innerText = ++oldScore; 107 | 108 | } 109 | 110 | function displayAdditionQuestion(operand1, operand2) { 111 | 112 | document.getElementById('operand1').textContent = operand1; 113 | document.getElementById('operand2').textContent = operand2; 114 | document.getElementById('operator').textContent = "+"; 115 | 116 | } 117 | 118 | function displaySubtractQuestion(operand1, operand2) { 119 | 120 | document.getElementById("operand1").textContent = operand1 > operand2 ? operand1 : operand2; 121 | document.getElementById("operand2").textContent = operand1 > operand2 ? operand2 : operand1; 122 | document.getElementById('operator').textContent = "-"; 123 | 124 | } 125 | 126 | function displayMultiplyQuestion(operand1, operand2) { 127 | 128 | document.getElementById('operand1').textContent = operand1; 129 | document.getElementById('operand2').textContent = operand2; 130 | document.getElementById('operator').textContent = "x"; 131 | 132 | } -------------------------------------------------------------------------------- /04-multiplication-and-subtraction-questions/02-the-subtraction-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /05-tidying-up/01-a-few-last-things/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* --------- Global style */ 2 | 3 | body { 4 | background-color: white; 5 | font-family: "Raleway", sans-serif; 6 | color: #445361; 7 | text-align: center; 8 | } 9 | 10 | /* --------- Heading */ 11 | 12 | .heading { 13 | text-align: center; 14 | font-size: 2.5rem; 15 | } 16 | 17 | .logo { 18 | height: 40px; 19 | padding-right: 5px; 20 | } 21 | 22 | /* --------- Game layout */ 23 | 24 | .game-area { 25 | background-color: #E6ECF0; 26 | box-sizing: border-box; 27 | width: 85%; 28 | height: 65vh; 29 | max-height: 450px; 30 | max-width: 830px; 31 | margin-left: auto; 32 | margin-right: auto; 33 | padding: 1%; 34 | } 35 | 36 | .question-area { 37 | width: 50%; 38 | font-size: 2rem; 39 | margin: auto; 40 | padding: 50px 0; 41 | } 42 | 43 | .question-area span { 44 | padding: 0 15px; 45 | } 46 | 47 | .score-area { 48 | margin: 5px auto; 49 | width: 60%; 50 | font-size: 1.2rem; 51 | } 52 | 53 | .controls-area { 54 | width: 85%; 55 | margin: 30px auto; 56 | } 57 | 58 | #score { 59 | color: green; 60 | font-weight: bold; 61 | } 62 | 63 | #incorrect { 64 | color: red; 65 | font-weight: bold; 66 | } 67 | 68 | .answer-message { 69 | display: none; 70 | font-size: 1rem; 71 | } 72 | 73 | #answer-box { 74 | border: none; 75 | color: #445361; 76 | display: inline-block; 77 | height: 40px; 78 | width: 80px; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .scores { 83 | display: inline-block; 84 | padding: 25px; 85 | } 86 | 87 | /* --------- Buttons */ 88 | 89 | .btn { 90 | width: 220px; 91 | height: 60px; 92 | font-family: "Raleway", sans-serif; 93 | text-transform: uppercase; 94 | letter-spacing: 1.2px; 95 | color: white; 96 | } 97 | 98 | .btn:focus { 99 | outline: none; 100 | } 101 | 102 | .btn--big { 103 | padding-top: 10px; 104 | border-radius: 50%; 105 | background-color: white; 106 | border: 10px solid; 107 | width: 100px; 108 | height: 100px; 109 | font-size: 3.2rem; 110 | margin: 0 30px; 111 | transition: all 0.5s; 112 | } 113 | 114 | .btn--big::after{ 115 | content: attr(data-type); 116 | font-size: 1rem; 117 | color: #445361; 118 | position: relative; 119 | left: -0.5em; 120 | } 121 | 122 | .btn--blue { 123 | border-color: blue; 124 | color: blue; 125 | } 126 | 127 | .btn--blue:active, 128 | .btn--blue:hover { 129 | background-color: darkblue; 130 | color: white; 131 | } 132 | 133 | .btn--orange { 134 | border-color: orange; 135 | color: orange; 136 | } 137 | 138 | .btn--orange:active, 139 | .btn--orange:hover { 140 | background-color: darkorange; 141 | color: white; 142 | } 143 | 144 | .btn--red { 145 | border-color: red; 146 | color: red; 147 | } 148 | 149 | .btn--red:active, 150 | .btn--red:hover { 151 | background-color: darkred; 152 | color: white; 153 | } 154 | 155 | .btn--green { 156 | border-color: green; 157 | color: green; 158 | } 159 | 160 | .btn--green:active, 161 | .btn--green:hover { 162 | background-color: darkgreen; 163 | color: white; 164 | } 165 | 166 | .btn--gray { 167 | margin-top: 25px; 168 | background-color: #445361; 169 | border: 1px transparent; 170 | border-radius: 20px; 171 | } 172 | 173 | .btn--gray:active, 174 | .btn--gray:hover { 175 | background-color: #0d1013; 176 | } 177 | 178 | /* --------- Media queries */ 179 | 180 | @media (max-width: 414px) { 181 | .controls-area { 182 | width: 100%; 183 | } 184 | 185 | .btn--big { 186 | margin: 0 10px; 187 | padding: 5px; 188 | border: 5px solid; 189 | width: 50px; 190 | height: 50px; 191 | font-size: 1.5rem; 192 | } 193 | 194 | .btn--big::after { 195 | font-size: 0.6rem; 196 | left: -0.7rem; 197 | } 198 | 199 | .question-area { 200 | padding: 10% 0; 201 | width: 100%; 202 | } 203 | 204 | .question-area span { 205 | padding: 0; 206 | } 207 | 208 | .answer-message { 209 | display: block; 210 | } 211 | 212 | #answer-box { 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | .btn--gray { 217 | margin-top: 0; 218 | } 219 | 220 | .score-area { 221 | width: 100%; 222 | } 223 | 224 | .scores { 225 | margin: 0.5em auto; 226 | display: block; 227 | padding: 5px; 228 | } 229 | 230 | .heading { 231 | font-size: 2rem; 232 | } 233 | } 234 | 235 | @media (max-width: 320px) { 236 | .game-area { 237 | height: 70vh; 238 | } 239 | 240 | .controls-area { 241 | width: 75%; 242 | margin: 10px auto; 243 | } 244 | 245 | .btn--big { 246 | margin: 10px 10px; 247 | } 248 | .question-area { 249 | padding: 10px 0; 250 | } 251 | 252 | } -------------------------------------------------------------------------------- /05-tidying-up/01-a-few-last-things/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/05-tidying-up/01-a-few-last-things/assets/images/logo.png -------------------------------------------------------------------------------- /05-tidying-up/01-a-few-last-things/assets/js/script.js: -------------------------------------------------------------------------------- 1 | // Wait for the DOM to finish loading before running the game 2 | // Get the button elements and add event listeners to them 3 | 4 | document.addEventListener("DOMContentLoaded", function() { 5 | let buttons = document.getElementsByTagName("button"); 6 | 7 | for (let button of buttons) { 8 | button.addEventListener("click", function() { 9 | if (this.getAttribute("data-type") === "submit") { 10 | checkAnswer(); 11 | } else { 12 | let gameType = this.getAttribute("data-type"); 13 | runGame(gameType); 14 | } 15 | }); 16 | } 17 | 18 | document.getElementById("answer-box").addEventListener("keydown", function(event) { 19 | if (event.key === "Enter") { 20 | checkAnswer(); 21 | } 22 | }); 23 | 24 | runGame("addition"); 25 | 26 | }); 27 | 28 | /** 29 | * The main game "loop", called when the script is first loaded 30 | * and after the user's answer has been processed 31 | */ 32 | function runGame(gameType) { 33 | 34 | document.getElementById("answer-box").value = ""; 35 | document.getElementById("answer-box").focus(); 36 | 37 | // Creates two random numbers between 1 and 25 38 | let num1 = Math.floor(Math.random() * 25) + 1; 39 | let num2 = Math.floor(Math.random() * 25) + 1; 40 | 41 | if (gameType === "addition") { 42 | displayAdditionQuestion(num1, num2); 43 | } else if (gameType === "multiply") { 44 | displayMultiplyQuestion(num1, num2); 45 | } else if (gameType === "subtract" ) { 46 | displaySubtractQuestion(num1, num2); 47 | } else { 48 | alert(`Unknown game type: ${gameType}`); 49 | throw `Unknown game type: ${gameType}. Aborting!`; 50 | } 51 | 52 | } 53 | 54 | /** 55 | * Checks the answer against the first element in 56 | * the returned calculateCorrectAnswer array 57 | */ 58 | function checkAnswer() { 59 | 60 | let userAnswer = parseInt(document.getElementById("answer-box").value); 61 | let calculatedAnswer = calculateCorrectAnswer(); 62 | let isCorrect = userAnswer === calculatedAnswer[0]; 63 | 64 | if (isCorrect) { 65 | alert("Hey! You got it right! :D"); 66 | incrementScore(); 67 | } else { 68 | alert(`Awwww.... you answered ${userAnswer}. The correct answer was ${calculatedAnswer[0]}!`); 69 | incrementWrongAnswer(); 70 | } 71 | 72 | runGame(calculatedAnswer[1]); 73 | 74 | } 75 | 76 | /** 77 | * Gets the operands (the numbers) and the operator (plus, minus etc) 78 | * directly from the dom, and returns the correct answer. 79 | */ 80 | function calculateCorrectAnswer() { 81 | 82 | let operand1 = parseInt(document.getElementById('operand1').innerText); 83 | let operand2 = parseInt(document.getElementById('operand2').innerText); 84 | let operator = document.getElementById("operator").innerText; 85 | 86 | if (operator === "+") { 87 | return [operand1 + operand2, "addition"]; 88 | } else if (operator === "x") { 89 | return [operand1 * operand2, "multiply"]; 90 | } else if (operator === "-") { 91 | return [operand1 - operand2, "subtract"]; 92 | } else { 93 | alert(`Unimplemented operator ${operator}`); 94 | throw `Unimplemented operator ${operator}. Aborting!`; 95 | } 96 | 97 | } 98 | 99 | /** 100 | * Gets the current score from the DOM and increments it by 1 101 | */ 102 | function incrementScore() { 103 | 104 | let oldScore = parseInt(document.getElementById("score").innerText); 105 | document.getElementById("score").innerText = ++oldScore; 106 | 107 | } 108 | 109 | /** 110 | * Gets the current tally of incorrect answers from the DOM and increments it by 1 111 | */ 112 | function incrementWrongAnswer() { 113 | 114 | let oldScore = parseInt(document.getElementById("incorrect").innerText); 115 | document.getElementById("incorrect").innerText = ++oldScore; 116 | 117 | } 118 | 119 | function displayAdditionQuestion(operand1, operand2) { 120 | 121 | document.getElementById('operand1').textContent = operand1; 122 | document.getElementById('operand2').textContent = operand2; 123 | document.getElementById('operator').textContent = "+"; 124 | 125 | } 126 | 127 | function displaySubtractQuestion(operand1, operand2) { 128 | 129 | document.getElementById("operand1").textContent = operand1 > operand2 ? operand1 : operand2; 130 | document.getElementById("operand2").textContent = operand1 > operand2 ? operand2 : operand1; 131 | document.getElementById('operator').textContent = "-"; 132 | 133 | } 134 | 135 | function displayMultiplyQuestion(operand1, operand2) { 136 | 137 | document.getElementById('operand1').textContent = operand1; 138 | document.getElementById('operand2').textContent = operand2; 139 | document.getElementById('operator').textContent = "x"; 140 | 141 | } -------------------------------------------------------------------------------- /05-tidying-up/01-a-few-last-things/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /06-division-challenge/assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* --------- Global style */ 2 | 3 | body { 4 | background-color: white; 5 | font-family: "Raleway", sans-serif; 6 | color: #445361; 7 | text-align: center; 8 | } 9 | 10 | /* --------- Heading */ 11 | 12 | .heading { 13 | text-align: center; 14 | font-size: 2.5rem; 15 | } 16 | 17 | .logo { 18 | height: 40px; 19 | padding-right: 5px; 20 | } 21 | 22 | /* --------- Game layout */ 23 | 24 | .game-area { 25 | background-color: #E6ECF0; 26 | box-sizing: border-box; 27 | width: 85%; 28 | height: 65vh; 29 | max-height: 450px; 30 | max-width: 830px; 31 | margin-left: auto; 32 | margin-right: auto; 33 | padding: 1%; 34 | } 35 | 36 | .question-area { 37 | width: 50%; 38 | font-size: 2rem; 39 | margin: auto; 40 | padding: 50px 0; 41 | } 42 | 43 | .question-area span { 44 | padding: 0 15px; 45 | } 46 | 47 | .score-area { 48 | margin: 5px auto; 49 | width: 60%; 50 | font-size: 1.2rem; 51 | } 52 | 53 | .controls-area { 54 | width: 85%; 55 | margin: 30px auto; 56 | } 57 | 58 | #score { 59 | color: green; 60 | font-weight: bold; 61 | } 62 | 63 | #incorrect { 64 | color: red; 65 | font-weight: bold; 66 | } 67 | 68 | .answer-message { 69 | display: none; 70 | font-size: 1rem; 71 | } 72 | 73 | #answer-box { 74 | border: none; 75 | color: #445361; 76 | display: inline-block; 77 | height: 40px; 78 | width: 80px; 79 | font-size: 1.2rem; 80 | } 81 | 82 | .scores { 83 | display: inline-block; 84 | padding: 25px; 85 | } 86 | 87 | /* --------- Buttons */ 88 | 89 | .btn { 90 | width: 220px; 91 | height: 60px; 92 | font-family: "Raleway", sans-serif; 93 | text-transform: uppercase; 94 | letter-spacing: 1.2px; 95 | color: white; 96 | } 97 | 98 | .btn:focus { 99 | outline: none; 100 | } 101 | 102 | .btn--big { 103 | padding-top: 10px; 104 | border-radius: 50%; 105 | background-color: white; 106 | border: 10px solid; 107 | width: 100px; 108 | height: 100px; 109 | font-size: 3.2rem; 110 | margin: 0 30px; 111 | transition: all 0.5s; 112 | } 113 | 114 | .btn--big::after{ 115 | content: attr(data-type); 116 | font-size: 1rem; 117 | color: #445361; 118 | position: relative; 119 | left: -0.5em; 120 | } 121 | 122 | .btn--blue { 123 | border-color: blue; 124 | color: blue; 125 | } 126 | 127 | .btn--blue:active, 128 | .btn--blue:hover { 129 | background-color: darkblue; 130 | color: white; 131 | } 132 | 133 | .btn--orange { 134 | border-color: orange; 135 | color: orange; 136 | } 137 | 138 | .btn--orange:active, 139 | .btn--orange:hover { 140 | background-color: darkorange; 141 | color: white; 142 | } 143 | 144 | .btn--red { 145 | border-color: red; 146 | color: red; 147 | } 148 | 149 | .btn--red:active, 150 | .btn--red:hover { 151 | background-color: darkred; 152 | color: white; 153 | } 154 | 155 | .btn--green { 156 | border-color: green; 157 | color: green; 158 | } 159 | 160 | .btn--green:active, 161 | .btn--green:hover { 162 | background-color: darkgreen; 163 | color: white; 164 | } 165 | 166 | .btn--gray { 167 | margin-top: 25px; 168 | background-color: #445361; 169 | border: 1px transparent; 170 | border-radius: 20px; 171 | } 172 | 173 | .btn--gray:active, 174 | .btn--gray:hover { 175 | background-color: #0d1013; 176 | } 177 | 178 | /* --------- Media queries */ 179 | 180 | @media (max-width: 414px) { 181 | .controls-area { 182 | width: 100%; 183 | } 184 | 185 | .btn--big { 186 | margin: 0 10px; 187 | padding: 5px; 188 | border: 5px solid; 189 | width: 50px; 190 | height: 50px; 191 | font-size: 1.5rem; 192 | } 193 | 194 | .btn--big::after { 195 | font-size: 0.6rem; 196 | left: -0.7rem; 197 | } 198 | 199 | .question-area { 200 | padding: 10% 0; 201 | width: 100%; 202 | } 203 | 204 | .question-area span { 205 | padding: 0; 206 | } 207 | 208 | .answer-message { 209 | display: block; 210 | } 211 | 212 | #answer-box { 213 | display: block; 214 | margin: 0 auto; 215 | } 216 | .btn--gray { 217 | margin-top: 0; 218 | } 219 | 220 | .score-area { 221 | width: 100%; 222 | } 223 | 224 | .scores { 225 | margin: 0.5em auto; 226 | display: block; 227 | padding: 5px; 228 | } 229 | 230 | .heading { 231 | font-size: 2rem; 232 | } 233 | } 234 | 235 | @media (max-width: 320px) { 236 | .game-area { 237 | height: 70vh; 238 | } 239 | 240 | .controls-area { 241 | width: 75%; 242 | margin: 10px auto; 243 | } 244 | 245 | .btn--big { 246 | margin: 10px 10px; 247 | } 248 | .question-area { 249 | padding: 10px 0; 250 | } 251 | 252 | } -------------------------------------------------------------------------------- /06-division-challenge/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Institute-Solutions/love-maths-2.0-sourcecode/a94d5a67e250f4dcd54f85fea84d87a6f2794044/06-division-challenge/assets/images/logo.png -------------------------------------------------------------------------------- /06-division-challenge/assets/js/script.js: -------------------------------------------------------------------------------- 1 | // Wait for the DOM to finish loading before running the game 2 | // Get the button elements and add event listeners to them 3 | 4 | document.addEventListener("DOMContentLoaded", function() { 5 | let buttons = document.getElementsByTagName("button"); 6 | 7 | for (let button of buttons) { 8 | button.addEventListener("click", function() { 9 | if (this.getAttribute("data-type") === "submit") { 10 | checkAnswer(); 11 | } else { 12 | let gameType = this.getAttribute("data-type"); 13 | runGame(gameType); 14 | } 15 | }); 16 | } 17 | 18 | document.getElementById("answer-box").addEventListener("keydown", function(event) { 19 | if (event.key === "Enter") { 20 | checkAnswer(); 21 | } 22 | }); 23 | 24 | runGame("addition"); 25 | 26 | }); 27 | 28 | /** 29 | * The main game "loop", called when the script is first loaded 30 | * and after the user's answer has been processed 31 | */ 32 | function runGame(gameType) { 33 | 34 | document.getElementById("answer-box").value = ""; 35 | document.getElementById("answer-box").focus(); 36 | 37 | // Creates two random numbers between 1 and 25 38 | let num1 = Math.floor(Math.random() * 25) + 1; 39 | let num2 = Math.floor(Math.random() * 25) + 1; 40 | 41 | if (gameType === "addition") { 42 | displayAdditionQuestion(num1, num2); 43 | } else if (gameType === "multiply") { 44 | displayMultiplyQuestion(num1, num2); 45 | } else if (gameType === "subtract" ) { 46 | displaySubtractQuestion(num1, num2); 47 | } else if (gameType === "division"){ 48 | displayDivisionQuestion(num1,num2); 49 | } else { 50 | alert(`Unknown game type: ${gameType}`); 51 | throw `Unknown game type: ${gameType}. Aborting!`; 52 | } 53 | 54 | } 55 | 56 | /** 57 | * Checks the answer against the first element in 58 | * the returned calculateCorrectAnswer array 59 | */ 60 | function checkAnswer() { 61 | 62 | let userAnswer = parseInt(document.getElementById("answer-box").value); 63 | let calculatedAnswer = calculateCorrectAnswer(); 64 | let isCorrect = userAnswer === calculatedAnswer[0]; 65 | 66 | if (isCorrect) { 67 | alert("Hey! You got it right! :D"); 68 | incrementScore(); 69 | } else { 70 | alert(`Awwww.... you answered ${userAnswer}. The correct answer was ${calculatedAnswer[0]}!`); 71 | incrementWrongAnswer(); 72 | } 73 | 74 | runGame(calculatedAnswer[1]); 75 | 76 | } 77 | 78 | /** 79 | * Gets the operands (the numbers) and the operator (plus, minus etc) 80 | * directly from the dom, and returns the correct answer. 81 | */ 82 | function calculateCorrectAnswer() { 83 | 84 | let operand1 = parseInt(document.getElementById('operand1').innerText); 85 | let operand2 = parseInt(document.getElementById('operand2').innerText); 86 | let operator = document.getElementById("operator").innerText; 87 | 88 | if (operator === "+") { 89 | return [operand1 + operand2, "addition"]; 90 | } else if (operator === "x") { 91 | return [operand1 * operand2, "multiply"]; 92 | } else if (operator === "-") { 93 | return [operand1 - operand2, "subtract"]; 94 | } else if (operator ==="/") { 95 | return [operand1 / operand2, "division"]; 96 | } else { 97 | alert(`Unimplemented operator ${operator}`); 98 | throw `Unimplemented operator ${operator}. Aborting!`; 99 | } 100 | 101 | } 102 | 103 | /** 104 | * Gets the current score from the DOM and increments it by 1 105 | */ 106 | function incrementScore() { 107 | 108 | let oldScore = parseInt(document.getElementById("score").innerText); 109 | document.getElementById("score").innerText = ++oldScore; 110 | 111 | } 112 | 113 | /** 114 | * Gets the current tally of incorrect answers from the DOM and increments it by 1 115 | */ 116 | function incrementWrongAnswer() { 117 | 118 | let oldScore = parseInt(document.getElementById("incorrect").innerText); 119 | document.getElementById("incorrect").innerText = ++oldScore; 120 | 121 | } 122 | 123 | function displayAdditionQuestion(operand1, operand2) { 124 | 125 | document.getElementById('operand1').textContent = operand1; 126 | document.getElementById('operand2').textContent = operand2; 127 | document.getElementById('operator').textContent = "+"; 128 | 129 | } 130 | 131 | function displaySubtractQuestion(operand1, operand2) { 132 | 133 | document.getElementById("operand1").textContent = operand1 > operand2 ? operand1 : operand2; 134 | document.getElementById("operand2").textContent = operand1 > operand2 ? operand2 : operand1; 135 | document.getElementById('operator').textContent = "-"; 136 | 137 | } 138 | 139 | function displayMultiplyQuestion(operand1, operand2) { 140 | 141 | document.getElementById('operand1').textContent = operand1; 142 | document.getElementById('operand2').textContent = operand2; 143 | document.getElementById('operator').textContent = "x"; 144 | 145 | } 146 | 147 | // Add your division question here 148 | function displayDivisionQuestion(operand1, operand2) { 149 | operand1 = operand1 * operand2; 150 | document.getElementById("operand1").textContent = operand1; 151 | document.getElementById("operand2").textContent = operand2; 152 | document.getElementById("operator").textContent = "/"; 153 | } -------------------------------------------------------------------------------- /06-division-challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | Document 15 | 16 | 17 | 18 |

19 | Love Maths 20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
37 |
38 | 0 39 | x 40 | 0 41 | = 42 |

Enter Answer:

43 | 44 |
45 | 46 |
47 | 48 |
49 |

Correct Answers 0

50 |

Incorrect Answers 0

51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Starter Maths Game 2 | 3 | This maths game is used to teach the basics of JavaScript and the DOM. 4 | 5 | ## REQUIRED (TESTED): 6 | 7 | * Add a division game that requires integers as answers 8 | 9 | ## BONUS (NOT TESTED): 10 | 11 | * Provide better feedback to the user - we don't want to use `alert()` 12 | * Add difficulty levels - Easy, Normal, Difficult - that affect the complexity of the questions 13 | 14 | ## SUPER BONUS (NOT TESTED): 15 | * Add a countdown timer to the game 16 | * Add a high-score chart for people who get the most answers right in the time available (research using local storage) --------------------------------------------------------------------------------