Project Page

Introduction to My Cybersecurity Projects

Welcome to my cybersecurity project portfolio! As an aspiring cybersecurity enthusiast, I have embarked on a journey to explore, learn, and contribute to the world of digital security. This portfolio serves as a testament to my dedication and growth in the field of cybersecurity.

I have explored the fundamental aspects of cybersecurity and learned how to protect digital environments from potential threats. This portfolio will document my progress as I acquire essential knowledge and skills to safeguard digital assets. Each project has been a stepping stone in my quest to become a proficient cybersecurity professional.

Please join me on this journey as I navigate the exciting realm of cybersecurity, facing challenges, and acquiring expertise along the way. Together, we will discover the importance of online security and explore the tools and techniques needed to defend against cyber threats.

Thank you for accompanying me on this cybersecurity adventure. Let's begin the journey towards a safer digital world!

Building a Password Strength Checker for Google Sites: My Beginner's Journey

Try my demo below! 👇🔐⌨️

I began by researching the basic HTML structure for a web page and found I would also need to write some of the code in JavaScript. I have only studied Python so far. Since these were both new to me, I looked on several videos/websites for step-by-step instructions on how to create a password checker in JavaScript.

Here is what I used to learn about JavaScript and HTML:

Password Strength Checker using JavaScript Tutorial DEMO

- This video provides a demo and tutorial on creating a password strength checker using JavaScript.
Password Strength Checker | JavaScript Web App
- This video guides you through creating a JavaScript web app for password strength checking.
Password Strength Checker[ Using JAVASCRIPT]
- In this video, you can learn how to implement a password strength checker using JavaScript.
Password Strength Checker In JavaScript With Source Code
- This tutorial includes the source code for a password strength checker implemented in JavaScript.
How to Make Password Strength Checker in HTML CSS
- While this video focuses on HTML and CSS, it may also cover JavaScript aspects of creating a password strength checker.

Step 1: Setting the Goal

First, I need to understand what I want to achieve. I want a tool that can check the strength of passwords for my website users, so their accounts are secure.

Step 2: Learning HTML

I started by learning HTML, the basic language for web development. It was a bit confusing at first, but I followed online tutorials and practiced creating simple web pages.
Stumbling Block: Remembering all those HTML tags is tricky. I have a cheat sheet handy.

Step 3: Creating the Structure

Now, I created a new HTML file for my password strength checker. I added an input field for users to enter their passwords and a button to check the strength.
Stumbling Block: Aligning elements and making them look good took some trial and error.

Part 1: This is the HTML document starting with <!DOCTYPE html>.

The document has a <head> section where you set the page title and include some CSS styles.

In the <body> section, I built the interactive part of the password strength checker.

<!DOCTYPE html>

<html>

<head>

<title>Password Strength Checker Demo</title>

<style>

#password-strength {

width: 300px;

padding: 10px;

margin: 20px 0;

border: 1px solid #ccc;

}

</style>

</head>

<body>

Part 2: Build the Input Element HTML:

This creates an input field for the user to enter their password.
It has an id attribute set to "password," which helps identify this input in JavaScript.

Part 3: Build the Output Element HTML:

This is a div element with the id "password-strength" where it will display the password strength result.

Step 4: Learning JavaScript

I realized I needed JavaScript to check the password strength. JavaScript seemed like a whole new world, but I took it step by step. There were some similarities to learning Python. I learned about variables, functions, and how to manipulate HTML elements.
Stumbling Block: Debugging errors in my code was frustrating, but I didn't give up. I asked for help in coding forums.

Part 4: Building interactive code using JavaScript:

I had to use JavaScript to make the page interactive.

- I got references to the input field and the output div using getElementById.
- I added an event listener to the input field, which listens for changes as the user types ('input' event).
- When the input changes, it calls the calculatePasswordStrength function with the entered password and then displays the result using displayPasswordStrength.
calculatePasswordStrength Function:
- This function evaluates the password strength.
- It checks if the password has a minimum length, doesn't contain the username, and includes characters from various categories (uppercase, lowercase, digits, and special characters).
- Depending on these checks, it assigns a strength score (0 to 100) to the password.
displayPasswordStrength Function:
- This function displays the password strength in the div element based on the strength score calculated.
- It shows "Strong Password" if the score is 100, and "Weak Password" otherwise.

const passwordInput = document.getElementById('password');

const passwordStrength = document.getElementById('password-strength');

passwordInput.addEventListener('input', () => {

const password = passwordInput.value;

const strength = calculatePasswordStrength(password);

displayPasswordStrength(strength);

});

Step 5: Adding the Password Strength Logic

I found a JavaScript library that could help me check password strength. I integrated it into my code and added logic to display the strength.
Stumbling Block: Understanding how the library worked took some time. Reading documentation and experimenting helped.

I used the following online criteria for creating strong passwords(I know I could have used better criteria but I just took the first thing Google showed me 😅)

Be at least 6 characters long
Not contain the user account name or full name
Contain characters from at least 3 of the 4 following categories:
Uppercase English letters (A-Z) Lowercase English letters (a-z)
Base 10 digits (0-9)
Non-alphabetic characters (such as $, !, %)

Here was my code so far:
I got it working but I needed to add an output that shows the level of complexity of the password entered by the user.

<!DOCTYPE html>

<html>

<head>

<title>Password Strength Checker Demo</title>

<style>

#password-strength {

width: 300px;

padding: 10px;

margin: 20px 0;

border: 1px solid #ccc;

}

</style>

</head>

<body>

<h2>Password Strength Checker Demo</h2>

<p>Enter your password below to check its strength:</p>

const passwordInput = document.getElementById('password');

