Forem: Shawn2208

Tutorial on making a database and then using my API-Template from GIT

Shawn2208 — Sun, 25 Feb 2024 20:18:46 +0000

Creating an account and setting up a database with a collection on MongoDB Atlas involves a series of straightforward steps. MongoDB Atlas is a cloud database service that provides you with a hosted MongoDB service, making it easier to set up, operate, and scale your databases. Here's a step-by-step guide you can follow for your tutorial:

Step 1: Sign Up for MongoDB Atlas

Go to the MongoDB Atlas website: Open your web browser and navigate to the MongoDB Atlas website.

https://www.mongodb.com/cloud/atlas/register

Create an account: Click on the "Start Free" or "Sign Up" button. You will need to provide your email, create a password, and fill out any other required information.

Verify your email: After signing up, check your email for a verification message from MongoDB Atlas and follow the instructions to verify your email address.

Step 2: Create a Cluster

Create a new cluster: Click on the "Build a Cluster" button. You can choose a free tier cluster for testing purposes.

Step 3: Configure Security Settings
Create a database user: Navigate to the "Database Access" section under "Security". Click "Add New Database User", and create a user with read and write privileges to any database. Remember the username and password, as you will need them to connect to your database.

Whitelist your IP address: In the "Network Access" section, add your current IP address to the IP whitelist to allow connections from your location,

Click on "Finish and Close"

Now you will be taken to this page

Click connect

Now you will need to click on drivers.

You will now need to copy that mongodv+serv string click on the copy icon the right of it.

Then after that for put that string in a .env file should look like this

For now just go back to atlas and click on the "Add Data "

Then Click on the button "start" Create Database on Atlas
Add data directly in the Atlas interface.

Now Type in the database name Generic and the collection name GenericModel scroll a little bit down and click on "Create Database" button.

Should now be on this screen

Now go back to your VSCode i am just assuming you're using that.
In your .env file need to adjust the string from this

To This

Clone the GitHub Repository

Open Terminal or Command Prompt: Access your terminal on macOS/Linux or Command Prompt/Powershell on Windows.

Navigate to your project directory: Use the cd command to navigate to the folder where you want to clone the repository.

cd path/to/your/project/directory
Clone the repository: Execute the following command to clone the repository:

git clone https://github.com/Shawn2208/API-Template.git

Navigate to the cloned directory: Once the cloning process is complete, move into the cloned repository's directory:

cd API-Template

Now just type in the terminal code .env a file should pop up now just put that string inside this file.

You will also need to run

npm install

In your terminal installing all the necessary dependencies.

Run:

node server.js

If you have followed this correctly it will tell you mongodb is connected and the localhost:3000 now the endpoint is:

http://localhost:3000/api/endpoint

It will be blank cause you have no data in your database.

As you proceed to develop this application further, consider exploring more advanced features of MongoDB Atlas such as data encryption, automated backups, and performance monitoring to ensure your application remains robust, secure, and performant.

And also have a look at the README.md file more info is in there.

Give us a like or comment your thought's maybe next i will show you in depth with what needs to be renamed and etc in the API folder.

In conclusion, this tutorial has guided you through the essential steps of setting up a MongoDB Atlas account, creating and configuring a database cluster, and integrating it with an application by cloning a GitHub repository and configuring the connection string within a .env file. From signing up for MongoDB Atlas, securing your database with a user and IP whitelist, to creating a database and collection named Generic and GenericModel, respectively, you have learned the foundational steps necessary to leverage MongoDB Atlas for cloud-based database management.

Building a Maze Game in Node.js

Shawn2208 — Fri, 02 Feb 2024 15:43:18 +0000

Hi in this tutorial i will show you how to create a simple maze game in Node.js. The player will have to navigate through a field of holes to find their hat or whatever you want it to be without falling into any holes. This project is ideal for people that have a basic understanding of JavaScript and wanting to grow you're skills.

Before we start coding, here's what you need to know:

No External Dependencies: This game uses only Node.js. There are no external libraries or frameworks to install.
Single File Setup: The entire game is contained within a single JavaScript file.
Pre-requisites: Ensure you have Node.js installed on your computer. You can download it from Node.js official website if it's not already installed.

All you need to do is create a new JavaScript file (mazeGame.js) and follow along with this tutorial.

Step 1: Setting Up
First, we need to import the readline module to handle command line input:

const readline = require('readline');

Step 2: Defining the Game Characters
We'll use different characters to represent elements in the game:

const hat = '^';          // The hat
const hole = 'O';         // The holes
const fieldCharacter = '░';  // Open field
const pathCharacter = '*';   // The path taken

Step 3: Creating the Field
The initializeField function generates the maze:

function initializeField(height, width, percentage) {
  // Create a 2D array representing the field
  const field = new Array(height).fill(0).map(el => new Array(width));

  // Fill the field with holes and open spaces
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const prob = Math.random();
      field[y][x] = prob > percentage ? fieldCharacter : hole;
    }
  }
  return field;
}

