This is a website where the user can play fun geological guessing games and learn about countries. Click the history tab to learn about fasinating historical facts about each country. Also click the covid cases tab to learn about the live covid numbers in each country. Come and play!
Start by clicking the geo-guesser tab and running the game. When guessing the country click on the corresponding number to the image.
EX.
(Imagine of Greece)
Choices
-
Iceland
-
United States
-
Greece
-
Wakanda
Click on Greece because it is the corresponding number to the image. Another fun activity this webiste provides is historical facts about each country on the geo-guesser game. Only correct answers will provide historical facts. The thrid option is live covid 19 cases tracker. Simply click on the covid cases tab to begin your learning on covid per country. If you find any trouble working the website try reloading your computer or the website.
Learn to use Flask and Jinja to incorporate python into HTML. Also learned to use post, git, and requests.
Proof of learning: Data.py, main.py (route to geoguesser.html and import Data), geoguesser.html
Flask:
|
@app.route("/geoguesser") |
|
def geoguesser(): |
|
return render_template("geoguesser.html", data=Data.inputdata1(), data1=Data.inputdata2(), data2=Data.picran()) |
post:
|
@app.route('/1', methods=["GET", "POST"]) |
|
def continentcheck1(): |
|
if request.method == "POST": |
|
form = request.form |
|
Con1 = form["Continent1"] |
|
if Con1 == "Asia" or Con1 == "asia": |
|
var1 = 'Continent Correct!' |
|
return render_template("geoguesser.html", Continent=var1,data=Data.inputdata1(),data1=Data.inputdata2(), data2=Data.picran()) |
|
else: |
|
var1 = 'Continent Incorrect!' |
|
return render_template("geoguesser.html", Continent=var1,data=Data.inputdata1(),data1=Data.inputdata2(), data2=Data.picran()) |
|
@app.route('/c1', methods=["GET", "POST"]) |
|
def countrycheck1(): |
|
if request.method == "POST": |
|
form = request.form |
|
Coun1 = form["Country1"] |
|
if Coun1 == "India" or Coun1 == "india": |
|
var2 = 'Country Correct!' |
|
return render_template("geoguesser.html", Country=var2,data=Data.inputdata1(),data1=Data.inputdata2(), data2=Data.picran()) |
|
else: |
|
var2 = 'Country Incorrect!' |
|
return render_template("geoguesser.html", Country=var2,data=Data.inputdata1(),data1=Data.inputdata2(), data2=Data.picran()) |
|
@app.route('/C1', methods=['GET', 'POST']) |
|
def citycheck1(): |
|
if request.method == "POST": |
|
form = request.form |
|
City = form['City1'] |
|
if City == "Agra" or City == "agra": |
|
var3 = 'City Correct!' |
|
return render_template("geoguesser.html", City=var3,data=Data.inputdata1(),data1=Data.inputdata2(), data2=Data.picran()) |
|
else: |
|
var3 = 'City Incorrect!' |
|
return render_template("geoguesser.html", City=var3,data=Data.inputdata1(),data1=Data.inputdata2(), data2=Data.picran()) |
Html/Jinja:
|
<form method="post"> |
|
<p>Continent</p> |
|
<input name="Continent1"> |
|
<input type="submit" formaction="/{{NumberR}}"> |
|
</form> |
|
<p>{{Continent}}</p> |
|
|
|
<form method="post"> |
|
<p>Country</p> |
|
<input name="Country1"> |
|
<input type="submit" formaction="/c{{NumberR}}"> |
|
</form> |
|
<p>{{Country}}</p> |
|
|
|
<form method="post"> |
|
<p>City</p> |
|
<input name="City1"> |
|
<input type="submit" formaction="/C{{NumberR}}"> |
|
</form> |
|
<p>{{City}}</p> |
|
<!--How I get the random image each time --> |
|
<img src={{testvar2}} height="500" width="1000" alt="forest picture"> |
Python:
|
@app.route('/1', methods=["GET", "POST"]) |
|
def continentcheck1(): |
|
if request.method == "POST": |
|
form = request.form |
|
Con1 = form["Continent1"] |
|
if Con1 == "Asia" or Con1 == "asia": |
|
var1 = 'Continent Correct!' |
|
return render_template("geoguesser.html", Continent=var1,data=Data.inputdata1(),data1=Data.inputdata2(), data2=Data.picran()) |
|
else: |
|
var1 = 'Continent Incorrect!' |
|
return render_template("geoguesser.html", Continent=var1,data=Data.inputdata1(),data1=Data.inputdata2(), data2=Data.picran()) |
|
@app.route('/c1', methods=["GET", "POST"]) |
|
def countrycheck1(): |
|
if request.method == "POST": |
|
form = request.form |
|
Coun1 = form["Country1"] |
|
if Coun1 == "India" or Coun1 == "india": |
|
var2 = 'Country Correct!' |
|
return render_template("geoguesser.html", Country=var2,data=Data.inputdata1(),data1=Data.inputdata2(), data2=Data.picran()) |
|
else: |
|
var2 = 'Country Incorrect!' |
|
return render_template("geoguesser.html", Country=var2,data=Data.inputdata1(),data1=Data.inputdata2(), data2=Data.picran()) |
|
@app.route('/C1', methods=['GET', 'POST']) |
|
def citycheck1(): |
|
if request.method == "POST": |
|
form = request.form |
|
City = form['City1'] |
|
if City == "Agra" or City == "agra": |
|
var3 = 'City Correct!' |
|
return render_template("geoguesser.html", City=var3,data=Data.inputdata1(),data1=Data.inputdata2(), data2=Data.picran()) |
|
else: |
|
var3 = 'City Incorrect!' |
|
return render_template("geoguesser.html", City=var3,data=Data.inputdata1(),data1=Data.inputdata2(), data2=Data.picran()) |
as well as entire Data.py file
Requests:
|
if request.method == "POST": |
|
form = request.form |
|
Con1 = form["Continent1"] |
Learn how to incorporate jinja. Finish the front end of the website(html and css). Speak up more and converse more with team. Ask more questions.
Proof of learning: All files except gg-covid.html & Data.py & geoguesser.html
flask:
|
@app.route("/geoguesser") |
|
def geoguesser(): |
|
return render_template("geoguesser.html", data=Data.inputdata1(), data1=Data.inputdata2(), data2=Data.picran()) |
html/Jinja: https://github.com/kenzie-rylie/geo-guesser.code-/blob/857fbf5fea3ae300911ec6a18cafc29c8cbd70fb/templates/nav-bar.html
https://github.com/kenzie-rylie/geo-guesser.code-/tree/857fbf5fea3ae300911ec6a18cafc29c8cbd70fb/templates
Python: https://github.com/kenzie-rylie/geo-guesser.code-/blob/857fbf5fea3ae300911ec6a18cafc29c8cbd70fb/Data.py
Requests:
Complete and upload a minimum of one country to the history tab. Speak up and help the team more. Complete the README.md by myself. Stay late and work after hours on our project.
Proof of learning: geo-guesser.code- / templates / gg-history.html, README.md, & Greece.html
Format and style all of the history pages. Make small revisions where needed.
Proof of learning: style.css, gg-history.html, history-africa.html, history-america.html, history-brazil.html, history-denmark.html, history-greece.html, history-iceland.html, history-india.html
HTML:
|
<b><a style="text-decoration: none" href="landing"><p class="navheader">history</p></a></b> |
|
<div class="bg-image-h"></div> |
|
|
|
<center><div class="hlinks"> |
|
<h3>Countries</h3> |
|
<a style="text-decoration: none; cursor: pointer;" href="africa">africa</a> |
|
<br><a style="text-decoration: none; cursor: pointer;" href="america">america</a> |
|
<br><a style="text-decoration: none; cursor: pointer;" href="brazil">brazil</a> |
|
<br><a style="text-decoration: none; cursor: pointer;" href="denmark">denmark</a> |
|
<br><a style="text-decoration: none; cursor: pointer;" href="greece">greece</a> |
|
<br><a style="text-decoration: none; cursor: pointer;" href="iceland">iceland</a> |
|
<br><a style="text-decoration: none; cursor: pointer;" href="india">india</a> |
|
</div></center> |
(x7 for each history page)->
|
<b><a style="text-decoration: none" href="landing"><p class="navheader">united states</p></a></b> |
|
|
|
<div class="bg-america"></div> |
|
<div class="history-header"><h1><big><b>america</b></big></h1></div> |
|
<div class="history-box"> |
|
<h2>Location</h2> |
|
<p>The U.S. is a country of 50 states covering a vast swath of North America, with Alaska in the northwest and Hawaii extending the nation’s presence into the Pacific Ocean. Major Atlantic Coast cities are New York, a global finance and culture center, and capital Washington, DC. Midwestern metropolis Chicago is known for influential architecture and on the west coast, Los Angeles' Hollywood is famed for filmmaking.</p> |
|
|
|
<h2>Capital</h2> |
|
<p>The United States Capitol, often called the Capitol Building, is the meeting place of the United States Congress and the seat of the legislative branch of the U.S. federal government. It is located on Capitol Hill at the eastern end of the National Mall in Washington, D.C.</p> |
|
|
|
<h2>Historical Events</h2> |
|
<p>1770s: Declaration of Independence (1776). 1780s: Constitution of the United States of America (1787). 1790s: Whiskey Rebellion (1794). 1800s: Louisiana Purchase (1803).1810s: Battle of New Orleans (1815). 1830s: Era of the Common Man (1829–37). 1850s: Dred Scott Decision (1857). 1860s: Battle of Gettysburg (1863). 1940s: The Atomic Bombing of Hiroshima and Nagasaki (1945).</p> |
|
|
|
<h2>Fun Facts</h2> |
|
<p>New York was once New Amsterdam. There’s a palace made totally out of corn. The Statue of Liberty speaks French. Alaska was once Russian. The Liberty Bell is from London. There’s a shop inside a dinosaur’s tummy. The Golden Gate Bridge never stops getting a makeover. London Bridge is in Arizona.</p> |
|
</div> |
CSS:
|
.hlinks{ |
|
text-align: center; |
|
line-height: 80px; |
|
font-size: 50px; |
|
width: 600px; |
|
border-radius: 50px; |
|
padding: 10px; |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-52.5%, -50%); |
|
padding-bottom: 50px; |
|
} |
|
|
|
div.hlinks { |
|
margin: 30px; |
|
background-color: #ffffff; |
|
opacity: 0.8; |
|
} |
|
|
|
.bg-image-h { |
|
background-image: url('https://wildnordics.com/wp-content/uploads/2019/01/Dolomites_Italy.jpg'); |
|
filter: blur(8px); |
|
-webkit-filter: blur(8px); |
|
height: 100%; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
background-size: cover; |
|
} |
|
|
|
.history-box { |
|
background-color: lightgray; |
|
border-radius: 50px; |
|
padding: 30px; |
|
width: 1700px; |
|
border-radius: 50px; |
|
position: absolute; |
|
top: 55%; |
|
left: 50%; |
|
transform: translate(-52.5%, -50%); |
|
font-size: 17px; |
|
font-family: 'Open Sans', sans-serif; |
|
opacity: 0.8; |
|
} |
|
|
|
.history-header { |
|
background-color: lightgray; |
|
text-align: center; |
|
font-family: 'Major Mono Display',Regular; |
|
width: 400px; |
|
border-radius: 20px; |
|
position: absolute; |
|
left: 40%; |
|
top: 8%; |
|
opacity: 0.8 |
|
} |
|
|
|
.bg-africa { |
|
background-image: url('https://cdn-a.william-reed.com/var/wrbm_gb_food_pharma/storage/images/publications/feed/feednavigator.com/article/2020/07/16/african-development-bank-led-project-boosts-grain-production-in-niger/11587707-2-eng-GB/African-Development-Bank-led-project-boosts-grain-production-in-Niger.jpg'); |
|
height: 100%; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
background-size: cover; |
|
filter: blur(8px); |
|
-webkit-filter: blur(8px); |
|
} |
|
|
|
.bg-america { |
|
background-image: url('https://wallup.net/wp-content/uploads/2015/12/269399-nature-landscape-trees-mountain-clouds-sky-valley-cliff-USA-Wyoming-national_park-forest-Yosemite_National_Park.jpg'); |
|
height: 100%; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
background-size: cover; |
|
filter: blur(8px); |
|
-webkit-filter: blur(8px); |
|
} |
|
|
|
.bg-brazil { |
|
background-image: url('https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/08/e13-1.jpg'); |
|
height: 100%; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
background-size: cover; |
|
filter: blur(8px); |
|
-webkit-filter: blur(8px); |
|
} |
|
|
|
.bg-denmark { |
|
background-image: url('https://wallpaperaccess.com/full/1495665.jpg'); |
|
height: 100%; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
background-size: cover; |
|
filter: blur(8px); |
|
-webkit-filter: blur(8px); |
|
} |
|
|
|
.bg-greece { |
|
background-image: url('https://www.athensinsider.com/wp-content/uploads/2018/05/Zakynthos-900x563.jpg'); |
|
height: 100%; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
background-size: cover; |
|
filter: blur(8px); |
|
-webkit-filter: blur(8px); |
|
} |
|
|
|
.bg-iceland { |
|
background-image: url('https://blog.topazlabs.com/wp-content/uploads/2015/01/DSC2159-Edit1.jpg'); |
|
height: 100%; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
background-size: cover; |
|
filter: blur(8px); |
|
-webkit-filter: blur(8px); |
|
} |
|
|
|
.bg-india { |
|
background-image: url('https://img.traveltriangle.com/blog/wp-content/uploads/2017/03/Cover27.jpg'); |
|
height: 100%; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
background-size: cover; |
|
filter: blur(8px); |
|
-webkit-filter: blur(8px); |
|
} |
Make an interactable interface on the website. Create the live covid cases tab for each country.
Note: I accidentally added my entire project folder to the repository, which is why covidscraper.py is in its own folder.
Proof of learning: gg-covid.html, mapclickproject / covidscraper.py
main.py - Importing flask to our website
Data.py - James' jinja playground
env - The flask module added to our website
.idea - Installion of virtual flask environment
Geoguesser.py - An attempt at to set a jinja variable to a input using phyton (unsuccessful)
covidscraper.py - Experimentation with webscraping (work in progress)
templates / gg-covid.html - Live covid cases per country
templates / gg-geo.html - Geo-Guesser game
templates / gg-history.html - Historical facts for each country
templates / gg-home.html - Homepage for the website
templates / gg-landing.html - Video background for the home screen
templates / gg-p5.html - Nav bar for each tab
templates / base.html - Imported to set equal to jinja variables
templates / history-[country].html - 7 different information pages about different countries
static / style.css - Styling for each website tab
README.md - Creates an easy overview of the website