DEV Community: VECTOR3Studio

Lorem Ipsum generator in JS || 10 JS Project Challenge #4

VECTOR3Studio — Sat, 05 Mar 2022 10:05:26 +0000

Hello 👋

In this post, I will show you how to make Lorem Ipsum generator in JS.

This is Part 3 of the 10 JS Project Challenge.

So let's get into it.

First, here is the video tutorial:

So let's start coding.

First, we need to create three files:

index.html
style.css
home.js

Once we have those files created, we can start coding.

Here is the code for index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lorem Ipsum</title>

    <!-- styles -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section>
      <div class="center">
      <h3>Lorem Ipsum Generator</h3>
      <form class="lorem-form">
        <label for="amount">Paragraphs:</label>
        <input type="number" name="amount" id="amount" placeholder="5" />
        <button type="submit" class="btn">generate</button>
      </form>
    </div>
      <article class="lorem-text"></article>
    </section>

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

We are just creating a Simple form with Number input and with a button. Then we have a section, where it will be our generated text.

Now, let's move to the styling!

Open style.css and write in that code.

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}



.center{
    display: inline-block;
    margin-top: 100px;
    margin-left: 42.5vw;

}

h3{
    font-size: 1.5rem;
    font-weight: bold;
}
article{
    margin: 50px 25px 0 25px;

}
button{
    background-color: skyblue;
    border: none;
    border-radius: 5px;
    padding: 10px;
    margin-left: 15px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
button:hover{
    background-color: #00bfff;
}

I think the CSS has no explanation here, so let's move to the JavaScript.
In app.js paste this code.

const text = [
    `Jelly sweet roll jelly beans biscuit pie macaroon chocolate donut. Carrot cake caramels pie sweet apple pie tiramisu carrot cake. Marzipan marshmallow croissant tootsie roll lollipop. Cupcake lemon drops bear claw gummies. Jelly bear claw gummi bears lollipop cotton candy gummi bears chocolate bar cake cookie. Cupcake muffin danish muffin cookie gummies. Jelly beans tiramisu pudding. Toffee soufflé chocolate cake pastry brownie. Oat cake halvah sweet roll cotton candy croissant lollipop. Macaroon tiramisu chocolate bar candy candy carrot cake jelly sweet. Gummies croissant macaroon dessert. Chocolate cake dragée pie.`,
    `Next level tbh everyday carry, blog copper mug forage kitsch roof party pickled hammock kale chips tofu. Etsy shoreditch 8-bit microdosing, XOXO viral butcher banh mi humblebrag listicle woke bicycle rights brunch before they sold out ramps. Twee shabby chic taiyaki flannel, enamel pin venmo vape four loko. Hexagon kale chips typewriter kitsch 8-bit organic plaid small batch keffiyeh ethical banh mi narwhal echo park cronut.`,
    `Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.`,
    `Cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers kitty power ignore the squirrels, you'll never catch them anyway for what a cat-ass-trophy! or purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table. Pretend you want to go out but then don't bite off human's toes, yet disappear for four days and return home with an expensive injury; bite the vet so catch eat throw up catch eat throw up bad birds. `,
    `This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry! Anyhoo, your net-suits will allow you to experience Fry's worm infested bowels as if you were actually wriggling through them.
  I just told you! You've killed me! Fry! Quit doing the right thing, you jerk! Michelle, I don't regret this, but I both rue and lament it. Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat.`,
    `Airedale hard cheese mozzarella. Pecorino melted cheese port-salut emmental babybel cheese and wine melted cheese manchego. Everyone loves blue castello everyone loves fromage cheese slices airedale cheddar cream cheese. Bavarian bergkase who moved my cheese halloumi port-salut gouda jarlsberg ricotta rubber cheese. Stinking bishop smelly cheese brie.`,
    `Salvia glossier subway tile, leggings mustache YOLO semiotics chia. Pitchfork tbh af blog church-key meggings vaporware PBR&B master cleanse post-ironic man bun pabst mustache letterpress synth. Snackwave raw denim godard, 3 wolf moon shaman offal kitsch unicorn live-edge selvage schlitz fashion axe vaporware drinking vinegar prism. Shabby chic tacos artisan, chambray chicharrones cardigan leggings typewriter af pop-up williamsburg meditation PBR&B viral. You probably haven't heard of them DIY jean shorts subway tile fashion axe bushwick kitsch tumeric cloud bread vaporware freegan franzen pork belly chicharrones banh mi.`,
    `Man braid celiac synth freegan readymade, pitchfork fam salvia waistcoat lomo bitters gentrify four loko. Pitchfork semiotics post-ironic vegan. Tofu meditation microdosing hashtag semiotics venmo. Flexitarian vape tilde taiyaki. Prism poutine farm-to-table, messenger bag vegan taxidermy tattooed sartorial squid jean shorts fixie selvage trust fund vape.`,
    `Rutters Plate Fleet boom chandler Brethren of the Coast handsomely lookout marooned brigantine knave. Buccaneer gangway jack rum loot spyglass line Jack Tar fore gaff. Gaff topmast scuttle ballast swab draught measured fer yer chains dance the hempen jig Chain Shot yardarm.`,
  ];

  const form = document.querySelector(".lorem-form");
  const amount = document.getElementById('amount');
  const result = document.querySelector('.lorem-text');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const value = parseInt( amount.value);
    const random = Math.floor(Math.random() * text.length);

    if(isNaN(value) || value < 1 || value > 9) {
      result.innerHTML = `<p class ="result align="center">${text[random]}</p><br>`;
    }
    else{
      let tempText = text.slice(0, value);
      tempText = tempText.map(function(item){
        return `<p class ="result" align ="center">${item}</p><br>`;
      }).join("")
      result.innerHTML = tempText;
    }

  });