Step 4: Placing the Hat
The setHatLocation function places the hat randomly in the field:

function setHatLocation(field, height, width) {
  let hatLocation;

  // Ensure the hat is not at the starting position
  do {
    hatLocation = {
      x: Math.floor(Math.random() * width),
      y: Math.floor(Math.random() * height)
    };
  } while (hatLocation.x === 0 && hatLocation.y === 0);

  field[hatLocation.y][hatLocation.x] = hat;
  return field;
}

Step 5: Displaying the Field
The printField function prints the current state of the field:

function printField(field) {
  const displayString = field.map(row => row.join('')).join('\n');
  console.log(displayString);
}

Step 6: Running the Game
The runGame function contains the main game loop:

// Main function to run the game.
function runGame(field) {
  let locationX = 0;
  let locationY = 0;
  field[0][0] = pathCharacter; // Set the starting point.

  let playing = true;
  printField(field);

  // Initialize readline interface for user input.
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
  });

  // Function to handle user input.
  const handleInput = (answer) => {
    field[locationY][locationX] = fieldCharacter; // Clear the previous path character.

    // Move the player based on input.
    switch (answer.toUpperCase()) {
      case 'U':
        locationY -= 1;
        break;
      case 'D':
        locationY += 1;
        break;
      case 'L':
        locationX -= 1;
        break;
      case 'R':
        locationX += 1;
        break;
      default:
        console.log('Enter U, D, L, or R.');
        rl.prompt();
        return;
    }

    // Check for various conditions (out of bounds, falling in a hole, finding the hat).
    if (!isInBounds(field, locationX, locationY)) {
      console.log('Out of bounds instruction!');
      playing = false;
    } else if (isHole(field, locationX, locationY)) {
      console.log('Sorry, you fell down a hole!');
      playing = false;
    } else if (isHat(field, locationX, locationY)) {
      console.log('Congrats, you found your hat!');
      playing = false;
    }

    // Continue the game or end it based on the player's state.
    if (playing) {
      field[locationY][locationX] = pathCharacter;
      printField(field);
      rl.prompt();
    } else {
      rl.close();
    }
  };

  // Set up readline to listen for user input.
  rl.on('line', handleInput);
  rl.setPrompt('Which way? ');
  rl.prompt();
}

Step 7: Helper Functions
We use isInBounds, isHat, and isHole to check the player's status:

// Helper functions to check the player's state.
function isInBounds(field, x, y) {
  return y >= 0 && x >= 0 && y < field.length && x < field[0].length;
}

function isHat(field, x, y) {
  return field[y][x] === hat;
}

function isHole(field, x, y) {
  return field[y][x] === hole;
}

Step 8: Starting the Game
Finally, we initialize the game with the field size and start it:

// Game settings.
const height = 10;
const width = 10;
const percentage = 0.2;

// Initialize the game field and start the game.
const myField = setHatLocation(initializeField(height, width, percentage), height, width);
runGame(myField);

There you have it only about 130 lines of code and it's a fun game to play and also make and build on it make it you're own and i hope this improves you're skills. Feel free to comment on how you have built on it and made it bigger and better.

Mastering the While Loop in JavaScript

Shawn2208 — Sat, 23 Dec 2023 18:17:54 +0000

Introduction:
Every aspiring JavaScript developer must understand the while loop, a fundamental tool for handling repetitive tasks. This article aims to simplify the while loop, guiding you through its construction step by step.

Anatomy of a While Loop:
A while loop in JavaScript typically includes:

Condition: Determines how long the loop should run.

Loop Actions: The code that executes on each iteration.

Counter Update: Modifies the loop variable (if necessary).

Step-by-Step Guide to Constructing a While Loop:

// Step 1: Initialization Phase (Outside the Loop)
let i = 0;  // Initialize the loop counter or any necessary variables outside the loop.

// Step 2: Begin with the Keyword
while (

    // Step 3: Open Parentheses - this is done automatically by the syntax of the 'while' loop.

    // Step 4: Set the Condition
    i < 10  // The loop will continue to run as long as this condition is true. Here, it runs as long as 'i' is less than 10.

    // Step 5: Close Parentheses and Open Curly Braces - done automatically by the syntax.
) {

    // Step 6: Specify Loop Actions
    console.log(i);  // During each iteration, we'll print the current value of 'i' to the console.

    // Step 7: Update the Loop Counter
    i++  // After each iteration, increase the value of 'i' by 1.

    // Step 8: Close Curly Braces - will be done after specifying all the actions inside the loop.
}

Common Pitfalls and Tips:

Infinite Loops: The most common mistake is creating an infinite loop. Ensure that the loop condition will eventually become false.

Counter Management: If using a counter, initialize it before the loop and update it correctly within the loop.

