Where it all started
I'd been made redundant in October 2018 and had been given a bit of money so I basically sat around deciding what I wanted to do next whilst I had a bit of money to tide me over. I'd been working in a call centre and absolutely hated it so was quite glad to be free and able to do as I please (to an extent). For two months I basically did nothing as I enjoyed sitting watching tv, or playing games, not having to deal with 100 plus calls a day any more.
After a while though I realised I'd have to do something or risk running out of money, not being able to pay rent, have to move back home, the list goes on... Initially I thought about blogging as I'd done a degree in Creative Writing so this seemed like putting my degree to good use. I stumbled across a site called Medium and started blogging on there for a time. I soon realised that trying to pay rent with the proceeds from this wouldn't keep me afloat or fed for that matter (on my best month, I earned 80 quid, I can see why Mark Manson tells anyone wanting to start a blog for money to not bother), I needed a new plan.
I stumbled across a blog entitled something like 'how to become a web developer in 2019' and started to follow the roadmap of links it provided. It lead me to links such as What is the Internet and the classic CS50 at Harvard online course. Unfortunately this learning period coincided with me running out of money and having to pick up a job in customer service. Web development would be on hiatus for around a year or so.
Lockdown
Fast forward to lockdown and suddenly I had way more time on my hands. More time to think, 'Is this the job I really want to pursue as a career?' It wasn't, so I began to pick up where I'd left off with the old web development in the summer of 2020 when everyone was in lockdown and going to the shops was the only way to get out and about. During this period, I started to learn JavaScript and distinctly remember looking at mdn docs for the first time and and thinking 'what the hell is this!?'.
I struggled with JavaScript and come October I was close to giving up and didn't really know what to do. It was then that I came across The Odin Project. This had pretty much been what I was looking for - a comprehensive step by step framework that would teach me what I needed to know. I tried to burn through the foundation course as quickly as I could and built my first project along the way.
Behold my Rock, Paper, Scissors game! All 131 lines of code that went into it.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>
</div>
<div id="results">
<h2>Computer Score</h2>
<p id="computer"></p>
<h2>Player Score</h2>
<p id="player"></p>
<h3>Result</h3>
</div>
<script>
// adding button functionality so selects player's choice and does playRound function
const buttons = document.querySelectorAll('button');
buttons.forEach((button) => {
button.addEventListener('click', () => {
playRound(button.id);
checkWinner();
});
});
// Computer selects their choice.
function computerPlay() {
let compChoice = Math.random();
if (compChoice < 0.33) {
return 'Rock';
} else if (compChoice < 0.66) {
return 'Scissors';
} else {return 'Paper';}
}
// Play a round of Rock Paper Scissors.
let regexRock = /rock/i;
let regexScis = /scissors/i;
let regexPap = /paper/i;
let compScore = 0;
let playerScore = 0;
const results = document.querySelector('#results');
const player = document.querySelector('#player');
const computer = document.querySelector('#computer');
computer.textContent = `${compScore}`;
player.textContent = `${playerScore}`;
function playRound(playerSelection, computerSelection) {
computerSelection = computerPlay();
if (playerSelection.match(regexRock) && computerSelection === "Scissors" || playerSelection.match(regexPap) && computerSelection === "Rock" || playerSelection.match(regexScis) && computerSelection === "Paper") {
++playerScore;
const win = document.createElement('div');
win.textContent = "You win!";
results.appendChild(win);
player.textContent = `${playerScore}`;
setTimeout(function(){
win.remove();
}, 1000);
} else if (playerSelection.match(regexRock) && computerSelection === "Paper" || playerSelection.match(regexPap) && computerSelection === "Scissors" || playerSelection.match(regexScis) && computerSelection === "Rock") {
++compScore;
const lose = document.createElement('div');
lose.textContent = "You Lose!";
results.appendChild(lose);
computer.textContent = `${compScore}`;
setTimeout(function(){
lose.remove();
}, 1000);
} else {
const draw = document.createElement('div');
draw.textContent = "It's a draw!";
results.appendChild(draw);
setTimeout(function(){
draw.remove();
}, 1000);
}
}
// Adding conditional so resets once player or computer gets to five points and announces winner.
function checkWinner() {
if (compScore === 5) {
compScore = 0;
playerScore = 0;
const compWin = document.createElement('div');
compWin.textContent = "The computer won!";
results.appendChild(compWin);
setTimeout(function(){
compWin.remove();
}, 2000);
} else if (playerScore === 5) {
compScore = 0;
playerScore = 0;
const playerWin = document.createElement('div');
playerWin.textContent = "Player won!";
results.appendChild(playerWin);
setTimeout(function(){
playerWin.remove();
}, 2000);
} else {}
computer.textContent = `${compScore}`;
player.textContent = `${playerScore}`;
}
</script>
</body>
</html>
Live Version
No turning back
I carried on with the course and soon started learning HTML, CSS and JavaScript in further depth. I also built several more projects along the way including the archetypal Weather Application. At this point I just wanted to study full time and quit my job - which I did! I'd saved myself plenty of money and thought I could nab a job in six months, or that was the goal I set myself. During this time I carried on the course and started applying for jobs even though I felt nowhere near ready. I also had a spreadsheet of all the jobs I'd applied to so I didn't get lost. After several months of getting nowhere with my job hunt, including a couple of interviews which didn't go well at all, I decided I needed a new plan.
I'd looked at coding bootcamps previously but had always been put off by the price and also having a 'I'll do it myself attitude', who knows how long it might have taken me to get a role if I'd still had this mindset... In the end I applied to a bootcamp under a government scheme and managed to get accepted, get in! I was delighted as up to this point I'd basically had no-one to look at my code or to turn to if I needed help and had to rely on forums which can be demoralising to say the least.
Part Two to follow...