Forem: Macaulay Uzu

Using The CSS3 Box-Sizing Property🌈🌈

Macaulay Uzu — Mon, 17 May 2021 04:50:09 +0000

Box-Sizing

Approximately all HTML elements can be characterized as boxes, ranging from the <a> tag to the <textarea> tag and all of these elements has 5 modifiable dimensions:

Width
Height
Padding
Border
Margin

The Box-Sizing property was introduced to specify how these dimensions can be calculated and modified to give desired results.
This Box-Sizing property has two values:

Content-Box
Border-Box

Without setting the value, the default value to the Box-Sizing property is content-box

Content-Box

Before CSS3, content-box was known as the W3C Box Model. When the value of Box-Sizing is set to content-box, the addition of the width, height, padding, and border of that element becomes the total size of the element.
i.e
After specifying the width and height on an element, the padding and border of that element are applied subsequently.

Element Width = Left padding + Right padding + Left border + Right border + Width

Element Height = Top padding + Bottom padding + Top border + Bottom border + Height

example:

.box1{
   width: 500px,
   height: 300px,
   border: 10px solid red,
   padding: 30px,
   box-sizing: content-box
}

In the example above, the width of the element is no longer 500 but 580 and the height is no longer 300 but 380.

📌 the diagram above shows the increase in width and height of the element.

Border-Box

In this box model, a totally different calculation is carried out.
When the width and height of an element is specified, the padding and border are mechanically included in the elements total width and height.
i.e The borders and padding are considered as part of the width and height rather than being an add-on that increases the elements size.

Element Width = Width specified

Element Height = Height specified

example:

.box2{
   width: 500px,
   height: 300px,
   border: 10px solid red,
   padding: 30px,
   box-sizing: border-box
}

In the example above, the the width of the element still remains 500 and the height still remains 300. The padding and border are considered as part of the width and height.

📌 the diagram above illustrates how the border and padding becomes part of the width and height of the element without increasing the size of the element.

That's It ❕❕

If you have any feedback, opinion, or comment to the discussion in this article, please let me know in the comment section. I'm always happy for a discussion.

Thanks and See you next time 🤝🤝.

Twitter.

Accepting Data From a Form And Saving It To MongoDB through Mongoose

Macaulay Uzu — Mon, 28 Dec 2020 03:07:16 +0000

⚫ SETTING UP YOUR NODEJS PROJECT

A Practical Introduction to Setting Up a NodeJs+Express web project with VSCode

McCauley™ ・ Nov 23 '20 ・ 3 min read

#javascript #expressjs #node #newbie

Or you can download the Project Setup from my GitHub repo

mack-code0 / NodeJs-App

🌓 TERMINOLOGIES USED

Model: A Mongoose model provides an interface to the database for creating, querying, updating, deleting records, etc. -FCC
Schema: A Mongoose schema defines the structure of the document, default values, validators, etc. -FCC
Mongoose: Mongoose is an object data modeling (ODM) library that provides a rigorous modeling environment for your data, enforcing structure as needed while still maintaining the flexibility that makes MongoDB powerful -DevCenter

🌕 STEP 1 of 3

Open your terminal and make sure it's navigated to the Project Folder
Enter the command below in the terminal to install the Mongoose and EJS modules

>> npm i mongoose ejs

In your index.js file, require the mongoose module, and also create a variable that'll hold the database connection url

const mongoose = require("mongoose")
var connectionUrl = "mongodb://localhost:27017/databasename"

Still in the index.js file, Establish a connection using the connection url

mongoose.connect(connectionUrl, {useNewUrlParser: true, useUnifiedTopology: true}, (err)=>{
    if(err) throw err
    console.log("Connected")
})

🎯Summary of `index.js` file:

const express = require('express')
const app = express()
const mongoose = require("mongoose")
var connectionUrl = "mongodb://localhost:27017/databasename"
mongoose.connect(connectionUrl, {useNewUrlParser: true, useUnifiedTopology: true}, (err)=>{
    if(err) throw err
    console.log("Connected")
})

app.get("/home", (req, res)=>{
    res.send("Hello")
})

const port = process.env.PORT || 4000
app.listen(port, ()=>{
    console.log(`Listening to Port ${port}`)
})

🌕 STEP 2 of 3

Create a new folder models
In the models folder, create a user.js file
The following steps will be done in the user.js file:

📌 Require the mongoose module

const mongoose = require("mongoose")

📌 Create a Schema variable and assign it the Schema class from mongoose