Condition Relevance: Make sure the condition is relevant to the loop's purpose and changes appropriately with each iteration.

Conclusion:
The while loop is an essential element in JavaScript, offering a straightforward way to handle repetitive tasks. With practice, you'll gain proficiency in using while loops, enhancing your JavaScript programming skills. Experiment with different scenarios and see how while loops can simplify your code.

Questions or Further Discussion:
If you have any questions or would like an in-depth discussion on other JavaScript concepts, feel free to drop a comment.

Also i appreciate my followers patience recently. I've been dedicated to building a full-stack e-commerce agency website, featuring custom templates developed in React & my freelance services i will be offering, secure PayPal payment integration, and reliable AWS storage solutions. This project is designed to offer mostly react websites for my potential customers. I'm excited about the upcoming launch and appreciate your support during this busy but rewarding time.

Stay tuned for more updates!

Mastering the For Loop in JavaScript

Shawn2208 — Fri, 22 Sep 2023 11:43:03 +0000

Introduction:
Every aspiring JavaScript developer encounters the for loop early in their learning journey. This loop is a versatile tool, crucial for tasks that require repetition. In this article, we'll break down the process of constructing a for loop, step by step.

// Step 1: Begin with the Keyword
for (
    // Step 2: Open Parentheses - this is done automatically by the syntax of the 'for' loop.

    // Step 3: Initialization Phase
    let i = 0;  // We're setting our starting point with the variable 'i' initialized to 0.

    // Step 4: Set the Condition
    i < 10;  // The loop will continue to run as long as this condition is true. In this case, as long as 'i' is less than 10.

    // Step 5: Update the Loop Counter
    i++  // After each iteration, we increase the value of 'i' by 1.
) {
    // Step 6: Close Parentheses and Open Curly Braces - done automatically by the syntax.

    // Step 7: Specify Loop Actions
    console.log(i);  // During each iteration, we'll print the current value of 'i' to the console.

    // Step 8: Close Curly Braces - will be done after specifying all the actions inside the loop.
}

The Anatomy of a For Loop:
A for loop has three main components:

Initialization - Setting the starting point.
Condition - Determining how long the loop should run.
Update - Modifying the loop variable after each iteration.

Step-by-Step Initialization:

Begin with the Keyword: Start with "for", indicating the start of your loop.
Open Parentheses: Place an open parenthesis "(" right after.
Initialization Phase: Set a starting point, typically using a variable like "i" set to "0".
Set the Condition: Use a condition to determine the loop's end. E.g., if iterating over 10 items, check if "i" is less than 10.
Update the Loop Counter: After the condition, state how the loop variable changes, commonly increasing "i" by 1.
Close Parentheses and Open Curly Braces: Seal off the setup and begin defining the loop's actions.
Specify Loop Actions: Within the braces, detail the tasks for each iteration.
Close Curly Braces: Conclude the loop.

Common Pitfalls and Tips:

Endless Loops: Ensure your condition eventually becomes false; otherwise, the loop will run indefinitely.

Variable Naming: While "i" is conventional, always choose descriptive variable names for clarity.

Nested Loops: When using loops inside loops, be careful with variable names to avoid conflicts.

Conclusion:
The for loop is foundational in JavaScript, providing an efficient way to perform repetitive tasks. By mastering its structure, you're one step closer to becoming a proficient JavaScript developer. Dive in, practice, and soon you'll be crafting loops with ease!

If you have any questions or want me to go in depth with other concepts please drop a comment.

3 Comprehensive Guides from Rheinwerk Computing Every Developer Must Read

Shawn2208 — Wed, 13 Sep 2023 13:52:28 +0000

Today, I'm going to introduce you to three game-changing books from Rheinwerk Computing that promise to be transformative for any developer, whether you're just starting out or already miles into your coding journey.

My Personal Experience: The Chat App called connect-codechat!

I recently developed a real-time chat application for developers called connect-codechat, which is live at https://www.connectcodechat.co.uk connect-codechat provides a platform for developers to collaborate and get help in real-time, as an alternative to posting on forums and waiting hours or days for responses.

Embarking on this solo full stack project using HTML, CSS, Bootstrap, JavaScript, Node.js, EJS, Express, bcrypt, socket.io, and MongoDB was an invaluable learning experience. With determination and the comprehensive Rheinwerk programming guides as my reference, I succeeded in architecting and implementing the front and back end components. Now that it's complete, I'm excited to have a fully functioning chat app in my portfolio that demonstrates both my coding skills and ability to independently build an app from ideation to deployment.

The sense of accomplishment from developing DevConnect has given me confidence that with the right resources, I can achieve my goal of becoming a Full Stack JavaScript Developer. I look forward to applying what I've learned on even more ambitious projects.

HTML and CSS:

