Note: Material I created for a workshop on Javascript as part of the Foundations of Software Engineering course led by prof. Adam Roe at Code University in Berlin.

Here you can find some examples of how to apply JS.

(Make sure you have pip and virtualenv installed!)

• Create a virtual environment called venv: virtualenv venv

• Activate the environment: source venv/bin/activate

• Install Flask: pip install flask

Note: You might have to install other dependencies, depending on your approach (for example, pip install requests)

• Using the flask_example as a reference, you will see that each time we click on the button, a paragraph is appended to the DOM element main (or main tag). Make adjustments so it will only be appended once.

• Alert the user that he/she can only add a paragraph once, in case the user keeps clicking. 🤦‍🤦‍♀️

• Useful Resources:

1. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
2. https://zellwk.com/blog/dom-traversals/
3. https://medium.freecodecamp.org/whats-the-document-object-model-and-why-you-should-know-how-to-use-it-1a2d0bc5429d
4. https://blog.codeanalogies.com/2018/01/06/traversing-the-dom-visual-explanation/

Expected output should look something like this:

Go to https://www.rithmschool.com/courses/intermediate-javascript/javascript-dom-exercises or fork this codepen: https://codepen.io/dani-santos-code/pen/yrBywE

• Assuming you went through the whole Flask Tutorial and are familiar with templating in Flask (Jinja), consume the Pokemon API to display a list of pokemons with their names. Feel free to be creative and design something fancier and more beautiful.

• When the user clicks on the button, all the information should disappear and the user should see a message that reads: "No Pokemons Left"

Expected output should look something like this:

Note: Feel free to display more info and play with this API!