├── codesnippets ├── style.html ├── background.css ├── blinkUpdate.js ├── score_table.html ├── updateElement.js ├── dummy_data.py ├── index.html └── topnav.html ├── README.md ├── src ├── main.py └── templates │ ├── index.html │ └── includes │ └── matches.html ├── .gitignore └── .idea └── workspace.xml /codesnippets/style.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /codesnippets/background.css: -------------------------------------------------------------------------------- 1 | background-image: url("https://res.cloudinary.com/jimshapedcoding/image/upload/v1628867094/Basketball_Sport_200179_gkllno.png"); 2 | background-size: 95%; 3 | background-position: center; 4 | background-repeat: no-repeat; -------------------------------------------------------------------------------- /codesnippets/blinkUpdate.js: -------------------------------------------------------------------------------- 1 | function blinkUpdate(element, newValue, newColor='#00ff00') { 2 | previousColor = element.style.color; 3 | element.innerHTML = newValue; 4 | element.style.color = newColor; 5 | // Set back to original color after timeout ms 6 | setTimeout(() => { 7 | element.style.color = previousColor 8 | }, 2000) 9 | } 10 | -------------------------------------------------------------------------------- /codesnippets/score_table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
IDStarting TimeTeam AScoreTeam BMinute
16 | -------------------------------------------------------------------------------- /codesnippets/updateElement.js: -------------------------------------------------------------------------------- 1 | function updateElement(match) { 2 | Object.entries(match).forEach(([k,v]) => { 3 | element = document.getElementById('ELEMENT_ID'); 4 | // Get Previous value first 5 | previousValue = element.innerHTML; 6 | 7 | // If Previous value is not equal to the new value, change it! 8 | if (previousValue !== v.toString()) { 9 | element.innerHTML = v.toString(); 10 | } 11 | }) 12 | } -------------------------------------------------------------------------------- /codesnippets/dummy_data.py: -------------------------------------------------------------------------------- 1 | dummy_data = [ 2 | { 3 | "id": 1, 4 | "starting_time": "16:00", 5 | "team_a": "Random Team 1", 6 | "score": "0 - 0", 7 | "team_b": "Random Team 2", 8 | "minute": "00:00", 9 | }, 10 | { 11 | "id": 2, 12 | "starting_time": "18:00", 13 | "team_a": "Random Team 3", 14 | "score": "0 - 0", 15 | "team_b": "Random Team 4", 16 | "minute": "00:00", 17 | }, 18 | ] -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # LiveSportsWebsite 2 | This is my Live Sports website built with Flask. 3 | 4 | ## Follow the tutorial on: [1-hour Crash Course](https://www.youtube.com/watch?v=-CT28e2Dl24) 5 | 6 | ### Get started: 7 | 8 | - In the project root, go to `src` folder, and then create a venv 9 | - Run on terminal `source venb/bin/activate` On Linux OR `venv\Scripts\activate.bat` on Windows 10 | - Once activated, install Flask: `pip install flask` 11 | - Get out from the venv: `deactivate` 12 | - Run the following to set Flask env variables that are necessary 13 | - `set FLASK_APP=main.py` 14 | - `set FLASK_DEBUG=1` 15 | - Run the Project: `flask run` 16 | -------------------------------------------------------------------------------- /src/main.py: -------------------------------------------------------------------------------- 1 | from flask import Flask 2 | from flask import render_template, jsonify 3 | 4 | app = Flask(__name__) 5 | 6 | @app.route('/data_json') 7 | def data_json(): 8 | dummy_data = [ 9 | { 10 | "id": 1, 11 | "starting_time": "16:00", 12 | "team_a": "Random Team 1", 13 | "score": "1 - 2", 14 | "team_b": "Random Team 2", 15 | "minute": "01:00", 16 | }, 17 | { 18 | "id": 2, 19 | "starting_time": "18:00", 20 | "team_a": "Random Team 3", 21 | "score": "1 - 1", 22 | "team_b": "Random Team 4", 23 | "minute": "05:00", 24 | }, 25 | ] 26 | return jsonify(dummy_data) 27 | 28 | @app.route('/') 29 | def index(): 30 | dummy_data = data_json() 31 | return render_template( 32 | 'index.html', 33 | matches=dummy_data.json, 34 | ) -------------------------------------------------------------------------------- /codesnippets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | JSC Sports Website 12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /codesnippets/topnav.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | JSC Sports Website 12 | 13 | 14 | 15 |
16 |
17 |
18 | {% include 'includes/matches.html' %} 19 |
20 | 21 | 22 | 23 | 33 | -------------------------------------------------------------------------------- /src/templates/includes/matches.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | {% for match in matches %} 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | {% endfor %} 23 | 24 |
IDStarting TimeTeam AScoreTeam BMinute
{{ match.id }}{{ match.starting_time }}{{ match.team_a }}{{ match.score }}{{ match.team_b }}{{ match.minute }}
25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Byte-compiled / optimized / DLL files 2 | __pycache__/ 3 | *.py[cod] 4 | *$py.class 5 | 6 | # C extensions 7 | *.so 8 | 9 | # Distribution / packaging 10 | .Python 11 | build/ 12 | develop-eggs/ 13 | dist/ 14 | downloads/ 15 | eggs/ 16 | .eggs/ 17 | lib/ 18 | lib64/ 19 | parts/ 20 | sdist/ 21 | var/ 22 | wheels/ 23 | pip-wheel-metadata/ 24 | share/python-wheels/ 25 | *.egg-info/ 26 | .installed.cfg 27 | *.egg 28 | MANIFEST 29 | 30 | # PyInstaller 31 | # Usually these files are written by a python script from a template 32 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 33 | *.manifest 34 | *.spec 35 | 36 | # Installer logs 37 | pip-log.txt 38 | pip-delete-this-directory.txt 39 | 40 | # Unit test / coverage reports 41 | htmlcov/ 42 | .tox/ 43 | .nox/ 44 | .coverage 45 | .coverage.* 46 | .cache 47 | nosetests.xml 48 | coverage.xml 49 | *.cover 50 | *.py,cover 51 | .hypothesis/ 52 | .pytest_cache/ 53 | 54 | # Translations 55 | *.mo 56 | *.pot 57 | 58 | # Django stuff: 59 | *.log 60 | local_settings.py 61 | db.sqlite3 62 | db.sqlite3-journal 63 | 64 | # Flask stuff: 65 | instance/ 66 | .webassets-cache 67 | 68 | # Scrapy stuff: 69 | .scrapy 70 | 71 | # Sphinx documentation 72 | docs/_build/ 73 | 74 | # PyBuilder 75 | target/ 76 | 77 | # Jupyter Notebook 78 | .ipynb_checkpoints 79 | 80 | # IPython 81 | profile_default/ 82 | ipython_config.py 83 | 84 | # pyenv 85 | .python-version 86 | 87 | # pipenv 88 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. 89 | # However, in case of collaboration, if having platform-specific dependencies or dependencies 90 | # having no cross-platform support, pipenv may install dependencies that don't work, or not 91 | # install all needed dependencies. 92 | #Pipfile.lock 93 | 94 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow 95 | __pypackages__/ 96 | 97 | # Celery stuff 98 | celerybeat-schedule 99 | celerybeat.pid 100 | 101 | # SageMath parsed files 102 | *.sage.py 103 | 104 | # Environments 105 | .env 106 | .venv 107 | env/ 108 | venv/ 109 | ENV/ 110 | env.bak/ 111 | venv.bak/ 112 | 113 | # Spyder project settings 114 | .spyderproject 115 | .spyproject 116 | 117 | # Rope project settings 118 | .ropeproject 119 | 120 | # mkdocs documentation 121 | /site 122 | 123 | # mypy 124 | .mypy_cache/ 125 | .dmypy.json 126 | dmypy.json 127 | 128 | # Pyre type checker 129 | .pyre/ 130 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 64 | 65 | 66 | 68 | 69 | 90 | 91 | 92 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 182 | 183 | 184 | 185 | 186 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 1628715264538 219 | 229 | 230 | 231 | 232 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | --------------------------------------------------------------------------------