Overview: Rheinwerk’s guide on HTML and CSS serves as an encyclopedia of modern web design. The book offers an extensive dive into the intricacies of these foundational languages.

Why it's a must-read: In an era where user experience can make or break platforms, understanding the nuances of HTML and CSS becomes paramount. This book ensures you grasp not just the basics, but also the best practices, optimizations, and the latest features.

Key Takeaways:

The evolution of grid layouts and flexbox.
Ensuring accessibility in web designs.
Responsive designs across different devices.

Highlights Include:
HTML syntax and structure
HTML elements
HTML forms
Tables, links, and images
CCS selectors
CSS box model
CSS preprocessors
Cascade and inheritance
Responsive layout design
Javascript

JavaScript:

Overview: This isn’t your ordinary JavaScript guide. Rheinwerk’s version ensures you’re well-equipped to navigate the complex landscape of one of the web’s most versatile languages.

Why it's a must-read: Given JavaScript's omnipresence in modern web applications, a developer's proficiency in this language can be a significant edge. This guide transitions you from a novice to an expert, encompassing both foundational and intricate JavaScript concepts.

Key Takeaways:

Deep dives into asynchronous operations and promises.
Best practices for clean and efficient code.
Exploring the potential of ES6 and beyond.

Highlights include:
Reference types
Objects
Events
Forms
Web Api
jQuery
Object-oriented programming
Functional programming
Client-side applications
Server-side applications
Mobile and desktop applications

Node.js:

Overview: Backend development is undergoing a revolution, with Node.js leading the charge. This Rheinwerk guide is your passport to mastering backend development using JavaScript.

Why it's a must-read: Node.js is rewriting the rules of backend development, allowing for highly scalable and efficient applications. With the rise of real-time applications and a shift towards a more interconnected web, understanding Node.js is no longer just an advantage—it's essential.

Key Takeaways:

Building scalable architectures with microservices.
Effective database integrations.
Ensuring application security and best practices.

Highlights include:
Installation
Web development
Asynchronous programming
Modules
Express and Nest
Template Engines
Database connectivity
Web sockets
Command line applications
Deployment and operations
Security
Testing and performance

In Conclusion: With these three guides from Rheinwerk Computing, you're not just adding to your knowledge – you're amplifying your prowess as a developer. Dive into them, absorb their insights, and watch as they revolutionize your coding approach.
I'll also include link to the books https://www.sap-press.com/programming/general-computing/

What's your go-to coding resource? Have you read any of these guides? Share your thoughts and let’s keep the learning curve ascending!

Introducing connect-codechat: A Real-time Chat App Built with Express & Node.js socket.io

Shawn2208 — Tue, 05 Sep 2023 11:11:11 +0000

https://connect-codechat-4c2d444b36df.herokuapp.com/

Make an account and get collaborating 😊

Hi, DEV Community! I'm excited to share a project I've been working on - connect-codechat, a real-time chat app. My journey with this app has been both challenging and rewarding, and today, I want to walk you through the tech stack and some of the choices I made.

Tech Stack Breakdown:

1 ) Node.js & Express: The backbone of connect-codechat. Express, being a minimalist web framework for Node.js, provided me the foundation to build the backend functionalities smoothly.

2 ) EJS: I used the Embedded JavaScript templating language to generate dynamic HTML content with plain JavaScript. It seamlessly integrates with Express, allowing for efficient view rendering.

3 ) MongoDB & Mongoose: For data storage, I opted for MongoDB and interfaced with it using Mongoose. This combination streamlined database operations, from defining schemas to querying data.

4 ) Real-time Communication: One of the highlights of connect-codechat is its real-time chat capabilities, made possible by Socket.io. This library enables bidirectional and event-based communication, providing users with an interactive chatting experience.

5 ) User Authentication: With Passport and its local strategy, connect-codechat ensures secure user authentication. Registering and logging in users are crucial functionalities, and with bcrypt, passwords are securely hashed to maintain user privacy.

6 ) Middleware & Utilities: Incorporating other vital packages like body-parser, connect-flash, express-session, and cors allowed for a richer development experience. Each package played its role, from parsing incoming request bodies to enabling CORS and managing sessions.

The Development Journey:

The idea for connect-codechat emerged from a very personal pain point. Often, when seeking answers to pressing coding queries, I'd find myself waiting for hours on platforms like Stack Overflow, refreshing the page in hopes of a timely response. This experience sparked a thought: Why not create a real-time chat platform like Stack Overflow? A platform where, if numerous users are online, you're guaranteed a prompt answer. And then, the journey to building connect-codechat began.

Throughout this journey, there were several obstacles to navigate. One significant challenge I encountered was ensuring messages sent in a specific JavaScript room remained confined to that room. An oversight would mean that messages could be broadcasted to other rooms, a functionality that would defeat the very purpose of having topic-specific rooms. This bug became a major roadblock. However, after taking a brief break to rejuvenate my perspective, I revisited the issue. To my surprise, I realized I had missed just four crucial lines of code! links to these 4 lines:
https://imgur.com/Z30uQUJ
https://imgur.com/swgGVT2

