Welcome to geo-guesser!

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!

How to run the site

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

1. Iceland

2. United States

3. Greece

4. 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.

Goals

James

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:

geo-guesser.code-/main.py

Lines 30 to 32 in 857fbf5

	@app.route("/geoguesser")
	def geoguesser():
	return render_template("geoguesser.html", data=Data.inputdata1(), data1=Data.inputdata2(), data2=Data.picran())

post:

geo-guesser.code-/main.py

Lines 34 to 66 in 275ffa0

	@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:

geo-guesser.code-/templates/geoguesser.html

Lines 27 to 48 in 265e4b9

	<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:

geo-guesser.code-/main.py

Lines 34 to 66 in 265e4b9

	@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:

geo-guesser.code-/main.py

Lines 36 to 38 in 265e4b9

	if request.method == "POST":
	form = request.form
	Con1 = form["Continent1"]

Kenzie

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:

geo-guesser.code-/main.py

Lines 30 to 32 in 857fbf5

	@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:

Lucas

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

Sam

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:

geo-guesser.code-/templates/gg-history.html

Lines 4 to 16 in c2e7e47

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

geo-guesser.code-/templates/history-america.html

Lines 3 to 19 in a689d9a

	<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:

geo-guesser.code-/static/style.css

Lines 114 to 239 in a689d9a

	.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);
	}

Kira

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

File Descriptions

Python Code Files

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)

HTML Code Files

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

CSS Code Files

static / style.css - Styling for each website tab

Non-Code Files

README.md - Creates an easy overview of the website