const passwordStrength = document.getElementById('password-strength');

passwordInput.addEventListener('input', () => {

const password = passwordInput.value;

const strength = calculatePasswordStrength(password);

displayPasswordStrength(strength);

});

function calculatePasswordStrength(password) {

const lengthRegex = /.{6,}/;

const usernameRegex = new RegExp(passwordInput.value, 'i');

const uppercaseRegex = /[A-Z]/;

const lowercaseRegex = /[a-z]/;

const digitRegex = /[0-9]/;

const specialCharacterRegex = /[^A-Za-z0-9]/;

const hasLength = lengthRegex.test(password);

const doesNotContainUsername = !usernameRegex.test(password);

const categories = [uppercaseRegex, lowercaseRegex, digitRegex, specialCharacterRegex];

const meetsCategories = categories.reduce((acc, regex) => acc + regex.test(password), 0);

const strengthScore = (hasLength && doesNotContainUsername && meetsCategories >= 3) ? 100 : 0;

return strengthScore;

}

function displayPasswordStrength(strength) {

if (strength === 100) {

passwordStrength.innerHTML = "Strong Password";

passwordStrength.style.color = "green";

} else if (strength > 0) {

passwordStrength.innerHTML = "Weak Password";

passwordStrength.style.color = "orange";

} else {

passwordStrength.innerHTML = "Very Weak Password";

passwordStrength.style.color = "red";

}

</script>

</body>

</html>

This script now evaluated the password based on my specified rules and provided feedback on its strength. It will display "Strong Password" in green, "Weak Password" in orange, or "Very Weak Password" in red, depending on the complexity of the entered password.

Found a bug🪳🐞!
Found that the message only outputs "Very Weak Password" despite password length or difficulty, to fix the script and make it accurately evaluate the password strength, I updated the calculatePasswordStrength function as follows:

function calculatePasswordStrength(password) {

const lengthRegex = /.{6,}/;

const usernameRegex = new RegExp(passwordInput.value, 'i');

const uppercaseRegex = /[A-Z]/;

const lowercaseRegex = /[a-z]/;

const digitRegex = /[0-9]/;

const specialCharacterRegex = /[^A-Za-z0-9]/;

const hasLength = lengthRegex.test(password);

const doesNotContainUsername = !usernameRegex.test(password);

const categories = [uppercaseRegex, lowercaseRegex, digitRegex, specialCharacterRegex];

const meetsCategories = categories.reduce((acc, regex) => acc + regex.test(password), 0);

let strengthScore = 0;

if (hasLength) {

if (doesNotContainUsername && meetsCategories >= 3) {

strengthScore = 100;

} else {

strengthScore = 50; // Weak Password

}

return strengthScore;

}

With these changes, the script now properly evaluates the password's strength and now displays "Strong Password" for passwords that meet the specified criteria, and "Weak Password" for passwords that don't fully meet the criteria but have a minimum length.

Step 6: Testing Locally

I tested my password strength checker on my computer's web browser. It worked, but I had to make several tweaks to get it just right.
Stumbling Block: Compatibility issues with different browsers were a challenge. I had to research and make adjustments.

Step 7: Embedding in Google Sites

Then, I embedded my password strength checkerinto my Google Sites page using the "Embed" option. It was a bit intimidating, but I followed Google's instructions.
Stumbling Block: Adjusting the size and layout of the embedded content to fit my site design was tricky.

Step 8: Sharing with the World

I tested my Google Sites page with friends to make sure everything worked as expected. They provided feedback, and I made some final adjustments.
And there you have it! I successfully created and embedded a password strength checker into my Google Sites page. It was a challenging but rewarding journey as a beginner in coding.

Next project

Project Page

Introduction to My Cybersecurity Projects

Building a Password Strength Checker for Google Sites: My Beginner's Journey

Try my demo below! 👇🔐⌨️

Step 1: Setting the Goal

Step 2: Learning HTML

Step 3: Creating the Structure

Step 4: Learning JavaScript

Step 5: Adding the Password Strength Logic

Found a bug🪳🐞!Found that the message only outputs "Very Weak Password" despite password length or difficulty, to fix the script and make it accurately evaluate the password strength, I updated the calculatePasswordStrength function as follows: function calculatePasswordStrength(password) {

const lengthRegex = /.{6,}/;

const usernameRegex = new RegExp(passwordInput.value, 'i');

const uppercaseRegex = /[A-Z]/;

const lowercaseRegex = /[a-z]/;

const digitRegex = /[0-9]/;

const specialCharacterRegex = /[^A-Za-z0-9]/;

const hasLength = lengthRegex.test(password);

const doesNotContainUsername = !usernameRegex.test(password);

const categories = [uppercaseRegex, lowercaseRegex, digitRegex, specialCharacterRegex];

const meetsCategories = categories.reduce((acc, regex) => acc + regex.test(password), 0);

let strengthScore = 0;

if (hasLength) {

if (doesNotContainUsername && meetsCategories >= 3) {

strengthScore = 100;

} else {

strengthScore = 50; // Weak Password

}

}

return strengthScore;

}

With these changes, the script now properly evaluates the password's strength and now displays "Strong Password" for passwords that meet the specified criteria, and "Weak Password" for passwords that don't fully meet the criteria but have a minimum length.

Step 6: Testing Locally

Step 7: Embedding in Google Sites

Step 8: Sharing with the World

Found a bug🪳🐞!
Found that the message only outputs "Very Weak Password" despite password length or difficulty, to fix the script and make it accurately evaluate the password strength, I updated the calculatePasswordStrength function as follows:

function calculatePasswordStrength(password) {