Such moments, while seemingly minor, underscore the larger narrative of software development: it's as much about personal growth as it is about technical prowess. The euphoria I felt upon resolving this seemingly small issue was indescribable. It wasn't just about overcoming a coding challenge; it was the realization that every hurdle, every roadblock, serves as an opportunity for growth. If we never stumble, how can we ever learn to pick ourselves up and innovate?

As I've come to appreciate, the problem's aren't just obstacles — they're learning opportunities. And every time we learn from a mistake, we inch closer to becoming not just better developers but more resilient problem solvers.

Conclusion:

Building connect-codechat was not just about creating a chat app, but about embracing a comprehensive learning experience. From ensuring real-time communication to securing user data, every step was a lesson. I'm eager to hear your feedback and suggestions!

Building a Mini Text-Based Adventure Game: "Mini Zork" with HTML, CSS, JS

Shawn2208 — Sat, 02 Sep 2023 20:16:17 +0000

Ever played a text-based game? These games, which date back to the early days of computing, have always fascinated me with their simplicity yet immersive nature. Today, I'm going to introduce you to "Mini Zork", a simple text-based game built using HTML, CSS, and JavaScript.

The HTML Structure: The structure is straightforward. We have a terminal div with an output section for game feedback and an input section to receive commands from the player:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Mini Zork</title>
</head>
<body>
    <div id="terminal">
        <div id="output"></div>
        <div id="input-line">
            <span class="prompt">$></span>
            <input type="text" id="input" autofocus>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

Game Logic with JavaScript:

const inputEl = document.getElementById('input');
const outputEl = document.getElementById('output');

inputEl.focus();
inputEl.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        const command = inputEl.value;
        handleCommand(command);
        inputEl.value = '';
    }
});

let currentRoom = 'start';

const rooms = {
    start: {
        description: "You are in a dark room. There is a door to the north.",
        exits: {north: 'hallway'},
    },
    hallway: {
        description: "You are in a long hallway. There is a door to the south and another one to the east.",
        exits: {south: 'start', east: 'treasureRoom'},
    },
    treasureRoom: {
        description: "You've found the treasure room! There's a massive chest in the center. Congratulations!",
        exits: {west: 'hallway'},
    }
};

function handleCommand(command) {
    let output = '';

    switch(command) {
        case 'look':
            output = rooms[currentRoom].description;
            break;

        case 'go north':
            if(rooms[currentRoom].exits.north) {
                currentRoom = rooms[currentRoom].exits.north;
                output = rooms[currentRoom].description;
            } else {
                output = "You can't go that way.";
            }
            break;

        case 'go south':
            if(rooms[currentRoom].exits.south) {
                currentRoom = rooms[currentRoom].exits.south;
                output = rooms[currentRoom].description;
            } else {
                output = "You can't go that way.";
            }
            break;

        case 'go east':
            if(rooms[currentRoom].exits.east) {
                currentRoom = rooms[currentRoom].exits.east;
                output = rooms[currentRoom].description;
            } else {
                output = "You can't go that way.";
            }
            break;

        case 'go west':
            if(rooms[currentRoom].exits.west) {
                currentRoom = rooms[currentRoom].exits.west;
                output = rooms[currentRoom].description;
            } else {
                output = "You can't go that way.";
            }
            break;

        default:
            output = 'Unknown command: ' + command;
    }

    outputEl.innerHTML += `<div class="prompt">$></div><div>${command}</div><div>${output}</div>`;
}

// Initial description
outputEl.innerHTML += `<div class="prompt">$></div><div>Welcome to Mini Zork!</div><div>${rooms[currentRoom].description}</div>`;

Styling the Game with CSS: The game has a retro terminal look, achieved by simple CSS:

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Courier New', monospace;
    background-color: #000;
    color: #00FF00;
}

#terminal {
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
}

#input-line {
    display: flex;
    align-items: center;
}

.prompt {
    margin-right: 5px;
}

#input {
    width: 100%;
    border: none;
    background: none;
    outline: none;
    color: inherit;
}
.field {
    white-space: pre;
    font-size: 20px;
}

Play the Game: Once everything is set up, launch the HTML page in your browser and start your adventure! Try commands like 'look', 'go north', 'go south', etc. Navigate through the rooms and find the treasure.

Conclusion

Building a simple text-based game like "Mini Zork" is not only a fun project but also a great way to sharpen your web development skills. Feel free to extend the game by adding more rooms, challenges, or even NPCs. Enjoy coding and gaming!

Also i'm going to give you some ways of extending it.

More Rooms and Complex Maps:

Multi-layered Rooms: Introduce rooms that have multiple layers, such as basements or upstairs.