So, at first we have a text array with Lorem Ipsum Text, so we can grab that text and use it.
Then we need to declare variables for form, input and result.
Then we are listening to user to click button, and when they clicked it, we are changing the value from original string, to Integer through parseInt( amount.value).

If the value is Nan(user have-not write anything to the input field), or is less than 1 and bigger than 9, we want to randomly generate text through Math.random() - variable random which we declared.

If the user wrote the correct value, we want to pick text from the array, that is corresponding to the correct value. Then we want to map(pick a corresponding text from array) and return and HTML element with this text.

And then we want to just print the text using innerHTML.

And that is. Now you can generate Lorem Ipsum whenever you need it.

Thanks for reading my post. I hope you learned something new!

COVID Tracker App in JS || 10 JS Project Challenge #3

VECTOR3Studio — Thu, 06 Jan 2022 13:03:16 +0000

Hello 👋

In this post I will show you how to make COVID Tracker App with COVID Tracking API.

This is Part 3 of the 10 JS Project Challenge.

So let's get into it.

First, here is the video tutorial:

So let's start coding.

First, we need to create three files:

index.html
style.css
home.js

Once we have those files created, we can start coding.

Here is the code for index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <header>
        <h1>COVID-19 in Slovakia</h1>
        <a href="#">About</a>
    </header>
    <div class="container covid">
        <h1>Total Cases: <span id = "cases">0</span></h1>
        <h1>Total Deaths: <span id = "deaths">0</span></h1>
        <h1>Population: <span id = "population">0</span></h1>
    </div>

    <div class="container covid">
        <h1>Vaccinations: <span id = "vaccinations">0</span></h1>
        <h1>Partially Vaccinated: <span id = "partially">0</span></h1>
    </div>

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

We are just creating a header with the Logo and About button.
We are creating a text with information about COVID-19.

Now it's time for styling!. Open our style.css and write this code in it.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 13%;
}

h1{
    padding-left: 4.5rem;
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;
}
header a{
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
    padding-right: 1.5rem;
    color: black;
}

We have a font here declared, the font is Poopins.
We are rewriting the default padding and margin and changing the font to Poopins. The other is just styling elements.

Now let's move to the actual coding and fun part. So let's start programming in JavaScript

fetch('https://covid-api.mmediagroup.fr/v1//cases?country=Slovakia')
.then(response => response.json())
.then(data => {
    console.log(data)
     document.getElementById('cases').innerHTML = data.All.confirmed.toLocaleString();
    document.getElementById('deaths').innerHTML = data.All.deaths.toLocaleString();
    document.getElementById('population').innerHTML = data.All.population.toLocaleString();

})