const Schema = mongoose.Schema

📌 Instantiate the Schema class and pass in your document structure as an argument to the schema class

const UserSchema = new Schema({
    firstname: {
        type: String,
        required: [true, "Firstname is required"]
    }, 
    lastname: {
        type: String,
        required: [true, "Lastname is required"]
    }
})

📌 Create a mongoose model with the preffered name of your `collection` and the UserSchema created above

const UserModel = mongoose.model("user", UserSchema)
// The String "user" above is the name of your collection

📌 Export the model

module.exports = UserModel

🎯Summary of `user.js` file:

const mongoose = require('mongoose');
const Schema = mongoose.Schema

const UserSchema = new Schema({
    firstname: {
        type: String,
        required: [true, "Firstname is required"]
    }, 
    lastname: {
        type: String,
        required: [true, "Lastname is required"]
    }
})

const UserModel = mongoose.model("user", UserSchema)
module.exports = UserModel

🌕 STEP 3 of 3

Create a new folder views
In the views folder, create an index.ejs file
Create a simple html form in the index.ejs file with the method attribute set to POST and the action attribute set to /api/user

<html>
    <body>
        <form method="POST" action="/api/user">
            <label for="">Firstname</label>
            <input type="text" name="firstname" id=""><br>
            <label for="">Lastname</label>
            <input type="text" name="lastname" id=""><br>
            <input type="submit">
        </form>
    </body>
</html>

The following steps will be done in the index.js file:

📌 Create a body parsing middleware with the built in express body-parser in order to populate the `req.body` with our inputs

app.use(express.urlencoded({extended: true}))

📌 Set the view engine to `ejs`

app.set("view engine", "ejs")

📌 Create a route for displaying the html form we created

app.get("/index", (req, res)=>{
    res.render("index")
})

📌 Import the userModel from the models folderImport the userModel from the models folder

const UserModel = require("./models/user")

📌 Create a route/endpoint for collecting and sending the user inputs to our Mongo DataBase

app.post("/api/user", (req, res)=>{

})

📌 In the endpoint, Instantiate the UserModel and pass the req.body as an argument.

    const SaveUser = new UserModel(req.body)

Note: The req.body holds the user inputs sent from the form.