Interconnected World: Instead of a linear path, create loops where rooms can interconnect in multiple ways, making navigation a challenge.

Introduce Items and Inventory:
Players can pick up or drop items, which might be crucial for solving certain puzzles or unlocking specific rooms. For example, finding a key in one room to unlock another room.

Add NPCs (Non-Player Characters):
Introduce characters that provide hints, challenges, or trade items.
Use an array or object to store their dialogues based on the player's progression.

Advanced Commands:
Let players use more complex commands like use or talk to .
Perhaps introduce a basic combat system where players can attack or defend.

Puzzles and Riddles:
Require players to solve puzzles to advance. This could be in the form of riddles, number puzzles, or logic puzzles.

Save and Load System:
Implement a local storage-based save system, so players don't have to start over every time they refresh the page.

Styling and Themes:
Introduce different themes. Perhaps a retro neon theme for a sci-fi story or a sepia-toned theme for a wild west adventure.
Add sound effects or background music for immersion.

Random Events:
Introduce random events or encounters that provide an element of unpredictability to the game. Maybe there's a chance to find a rare item or encounter a mysterious character.

Have fun and extending these will improve your understanding.

Creating a Simple Book API with Express.js

Shawn2208 — Fri, 18 Aug 2023 18:05:42 +0000

Hello! In this article, we'll be creating a simple book API using Express.js. This API can be the foundation for building more complex projects such as a book review site, a library catalog, or even a bookstore.

Prerequisites:
Basic knowledge of JavaScript.
Node.js installed on your pc.

Setting Up:
Start by creating a new directory for your project and initializing a Node.js application:

mkdir book-api && cd book-api
npm init -y

Next, let's install the required packages:

npm install express

The Code:
Create an index.js file. This will house our server and routes:

const express = require('express');
const app = express();

app.use(express.json());

let books = [];

app.get('/books', (req, res) => {
    res.json(books);
});

app.post('/books', (req, res) => {
    const { title, author } = req.body;
    const newBook = { id: Date.now(), title, author };
    books.push(newBook);
    res.status(201).json(newBook);
});

app.put('/books/:id', (req, res) => {
    const bookId = Number(req.params.id);
    const { title, author } = req.body;

    const bookIndex = books.findIndex(book => book.id === bookId);
    if (bookIndex === -1) return res.status(404).json({ message: "Book not found" });

    books[bookIndex] = { id: bookId, title, author };
    res.json(books[bookIndex]);
});

app.delete('/books/:id', (req, res) => {
    const bookId = Number(req.params.id);
    books = books.filter(book => book.id !== bookId);
    res.status(204).end();
});

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

Testing the API:
You can test this API using tools like Postman or by integrating it into a frontend application.

Conclusion:
Building a basic API with Express.js is straightforward. This simple book API is just the beginning. You can expand it by adding more features, integrating a database, and implementing authentication and authorization.

I hope you found this basic introduction to building an Express.js API helpful! If you enjoyed this guide and would like to delve deeper, give this article some ❤️ (likes). If we get enough interest, I'll create a follow-up post where we'll integrate a database and add authentication to our book API. This way, we can further enhance its features and make it more robust.

JavaScript dumbed down Part three. control flow, basic functions, and interactions.

Shawn2208 — Thu, 17 Aug 2023 10:42:39 +0000

Introduction:
Understanding the fundamentals of Javascript is the key to building dynamic and interactive web applications, we'll dive into to the core concepts of control flow, functions and interactions with the (DOM) Document Object Model to empower you on your coding journey.

Control Flow and Conditional Statements:

Control flow determines the sequence in which code executes. Conditional statements allow your code to make decisions based on conditions.

let age = 18;

if (age >= 18) {
    console.log("You're an adult.");
} else {
    console.log("You're a minor.");
}

In this analogy, the if statement is like a decision point where you decide whether someone is an adult or a minor based on their age. If the condition is met (age is greater than or equal to 18), you let them pass as an adult. Otherwise, they take the "minor" route.

Nested if Statements and Complex Decisions: Complex decisions are managed through nested if statements.

let temperature = 25;

if (temperature > 30) {
    console.log("It's hot outside!");
} else if (temperature >= 20) {
    console.log("The weather is pleasant.");
} else {
    console.log("It's a bit chilly.");
}

Messages are printed based on the temperature range.

Switch Statement for Multiple Values: Switch statements simplify handling multiple variable values.

let day = "Wednesday";
let message = "";

switch (day) {
    case "Monday":
        message = "Back to work!";
        break;
    case "Friday":
        message = "Weekend is near!";
        break;
    default:
        message = "Just another day.";
}

console.log(message);

In this scenario, the switch statement acts as a menu of days. If the day matches "Monday," you order the "Back to work!" option. If it's "Friday," you choose "Weekend is near!" Otherwise, you just go with "Just another day."

