I like having this website (www.geektechstuff.com) hosted, but at times I also need a local website for testing whatever I’m looking at at the time (e.g. JavaScript). Previously I’ve just thrown a few lines of HTML down leaving a very sparse looking page that may (or may not) demonstrate the functions I’m looking at but in a very bland way.
Realising that this method a) leaves me with a poor looking testing site and b) is probably costing me more time in the long run (even sparse HTML can take time to rewrite), I decided I had two options. I could either create and copy a HTML template each time or I could design an “offline” (e.g. for my own use) website that actually looks a little bit like a working online website. The second option would allow me to put some of my HTML/CSS skills to use and give me more reasons to write about the various web frontend and backend technologies that are available.
With that in mind I decided to get working on a site that slightly echos the current geektechstuff.com website, i.e. a logo, nav bar at the top, a main feature (e.g. blog post) and three article snippets in the middle and a footer at the bottom. I can then use the “main feature” area of the test site to show off stuff like JavaScript functions.
I was originally going to write three small article snippets for the page but decided that I should take the approach of either copying the snippets from the current site or just generating some random text (similar to how Lorem Ipsum is used). I have used JavaScript to create some text (random length) and then update the article snippets with different text / text length on each refresh. I have used CSS to align the boxes and added a wrap text property to make sure text does not flow outside the box.
With the basics design and functionality of the test site complete I can now play with (or test) functionality that I may want to write about in future and produce nicer looking screen grabs for anyone interested in reading my blog posts about web technology. For example, if I was going to write about the location abilities of web pages I would have in the past just outputted the longitude / latitude onto plain HTML but now I can output them into my test site (Note: I’ve blocked out the actual longitude / latitude on the screen grab).
I could then look to go further and adjust earlier projects, e.g. my Python local weather application into Javascript to display on the test website what the local weather is like.
The Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/main.css" type="text/css" rel="stylesheet" />
<title>GeekTechStuff</title>
</head>
<body>
<div id="header">
<img src="images/GTSLogo.svg" class="logo" alt="GeekTechStuff Logo"/>
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Categories</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p> Main Feature </p>
<div id="article_1">
<p id="p_article_1">Article 1</p>
</div>
<div id="article_2">
<p id="p_article_2">Article 2</p>
</div>
<div id="article_3">
<p id="p_article_3">Article 3</p>
<script src="js/main.js"></script>
</div>
</div>
</div>
<div id="footer">
<p>Thanks for reading <a href="https://www.geektechstuff.com">GeekTechStuff.com</a></p>
</div>
</body>
</html>CSS
body {
margin: 0;
background-color: rgb(191, 245, 245);
width: 100%;
}
#content {
overflow: auto;
height: 99%;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
}
#nav {
background-color: rgb(77, 200, 221);
margin: 25px;
text-align: center;
width: 100%;
margin-left: auto;
margin-right: auto;
}
#footer {
background-color: rgb(77, 200, 221);
margin: 25px;
text-align: center;
width: 100%;
margin-left: auto;
margin-right: auto;
}
li {
display: inline;
padding: 5px;
align-items: center;
text-align: center;
}
#feature {
background-color: azure;
margin: 1%;
text-align: center;
width: 95%;
}
#article_1 {
background-color: azure;
margin: 1%;
width: 31%;
float: left;
word-wrap: break-word;
}
#article_2 {
background-color: azure;
margin: 1%;
width: 31%;
float: left;
word-wrap: break-word;
}
#article_3 {
background-color: azure;
margin: 1%;
width: 31%;
float: left;
word-wrap: break-word;
}JavaScript
Main Page:
function generateText(length) {
/* function to generate some text for the articles section
of the test geektechstuff website */
var generatedText = "";
var alphabet ="abcdefghijklmnopqrstuwxyz";
for( var i=0; i < length; i++){
generatedText += alphabet.charAt(Math.floor(Math.random()*26))
}
return generatedText;
}
function generateArticle() {
/* generates a random article of text from generateText */
var generatedArticle = "";
var amountToGenerate = Math.random() * (300 - 25) + 250;
generatedArticle = generateText(amountToGenerate);
return generatedArticle;
}
/* updates article 1, 2 and 3 to show some text */
var pArticle_1 = document.getElementById("p_article_1");
var pArticle_2 = document.getElementById("p_article_2");
var pArticle_3 = document.getElementById("p_article_3");
pArticle_1.innerHTML=generateArticle();
pArticle_2.innerHTML=generateArticle();
pArticle_3.innerHTML=generateArticle();Location:
var mapLocation = document.getElementById("main_feature")
navigator.geolocation.getCurrentPosition(success,fail);
mapLocation.textContent = "Locating..."
// outputs longitude and latitude if location is a success
function success(position) {
longitude = position.coords.longitude;
latitude = position.coords.latitude;
longLatMsg = "Longitude: "+longitude+" Latitude: "+latitude;
mapLocation.textContent = longLatMsg;
}
// outputs error message as page content if location fails
function fail(msg) {
mapLocation.textContent = msg
}
GeekTechStuff 