📌 Save the UserInput to your database by adding the following lines of code to the endpoint:

        SaveUser.save((error, savedUser)=>{
        if(error) throw error
        res.json(savedUser)

NOTE: The conditions in the save method is simply saying: If an error is encountered, throw the error. But if there is no error, return the saved user details.

🎯Updated Summary of `index.js` file:

const express = require('express')
const app = express()
const mongoose = require("mongoose")
const UserModel = require("./models/user")
var connectionUrl = "mongodb://localhost:27017/dbname"
mongoose.connect(connectionUrl, {useNewUrlParser: true, useUnifiedTopology: true}, (err)=>{
    if(err) throw err
    console.log("Connected")
})

app.use(express.urlencoded({extended: true}))
app.set("view engine", "ejs")

app.get("/home", (req, res)=>{
    res.render("index")
})

app.post("/api/user", (req, res)=>{
    const SaveUser = new UserModel(req.body)
    SaveUser.save((error, savedUser)=>{
        if(error) throw error
        res.json(savedUser)
    })
})

app.listen(9000, ()=>{
    console.log("listening to port 9000")
})

>>> If your data was successfully saved, an object will be returned to you after submitting the form.

🏁 Having any Question or Suggestion? Drop them in the discussion section below. 👇

A Practical Introduction to Setting Up a NodeJs+Express web project with VSCode

Macaulay Uzu — Mon, 23 Nov 2020 07:30:04 +0000

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.-Node.Js

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.-Express

⚫ Download NodeJs

Visit https://nodejs.org/en/ to download and install NodeJs on your machine.

After downloading and installing, you can check if it was successfully installed by running the command below⬇️ in your command line(How to open command line):

node -v

The command above should print the version of your NodeJS so you'll see something like this `v14.7.0`(Depending on the NodeJS version you installed)

Mission 1️⃣ Completed!!✔️✔️

⚫ Folder Structure

Download, install and open VSCode here.
Create a folder in your desktop... Name it MyNodeJsProject so as to locate it easily
In your VSCode, Open the MyNodeJsProject folder📂. You can open the folder by clicking the file tab located at the upper left corner of VSCode. After clicking on file you'll see the Open Folder option... Click on it and locate your MyNodeJsProject folder📂 in your desktop, then open the folder📂.

In the left panel of your VSCode, the MyNodeJsProject folder📂 would be displayed.

Still in your VSCode, Open the VSCode terminal by clicking the terminal tab located at the upper part of VSCode, then click the New Terminal option. A new panel would pop up at the bottom part of your VSCode:

NOTE: Open the MyNodeJsProject folder📂 through your VSCode before opening the VSCode terminal, so that you'll be automatically navigated to the folder in the terminal.

In the terminal, run the command below:

npm init -y

After running the above command, a package.json and package-lock.json file would be created automatically in your MyNodeJsProject folder📂. The package.json file can be referred to as the Metadata of your project as it contains information that identifies the project as well as handling the project's dependencies. While the package-lock.json file is solely used to lock dependencies to a specific version number.

In your MyNodeJsProject folder📂, create a index.js file, that'll be the entry point of your project. You can create the index.js file manually, or you can just run the command below in your terminal:

type NUL > index.js

Mission 2️⃣ Completed!!✔️✔️

⚫ Creating a server using `ExpressJs`

In your terminal that's navigated to the MyNodeJsProject folder📂, run the command below to install express:

npm install express

If express was installed successfully, a new folder📂 called node_modules that'll be holding all your dependencies would be created automatically, and you'll also get a message in the terminal indicating that you've successfully installed express.

Now, Open your index.js file
In your index.js file enter the following lines of code below and save:

// Importing the express module
const express = require('express'); 
// calling the express function
const app = express(); 

// Creating a "/home" route for sending "Hello World!😎😎" to the clientSide(Browser)
app.get("/home", (req, res)=>{
    res.status(200).send("<h1>Hello World!😎😎</h1>")
})

// declaring our Port number variable
const PORT = process.env.PORT || 4000;

// Creating a server with the PORT variable declared above
app.listen(PORT, ()=>{
    console.log(`Listening to Port ${PORT}`)
});

After saving those lines of codes to your index.js file, You'll need to get your server running first, before you can access the "/home" route. Now, to get your server running, run the following command in your terminal:

node index.js

Open your browser, and enter "localhost:4000/home" in the url field

Voilà!!🎇🎇

And that's all.... Your Server is Up and Running!

Mission 3️⃣ Completed!!✔️✔️

NOTE: To close a server, in the terminal, use the ctrl+c shortcut.

🏁 If You like my Write ups, and would like to provide support to me and my work, and would also like to learn more about Programming/Software Development, Please do follow me on Twitter.

Setting up MongoDB(4.2.10) and MongoDB Compass Locally

Macaulay Uzu — Sun, 22 Nov 2020 01:47:11 +0000

What is MongoDB?

MongoDB is a document-oriented database program.
It is classified as a NoSQL database program that uses JSON-like documents with optional schemas.

What is MongoDB Compass?

MongoDB Compass is just a GUI for MongoDB

Installing MongoDB on your Machine

Visit the Official MongoDB website
In the MongoDB homepage, hover over the Software tab in the Navigation Bar and click on Community Server
In the right side of the Community Server Page, there is a section with the title Available Downloads
In the version tab, select version 4.2.10
Select your appropriate Operating system in the platform tab
And the Most important part here, the Package Tab. Make sure you select the ZIP option, and download

Important Steps

After downloading the zipped folder, Extract the folder
Inside the extracted folder, create a new folder and name it data
Inside the data folder, create a new folder named db

This is what your folder structure should look like now:

Connecting to MongoDB

Open you Machine's console, and change the current directory in the console to the directory of the bin folder in the mongo folder. You can do this by entering the command below:

> cd pathToYourBinFolderInYourMongoFolder

After changing the directory in the console, enter the following command:

> mongod --dbpath pathToYourDataFolderInYourMongoFolder

*Remember to click enter after entering each commands*

**After going through those steps, your console should be looking like(not exactly) the image below:**

And that's all!! Your MongoDB is up and running!!😁😁😁

Now, To check if your MongoDB is working perfectly, Open a new console

NOTE: Do not close the first console! Just open a new one

After Opening the new console, just enter mongo as a command.

Then enter the following command to create a document in the test collection:

> db.test.save( { a: 1 } )

And you'll get a Successfully Inserted reply

AND THAT'S ALL!! AT LEAST FOR SETTING UP THE DATABASE😁😁😁😁

SETTING UP MONGODB COMPASS

Visit this page to download the MongoDB Compass
Select your Machine's Operating system in the platform tab
And the Most important part here, the Package Tab. Make sure you select the ZIP option, and download

After downloading the zipped folder, Extract and rename the folder to Compass so as to easily locate it.

Inside the folder, you'll see an application called MongoDBCompass, Open that application

Enter the MongoDB connection string (mongodb://localhost:27017) in the connection string field and click connect..

A list of your Collections will be displayed:

And That's All!!

Note: Before running your Compass, Make sure your MongoDB is already running in the console!!

If You like my Write ups, and would like to provide support to me and my work, and would also like to learn more about Programming/Software Development, Please do follow me on Twitter.

Forem: Macaulay Uzu

Using The CSS3 Box-Sizing Property🌈🌈

Box-Sizing

Content-Box

Border-Box

That's It ❕❕

Accepting Data From a Form And Saving It To MongoDB through Mongoose

⚫ SETTING UP YOUR NODEJS PROJECT

A Practical Introduction to Setting Up a NodeJs+Express web project with VSCode

McCauley™ ・ Nov 23 '20 ・ 3 min read

mack-code0 / NodeJs-App

🌓 TERMINOLOGIES USED

🌕 STEP 1 of 3

🎯Summary of index.js file:

🌕 STEP 2 of 3

📌 Require the mongoose module

📌 Create a Schema variable and assign it the Schema class from mongoose

📌 Instantiate the Schema class and pass in your document structure as an argument to the schema class

📌 Create a mongoose model with the preffered name of your collection and the UserSchema created above

📌 Export the model

🎯Summary of user.js file:

🌕 STEP 3 of 3

📌 Create a body parsing middleware with the built in express body-parser in order to populate the req.body with our inputs

📌 Set the view engine to ejs

📌 Create a route for displaying the html form we created

📌 Import the userModel from the models folderImport the userModel from the models folder

📌 Create a route/endpoint for collecting and sending the user inputs to our Mongo DataBase

📌 In the endpoint, Instantiate the UserModel and pass the req.body as an argument.

Note: The req.body holds the user inputs sent from the form.

📌 Save the UserInput to your database by adding the following lines of code to the endpoint:

NOTE: The conditions in the save method is simply saying: If an error is encountered, throw the error. But if there is no error, return the saved user details.

🎯Updated Summary of index.js file:

>>> If your data was successfully saved, an object will be returned to you after submitting the form.

🏁 Having any Question or Suggestion? Drop them in the discussion section below. 👇

A Practical Introduction to Setting Up a NodeJs+Express web project with VSCode

⚫ Download NodeJs

After downloading and installing, you can check if it was successfully installed by running the command below⬇️ in your command line(How to open command line):

The command above should print the version of your NodeJS so you'll see something like this v14.7.0(Depending on the NodeJS version you installed)

Mission 1️⃣ Completed!!✔️✔️

⚫ Folder Structure

NOTE: Open the MyNodeJsProject folder📂 through your VSCode before opening the VSCode terminal, so that you'll be automatically navigated to the folder in the terminal.

Mission 2️⃣ Completed!!✔️✔️

⚫ Creating a server using ExpressJs

Voilà!!🎇🎇

And that's all.... Your Server is Up and Running!

Mission 3️⃣ Completed!!✔️✔️

Setting up MongoDB(4.2.10) and MongoDB Compass Locally

What is MongoDB?

What is MongoDB Compass?

Installing MongoDB on your Machine

Important Steps

Connecting to MongoDB

After going through those steps, your console should be looking like(not exactly) the image below:

And that's all!! Your MongoDB is up and running!!😁😁😁

AND THAT'S ALL!! AT LEAST FOR SETTING UP THE DATABASE😁😁😁😁

SETTING UP MONGODB COMPASS

A list of your Collections will be displayed:

And That's All!!

Note: Before running your Compass, Make sure your MongoDB is already running in the console!!

🎯Summary of `index.js` file:

📌 Create a mongoose model with the preffered name of your `collection` and the UserSchema created above

🎯Summary of `user.js` file:

📌 Create a body parsing middleware with the built in express body-parser in order to populate the `req.body` with our inputs

📌 Set the view engine to `ejs`

🎯Updated Summary of `index.js` file:

The command above should print the version of your NodeJS so you'll see something like this `v14.7.0`(Depending on the NodeJS version you installed)

⚫ Creating a server using `ExpressJs`

**After going through those steps, your console should be looking like(not exactly) the image below:**