11- 13 new routes every two weeks. Sound good? Come check us out!
Want to keep track of your progress? Log your routes and get achievements!
Check out some of our Climbing Routes
55+ climbing routes on the wall
One wall section reset every 2 weeks, around 11-13 climbing routes of various difficulty in total
Tired of our routes, make your own and tape them on the wall
Are you a Wall Walkers Member? Track your progress using our app.
25° Moonboard for those seeking to up their training to the next level
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid white;
text-align: left;
padding: 8px;
cursor: pointer;
background-color: black;
transition: all 0.3s ease;
color: white;
}
td:hover {
background-color: #fff000;
color: black;
}
.selected {
background-color: #fff000;
color: black;
}
#sort-table {
display: none;
}
/* Animation property */
button {
animation: wiggle 2s linear infinite;
}
/* Keyframes */
@keyframes wiggle {
0%, 7% {
transform: rotateZ(0);
}
15% {
transform: rotateZ(-15deg);
}
20% {
transform: rotateZ(10deg);
}
25% {
transform: rotateZ(-10deg);
}
30% {
transform: rotateZ(6deg);
}
35% {
transform: rotateZ(-4deg);
}
40%, 100% {
transform: rotateZ(0);
}
}
body {
background: #000;
}
button {
position: relative;
left: calc(50% – 3em);
top: calc(50% – 2em);
height: 4em;
width: 7em;
background: #444;
background: linear-gradient(top, #555, #333);
border: none;
border-top: 3px solid #fff000;
border-radius: 0 0 0.2em 0.2em;
color: #fff;
font-family: Helvetica, Arial, Sans-serif;
font-size: 1em;
transform-origin: 50% 5em;
}
var selectedRow;
function highlightRow(row) {
if (selectedRow) {
selectedRow.classList.remove(“selected”);
}
selectedRow = row;
row.classList.add(“selected”);
// row.classList.add(“selected-item”);
// document.getElementById(“selected-item”).innerHTML = row.cells[0].innerHTML;
}
Show Routes
const toggleBtn = document.querySelector(“#toggle-btn”);
const content = document.querySelector(“#sort-table”);
toggleBtn.addEventListener(“click”, function() {
if (content.style.display === “none” | content.style.display === “”) {
content.style.display = “block”;
} else {
content.style.display = “none”;
}
});
let listRoutes;
document.addEventListener(‘readystatechange’, event => {
// When window loaded ( external resources are loaded too- `css`,`src`, etc…)
if (event.target.readyState === “complete”) {
//Get request to server
Update();
}
});
function Update(){
//Get request to server
httpGetAsync(“https://dokku.wallwalkersbouldering.com/climbingRoutes/onWall”, ParseServerData);
}
function httpGetAsync(theUrl, callback)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open(“GET”, theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
function ParseServerData(serverResponse){
//Parse the response to ensure it is an object
listRoutes = JSON.parse(serverResponse);
console.log(listRoutes);
//Iterate over the parsedResponse
listRoutes.forEach(route => {
// Create a new table row
let newRow = document.createElement(“tr”);
newRow.onclick = function () {
highlightRow(this);
let selectedRoute = findRouteById(route._id);
// console.log(selectedRoute);
displayRoute(selectedRoute);
};
// Create a new table cell for route name
let nameCell = document.createElement(“td”);
nameCell.innerHTML = route.routeName;
nameCell.id = route._id;
// Append the new cell to the new row
newRow.appendChild(nameCell);
// Append the new row to the table
document.getElementById(“sort-table”).appendChild(newRow);
});
}
function findRouteById(routeId) {
for (let i = 0; i < listRoutes.length; i++) {
if (listRoutes[i]._id === routeId) {
return listRoutes[i];
}
}
return null;
}
function displayRoute(route){
console.log(route);
console.log(route.routeDescription);
//Hide the menu list
let tglCard = document.getElementById("card");
content.style.display = "none";
let routeName = document.getElementById("card-title");
//Get the documents
// let colourGrade = document.getElementById("route-ColourGrade");
// let setterGrade = document.getElementById("route-SetterGrade");
// let votedGrade = document.getElementById("route-VotedGrade");
// let wallSection = document.getElementById("route-WallSection");
// let description = document.getElementById("route-Description");
let routeInfo = document.getElementById("route-Info");
//Update the document elements
routeName.innerHTML = route.routeName;
// colourGrade.innerHTML = route.routeDifficulty;
// setterGrade.innerHTML = "Setter Grade: V" + route.setterDifficulty;
// votedGrade.innerHTML = "Voted Grade: V" + route.votedDifficulty;
// wallSection.innerHTML = route.wallSection;
// description.innerHTML = route.routeDescription;
routeInfo.innerHTML = `
Located on ${route.wallSection} this is graded V${route.setterDifficulty} by the
setter making it a ${route.routeDifficulty} route and currently voted V${route.votedDifficulty} by the community.
It is described by some as ${route.routeDescription}.`;
tglCard.style.display = "block";
}
.card {
width: 400px;
height: auto;
margin: 0 auto;
background-color: #fff;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
position: relative;
transition: all 0.3s ease-in-out;
}
@media (max-width: 767px) {
.card {
width: 90%;
height: auto;
}
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.2);
}
.card-header {
background-color: #333;
color: #fff000;
padding: 20px;
text-align: center;
}
.card-title {
margin: 0;
font-size: 24px;
color: #fff000;
}
.card-content {
padding: 20px;
font-size: 18px;
}
.card-footer {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
.btn {
border: none;
border-radius: 25px;
padding: 10px 20px;
font-size: 18px;
text-decoration: none;
color: #fff;
background-color: #333;
transition: all 0.3s ease-in-out;
}
.btn:hover {
background-color: #555;
}
.card{
display: none;
}
Card Title
Check Us Out