Functions for Structured Code: Functions encapsulate code for reuse.

function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("Alice"); // Outputs: Hello, Alice!
greet("Bob");   // Outputs: Hello, Bob!

Functions are like mini-scripts that you can call upon whenever you need them. They package a set of instructions together, allowing you to reuse the same logic without writing it out every time.
Consider the greet function as a personalized greeting generator. You provide a name as an input (parameter), and the function outputs a tailored greeting.

Interacting with the DOM: The DOM represents the structure of a webpage, and JavaScript allows you to interact with it.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Interaction</title>
</head>
<body>
    <button id="myButton">Click Me</button>
    <script>
        const button = document.getElementById("myButton");
        button.addEventListener("click", function() {
            alert("Button clicked!");
        });
    </script>
</body>
</html>

Conclusion:
By mastering control flow, functions, and DOM interactions, you're equipped to create responsive and engaging web applications. JavaScript's power lies in its ability to make decisions, structure code, and interact with the DOM. Now, start experimenting and combining these concepts to build your own interactive web experiences!

Next I will be diving further into JavaScript a whole article about Arrays & Loops, Array methods and examples of how you would use an array & loops in a real life scenario.

Simple Text-Based Adventure Game in Node.js

Shawn2208 — Sat, 12 Aug 2023 11:12:05 +0000

In this tutorial, we'll walk through creating a simple text-based adventure game in Node.js using the inquirer library for user prompts.

Prerequisites
Basic knowledge of JavaScript and Node.js.
Node.js installed on your computer.

Setting Up
First, create a new directory called simple-game:

mkdir simple-game
cd simple-game

Initialize a new npm project:

npm init -y

Install the inquirer library:

npm i inquirer

To allow the use of ES6 import/export syntax, open package.json and add the following line:

"type": "module",

Create a new file named game.js.

// Import the 'inquirer' library to handle user input
import inquirer from 'inquirer';

// Define an array of different game scenarios
const scenarios = [
    // Scenario 1: Introduction
    {
        name: 'intro',
        message: 'You wake up in a mysterious room. What do you do?',
        choices: [
            { name: 'Look around', nextScenario: 'lookAround' },
            { name: 'Open the door', nextScenario: 'openDoor' }
        ]
    },
    // Scenario 2: Looking around
    {
        name: 'lookAround',
        message: 'You find an old key on a table and a window that is slightly ajar. What do you do?',
        choices: [
            { name: 'Take the key', nextScenario: 'takeKey' },
            { name: 'Open the window', nextScenario: 'openWindow' }
        ]
    },
    // Scenario 3: Opening the door
    {
        name: 'openDoor',
        message: 'The door creaks open, revealing a dark hallway.',
        choices: [
            { name: 'Enter the hallway', nextScenario: 'darkHallway' },
            { name: 'Stay in the room', nextScenario: 'stayInRoom' }
        ]
    },
    // ... (more scenarios)
    // Scenario 7: Conclusion
    {
        name: 'ending',
        message: 'Congratulations! You have completed the adventure.',
        choices: []
    }
];

// Function to present a scenario and get player choice
const presentScenario = async (scenario) => {
    const answers = await inquirer.prompt([
        {
            type: 'list',
            name: 'choice',
            message: scenario.message,
            choices: scenario.choices.map(choice => choice.name),
        }
    ]);

    return answers.choice;
};

// Function to start the game
const startGame = async () => {
    // Start with the 'intro' scenario
    let currentScenario = scenarios.find(scenario => scenario.name === 'intro');

    // Continue looping through scenarios as long as there's a current scenario
    while (currentScenario) {
        // Present the current scenario to the player and get their choice
        const playerChoice = await presentScenario(currentScenario);

        // Find the next scenario based on the player's choice and update the current scenario
        currentScenario = scenarios.find(scenario => scenario.name === currentScenario.choices.find(choice => choice.name === playerChoice).nextScenario);
    }

    // Print a thank-you message when the game ends
    console.log('Thanks for playing! Goodbye.');
};

// Start the game by calling the startGame function
startGame();

This code defines various game scenarios and presents them to the player in sequence.
Each scenario provides the player with multiple choices. When a choice is made, the game moves to the next scenario.

Playing the Game
To play the game, run the following command in your terminal:

node game.js

Conclusion
With just a few lines of code, you've created a simple, engaging text-based adventure game in Node.js! This is just the foundation – you can expand on this by adding more scenarios, integrating more libraries, or even creating a graphical interface.

There you go! A simple tutorial on how to create a text-based adventure game in Node.js. You can further extend this by adding images, sounds, or even making it have a health system and more complex with additional logic and scenarios.

Node.js Tutorial: How to Send Emails with Nodemailer

Shawn2208 — Fri, 04 Aug 2023 13:18:37 +0000