So first, we need to decide, from what country we want the data. I'm fetching the Data from Slovakia. After Fetch, we need to take the response and write it to the JSON File as JS object. Then we need to take that JSON file and convert it into variable data so we can assign the variable to the actual text. So we are overwriting the numbers in the different elements.

Now that we have COVID part done, let's move to the vaccination part.

fetch('https://covid-api.mmediagroup.fr/v1//vaccines?country=Slovakia')
.then(response => response.json())
.then(data => {
    console.log(data)
     document.getElementById('vaccinations').innerHTML = data.All.people_vaccinated.toLocaleString();
    document.getElementById('partially').innerHTML = data.All.people_partially_vaccinated.toLocaleString();
})

We are basically using the same method here, but assigning different elements.

Now, we are done! Open your index.html and you should see results like this.

And that's it. You created your own COVID Tracking website with API. Congrats!

Thanks for reading my post, and I hope I will see you next time.

Counter in JS || 10 JS Project Challenge #2

VECTOR3Studio — Thu, 23 Dec 2021 13:01:31 +0000

Hello 👋

In this post I will show you how to make Counter, when you click a button in JavaScript.

This is Part 2 of the 10 JS Project Challenge.

So let's get into it.

First, here is the video tutorial:

So let's start coding.

First, we need to create three files:

index.html
style.css
home.js

Once we have those files created, we can start coding.

Here is the code for index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <h1 class="number">0</h1>
        <div class="buttons">
            <button class="upper" onclick="add()">Add Count</button>
            <button class="lower" onclick="Lower()">Lower Count</button>
        </div>
    </div>
    <script src="home.js"></script>
</body>
</html>

So basically we are creating one Text for the counter and two buttons. Nothing crazy so far.

Now it's time for styling!. Open our style.css and write this code in it.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
.wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 35vh;
}
h1{
    font-size: 4rem;
}
.buttons{
    padding-left: 1.5rem;
}
button{
    margin-left: 0.5rem;
    background-color: #4287f5;
    color: white;
    padding: 12px 7.5px;
    border-radius: 20px;
    border: none;
    outline: none;
    cursor: pointer;
}

We have a font here declared, the font is Poopins.
We are rewriting the default padding and margin and changing the font to Poopins. The other is just styling elements.

Now let's move to the JavaScript part. Here is the code for JavaScript.

const upper = document.querySelector(".upper");
const lower = document.querySelector(".lower");
const numberElement = document.querySelector(".number")
let number = 0;


function add(){
    number += 1;
    numberElement.innerHTML = number;
}

function Lower(){
    number -= 1;
    numberElement.innerHTML = number;
}

So first we are creating variables for each element in HTML. The we are creating a variable for Number Integer so we can count how many users press the button. So we are creating two functions, one for increasing our counter, and one for decreasing.
Function obtains a Number + or -, and then we are passing the value to the actual text.

And that's it. You can see the Actual value of the number on the screen, depending which button you are pressing.

Thanks for reading my post, and I hope I will see you next time.

Random Background On clicking button in JS || 10 JS Project Challenge #1

VECTOR3Studio — Sun, 19 Dec 2021 10:01:49 +0000

Hello 👋

In this post I will show you how to make Random Background, when you click a button in JavaScript.

This is Part 1 of the 10 JS Project Challenge.

So let's get into it.

First, here is the video tutorial:

So let's start coding.

First, we need to create 3 files in our folder.

index.html
style.css
home.js

Once we have those files created, we can start coding.

Here is the code for index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <button">Click Me</button>
    <script src="home.js"></script>
</body>
</html>

We are just creating a basic HTML structure and a Button. We need to link our CSS and JS files too.

Now, let's do style.css.
Here is the code:

body{
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
}
button{
    padding: 14px 24px;
    font-size: 24px;
    border: none !important;
    outline: none !important;
    border-radius: 20px;
    background: white;

}

In CSS, we are just styling our body and a button.

And finally, let's make our JavaScript.
Add this code to your home.js:

function changeBg(){
    document.body.style.backgroundColor = 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
}

What this code does is make a function, and in this function is setting and body Background Color to RGB(Random, Random, Random). And that is how we can achieve a Random Color Generation.

We ain't done yet, we need to add this function to our button, so when we click, a background color will be randomly chosen.
You can achieve this simply by adding a onclick fucntion to the button in our index.html.

<button onclick="changeBg()">Click Me</button>

And now we are done! You should see a color change every time you click a button. Great Work.

Thanks for reading my post, and I hope I will see you next Time.

Make Spam bot in Python in just 6 lines

VECTOR3Studio — Mon, 20 Sep 2021 09:22:03 +0000

1 Hello 👋
In this post I will show you how to make simple spam bot in Python in just 6 lines of code.

BTW you can watch video tutorial here:

So let's Start ▶️

First we need to install Pysimplegui library, we can do it by running this command

 pip install pysimplegui

Next, we need to import pysimplegui and time library. We can use this code

import pysimplegui, time

Now let's make a program for spamming.
First we need add a timer, because you will need some time to go to Instagram or something.
Then we need ad a whole loop for the spamming functionality
Here is the code:

time.sleep(5) #delay for 5 sec
while True: #endless loop
  pyautogui.write("heyy")
  pyautogui.press("enter")
  time.sleep(0.2)

That's the whole code you need to Spam your friend.

Thanks for Reading this post. I hope you learned something new. See you 👋

How to make simple password manager in python

VECTOR3Studio — Fri, 29 Jan 2021 15:34:10 +0000

Hello!!!

In this post I will tell you how to make a simple password manager in python. So let's get into.

As First thing we need to do is set your password for password manager and add user Input, so you can type the password.

Password = "1111"
PasswordGues = input("Password: ")

Next Thing we need to add is if statement, which checks if the entered password is correct.

Password = "1111"
PasswordGues = input("Password: ")
if(Password == PasswordGues):

And Now we can Print our password for reddit for example.

Password = "1111"
PasswordGues = input("Password: ")
if(Password == PasswordGues):
print("Reddit Password: BUY_GME")

Now we have all done!

Thanks for reading my article. If was this helpfull, you can leave a like or you can buy me a coffee. Thanks!

What are my plans for 2021

VECTOR3Studio — Thu, 31 Dec 2020 13:31:15 +0000

I will always create games, program sites, but next year I want to try something new.
I want to learn a Javascript and a Web games development.
And what's your plans for 2021? Let mé know. Happy new year :)

How I can add buy me a coffe Button on Dev.to posts?

VECTOR3Studio — Mon, 28 Dec 2020 16:36:06 +0000

Please help me. Thanks :)

Best sites for free Website templates

VECTOR3Studio — Sun, 27 Dec 2020 18:00:16 +0000

These are the 5 best websites

Thanks for checking my post :)

HTML Tables

VECTOR3Studio — Sat, 26 Dec 2020 18:44:23 +0000

HTML tables allow web developers to arrange data into rows and columns.

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

This is example of Basic table.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Megan</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Michael</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

BONUS: How to make border.

table, th, td {
  border: 1px solid black;
}

Thanks for reading :)

How to make transition in CSS 3

VECTOR3Studio — Fri, 25 Dec 2020 19:41:49 +0000

What is transition in CSS?

CSS transitions allows you to change property values smoothly, over a given duration.

How to use transition?

In this example we will create Red square.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

The transition effect will start when the specified CSS property (width) changes value.

div:hover {
  width: 300px;
}

That's it. You have sucesfully created a transition.

Thanks for reading :)

What's makes Good pixel art game

VECTOR3Studio — Thu, 17 Dec 2020 21:54:47 +0000

Hello! In this post i Will tell you what's makes Good pixel art game.

Resolution of cannvas. Every character need Be as big as the others character.
Good color palete. Before you start drawing choose first Color palette you want to use.
Shades are very important because it looks much better Shaded as purely one color.
Focus on good lighting especially when the game takes place in a confined environment.
Good Boss. Making a good and difficult boss is difficult, It is more attractive for a player when the boss has more attacks. Then it's not repetitive.

Thnaks for reading.