Creating a Node.js Contact Form with Nodemailer and Hotmail
Introduction
In this tutorial, we will create a simple contact form using Node.js and Nodemailer https://nodemailer.com/about/, with Hotmail as our email service. The goal is to allow users to fill out a form on your website, and receive an email notification with the contents of the form. This is a great feature for any website, as it provides an easy way for users to get in touch with you directly from the site.

Step 1: Setting Up the Environment
First, we need to install Node.js and npm (which is installed automatically with Node.js). You can download Node.js here https://nodejs.org/en/docs/guides and follow the installation instructions provided.

Step 2: Installing Required Packages
After setting up Node.js, we need to initialize a new Node.js project. In the terminal, navigate to your project directory and run npm init -y
to create a new project. Now, we need to install the required packages:
npm install express nodemailer cors body-parser dotenv
Here's what each package does:
express: Fast, unopinionated, minimalist web framework for Node.js.
nodemailer: A module for Node.js to send emails.
cors: A Node.js package for providing a Connect/Express middleware that can be used to enable CORS (Cross-origin resource sharing) with various options.
body-parser: Parse incoming request bodies in a middleware before your handlers, available under the req.body property.
dotenv: Zero-dependency module that loads environment variables from a .env file into process.env.
Step 3: Setting Up the Express.js Server
Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Let's set up a basic Express server:

const express = require('express');
const app = express();
const port = 3000;

app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

Step 4: Implementing Nodemailer
Next, we'll implement Nodemailer. This tool allows us to send emails from our Node.js server. Here's how to configure Nodemailer with Hotmail settings:

const nodemailer = require('nodemailer');
let transporter = nodemailer.createTransport({
    service: 'hotmail',
    auth: {
      user: 'your-email@hotmail.com',
      pass: 'your-password'
    },
});

Step 5: Creating the POST Route
Now, let's create a POST route for '/send', which we will use to send emails. We use body-parser to parse the request body and obtain form data:


const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/send', (req, res) => {
  let mailOptions = {
    from: 'your-email@hotmail.com',
    to: 'your-email@hotmail.com',
    subject: 'Contact form submission',
    text: `Name: ${req.body.name}, Email: ${req.body.email}, Message: ${req.body.message}`,
  };

  transporter.sendMail(mailOptions, (err, data) => {
    if (err) {
      res.send('error' + JSON.stringify(err));
    } else {
      res.send('success');
    }
  });
});

Step 6: Implementing the Contact Form
On your client-side, create an HTML form and use AJAX to send a POST request to your '/send' route:

<form id="contact-form">
  <input type="text" id="name" placeholder="Your name">
  <input type="email" id="email" placeholder="Your email">
  <textarea id="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $("#contact-form").on('submit', function(e) {
    e.preventDefault();
    var data = {
      name: $("#name").val(),
      email: $("#email").val(),
      message: $("#message").val()
    };
    $.ajax({
      url: 'http://localhost:3000/send',
      type: 'POST',
      data: data,
      success: function(data) {
        alert('Email sent!');
      },
      error: function() {
        alert('An error occurred.');
      }
    });
  });
</script>

Step 7: Handling Environment Variables
For security reasons, you should never store sensitive information, like your email and password, directly in your code. Instead, use environment variables. The dotenv package loads environment variables from a .env file into process.env. In your project root, create a .env file and include your email and password:

EMAIL=your-email@hotmail.com
PASSWORD=your-password

In your Node.js file, require dotenv at the top and use process.env to access your environment variables:

require('dotenv').config();

let transporter = nodemailer.createTransport({
    service: 'hotmail',
    auth: {
      user: process.env.EMAIL,
      pass: process.env.PASSWORD
    },
});

Conclusion
Congratulations! You've successfully created a contact form using Node.js and Nodemailer, with Hotmail as your email service. If you have any questions or comments, please don't hesitate to leave them below.

Progress Bar using HTML, CSS, JS

Shawn2208 — Mon, 26 Jun 2023 16:06:00 +0000



HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>progress bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="progress-wrapper">
        <progress id="progress" value="50" max="100"></progress>
        <span class="progress-label">Level <span id="level">0</span></span>
      </div>



   <script src="index.js"></script>
</body>
</html>

CSS
`body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
  }

  .progress-container {
    display: flex;
  }

  .progress-wrapper {
    position: relative;
    height: 20px;
    width: 200px;
  }

  #progress {
    appearance: none;
    height: 100%;
    width: 100%;
    border: none;
    background-color: #f0f0f0;
  }

  .progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: white;
    pointer-events: none;
  }
  `
JS
`const progress = document.getElementById('progress');
const levelElement = document.getElementById('level');

let level = 0;
levelElement.textContent = level;

function updateProgressBar() {
  progress.value += 1;
  if (progress.value === 100) {
    level += 1;
    levelElement.textContent = level;
    progress.value = 0;
  }
}

setInterval(updateProgressBar, 100);
`