DEV Community: Jovan M.

How to Setup and Run C on macOS

Jovan M. — Sun, 07 Mar 2021 19:11:48 +0000

This article is part of my YouTube video series : Link

Understanding what is needed to write C

You will need a compiler to convert your source code into executable code. (for windows I recommend using WinGW, if you are using macOS you have a default compiler installed)
You will also need a text editor or an IDE these are used for writing and saving your C code. If you are on Windows the Notepad can be used as a text editor (which I don't personally recommend because you can get an IDE free and simply). An IDE is an Integrated Development Enviroment that helps you write code. There are many features and plugins that make an IDE the best way to code.

*Popular IDE's: Atom, Sublime Text, Gedit and Visual Studio Code.

How to set up Visual Studio Code

First head over to Visual Studio Code, find and download the version and operating system you need.

After that open up Visual Studio Code and head over to the Extensions on the left panel. There you will need to install two extensions. The first one is for the intellisence and called C/C++ made by Microsoft. The second one is a code runner and I use the one made by Jun Huan.

You are ready to go with C

If you still have problems check out my video explaining the step by step here.

Thanks for reading,
Take care
Jovan

Making a TO-DO list web app using simple JavaScript

Jovan M. — Wed, 10 Feb 2021 12:55:35 +0000

In this tutorial I will show you how to make a tool that I use almost every day. It is a TO-DO list making web app. It helps me to organise and plan out my day. It makes for a great beginner project for JavaScript.

Here you can find the Source Code

Setting up the base HTML

<html lang="en-GB">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width:device-width, initial-scale:1.0">
    <title>to-do</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>To - Do</h1>

        <div class="col-12">
            <input id="userInput" type="text" placeholder="New item..." maxlength="150">
            <button id="enter"></button>
        </div>


        <div class="listItems col-12">
            <ul class="col-12 offset-0 col-sm-8 offset-sm-2"></ul>
        </div>

    </div>

    <script type="text/javascript" src="external.js"></script>
</body>
</html>

As you can see we have an ul element with no list items. The list items will be created when the button is entered. We will achieve this with the JavaScript code.

JavaScript logic

1.First let's set up the variables we will use

var enterButton = document.getElementById("enter");
var input = document.getElementById("userInput");
var ul = document.querySelector("ul");
var item = document.getElementsByTagName("li");

2.Make functions that calculate length of input and li

function inputLength(){
    return input.value.length;
} 

function listLength(){
    return item.length;
}

3.Make the function that creates the list element

function createListElement() {
    var li = document.createElement("li"); // creates an element "li"
    li.appendChild(document.createTextNode(input.value)); //makes text from input field the li text
    ul.appendChild(li); //adds li to ul
    input.value = ""; //Reset text input field


    //START STRIKETHROUGH
    // because it's in the function, it only adds it for new items
    function crossOut() {
        li.classList.toggle("done");
    }

    li.addEventListener("click",crossOut);//when the li is clicked is marked done with the crossOut() function
    //END STRIKETHROUGH


    // START ADD DELETE BUTTON
    var dBtn = document.createElement("button");
    dBtn.appendChild(document.createTextNode("X"));
    li.appendChild(dBtn);
    dBtn.addEventListener("click", deleteListItem);//when X is clicked the li is deleted
    // END ADD DELETE BUTTON


    //ADD CLASS DELETE (DISPLAY: NONE)
    function deleteListItem(){
        li.classList.add("delete")//this is a class that makes display: none; of the li 
    }
    //END ADD CLASS DELETE
}

This function makes an li element and appends it to the ul element. This function also allows for the highlight affect. And adds the button to delete the list item.

4.Make functions and event listeners that will run the CreateListItem function when Enter clicked or button clicked.

function addListAfterClick(){
    if (inputLength() > 0) { //makes sure that an empty input field doesn't create a li
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.which ===13) { //this now looks to see if you hit "enter"/"return"
        //the 13 is the enter key's keycode, this could also be display by event.keyCode === 13
        createListElement();
    } 
}


enterButton.addEventListener("click",addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

Style with CSS

Here is the code I used, I went for a simple look to make my routine easier you can choose to do whatever you want in this part since the important code is finished.

body {
    background: #04A1BF;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}


h1 {
    padding-top: 1rem;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 4rem;
}

#enter {
    border: none;
    padding: 7px 18px;
    border-radius: 7px;
    color: #04A1BF;
    background-color: #025F70;
    transition: all 0.75s ease;
    -webkit-transition: all 0.75s ease;
    -moz-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    -o-transition: all 0.75 ease;
    font-weight: normal;
}

#enter:hover{
    background-color: #02798F;
    color: #FFCD5D;
}

ul {
    text-align: left;
    margin-top: 20px;
}


li {
    list-style: none;
    padding: 10px 20px;
    color: #ffffff;
    text-transform: capitalize;
    font-weight: 600;
    border: 2px solid #025f70;
    border-radius: 5px;
    margin-bottom: 10px;
    background: #4EB9CD;
    transition: all 0.75s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5 ease;
}

li:hover {
    background: #76CFE0;
}

li > button {
    font-weight: normal;
    background: none;
    border: none;
    float: right;
    color: #025f70;
    font-weight: 800;
}

input {
    border-radius: 5px;
    min-width: 65%;
    padding: 10px;
    border: none;
}

.done {
    background: #51DF70 !important;
    color: #00891E;
}

.delete {
    display: none;
}

The important points in the CSS file are the classes and ids of the buttons and list items. Make sure to make them stand out when doing this.

Thank you for reading

Hope this helps someone, if it didn't comment down bellow the problem you have and I will reach out.
Thank you again,
Stay safe,
~Jovan

Number guessing game, beginner project in Python!

Jovan M. — Fri, 05 Feb 2021 16:39:55 +0000

This is one of the simplest Python projects for beginners in Python and programming in general. We will be making a program that generates a number between two numbers and then the user has to guess the number generated. We will add some nice feautures like choosing a difficulty and giving hints to guess better. This project was actually my first Python project so I'm eager to teach you guys this, Let's get into it.

Generating random numbers

To generate a random number everytime a new game is started we are going to import random and use the randint() function like this.

import random
number = random.randint(1, 100)

now if we use print(number) it will print a number between 1 and 100. Later we will change 1 and 100 with min and max and the bounds of the number will change according to the difficulty choosed. Shown in the next step.

Choosing difficulty

To choose the difficulty of the game we will just make maximum number allowed bigger and also we will have an option for a Custom Game. Where the user chooses the minimum and maximum allowed numbers.

min = 1
while True:
    difficulty = input("Choose difficulty of guess (Easy/Medium/Hard/Impossible/Custom):")
    if difficulty == "easy" or difficulty == "Easy" or difficulty == "EASY":
        max = 10
        break
    elif difficulty == "medium" or difficulty == "Medium" or difficulty == "MEDIUM":
        max = 25
        break
    elif difficulty == "hard" or difficulty == "Hard" or difficulty == "HARD":
        max = 50
        break
    elif difficulty == "impossible" or difficulty == "Impossible" or difficulty == "IMPOSSIBLE":
        max = 200
        break
    elif difficulty == "custom" or difficulty == "Custom" or difficulty == "CUSTOM":
        min = int(input("What do you want the minimum number possible to be: "))
        max = int(input("What do you want the maximum number possible to be: "))
        break
    else: print("Wrong input, try again!")

So this piece of code will be looped until a correct input is passed(do while). So at this point we add the min and max to the randint() function. So the whole code looks like this :

min = 1
while True:
    difficulty = input("Choose difficulty of guess (Easy/Medium/Hard/Impossible/Custom):")
    if difficulty == "easy" or difficulty == "Easy" or difficulty == "EASY":
        max = 10
        break
    elif difficulty == "medium" or difficulty == "Medium" or difficulty == "MEDIUM":
        max = 25
        break
    elif difficulty == "hard" or difficulty == "Hard" or difficulty == "HARD":
        max = 50
        break
    elif difficulty == "impossible" or difficulty == "Impossible" or difficulty == "IMPOSSIBLE":
        max = 200
        break
    elif difficulty == "custom" or difficulty == "Custom" or difficulty == "CUSTOM":
        min = int(input("What do you want the minimum number possible to be: "))
        max = int(input("What do you want the maximum number possible to be: "))
        break
    else: print("Wrong input, try again!")

import random
number = random.randint(min, max)

You can test this by choosing different difficulties and printing the number to see if it's in the bounds given.

Checking the guess

Now we have to add the ability to take input for the guess and assign that to a variable to check if it's the same as the number generated. Like this :

while True:
    #shows the bounds of the number and asks for guess
    print("A number from ", min, " to ", max, " has been generated.")
    guess = input("Guess the number: ")
    #allows only ints to be entered
    if guess.isdecimal() :
        guess = int(guess)
    else:
        continue

    #checks if correct and if wrong gives tips
    if guess == number :
        print("You guessed correctly!")
        break
    else:
        if guess > max or guess < min:
            print("You are out of minimum and maximum bounds you dummy")
            continue
        elif guess > number:
            print("Guess Lower")
        elif guess < number:
            print("Guess Higher")

Also if the guess isn't correct we have a message pop out to help the user to guess higher or lower.

Thanks for reading

I hope this helps anyone starting out like it helped me.
For any questions comment down bellow.
You can get the full code here: GitHub

Thank you again,
Stay safe,
~Jovan

Markdown Cheatsheet to bookmark

Jovan M. — Fri, 29 Jan 2021 16:20:32 +0000

Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber and Aaron Swartz created Markdown in 2004 as a markup language that is appealing to human readers in its source code form.
This article is made for a quick help for when you (and I) need to use markdown for a project.

Headers

Also H1 and H2 can be written like this

Text styles

Paragraphs

You can end a paragraph with two or more spaces and then begin a new paragraph. Like this:

Blockquotes

are done

Like this:

Lists

Unordered lists can be made in this ways

Ordered lists can be made in this way

You can also make sublists like this

You can make task lists with checkboxes like this

Code Blocks

To make a code block (which uses the element in HTML) by indenting a line with four spaces or a tab. You can also re-tab (or add an additional four spaces) for indentation inside your code. Like this:

Horizontal Rule

Horizontal rules (

) are easily added with three or more asterisks or hyphens, with or without spaces.

Links

Put the text to display in hard brackets [] followed by the url in parentheses (). You can also add a link title using quotes inside the parentheses. Relative paths work too.

Markdown also supports reference style links.

Images

Images are done the same way as links but with an exclamation point in front!

Tables

To make tables using markdown you can do it pretty easily. And has 2 different ways.

Footnote

Here is how to make footnotes.

Miscellany

Here's some stuff I don't use very often but some people may need it.

Auto links for emails

Escaping characters

Keyboard keys

That's it , I know there are more things but honestly I haven't used anything more than this. If you have anything you want me to add please comment and I will edit this.

Hope this helps,
Stay safe,
~Jovan

Build your own digital clock with JavaScript

Jovan M. — Thu, 28 Jan 2021 11:57:42 +0000

Why should I try this mini project?

If you’re on a website or using web applications with a digital self counting clock, there’s a big chance it’s powered by JavaScript code. This means JavaScript clocks don’t just make for good JavaScript projects, a JavaScript clock lets you get hands-on with the kind of actual work you’ll be doing as a JavaScript developer.

What we want to have

Here I list every feature I want my web clock to have

Display current date
Display current time
Increment the time on it's own (change every second)
Cycle through different wallpapers based on the time of day (morning, day, evening, night)

Now I'll go into detail how I implemented every feauture

0. Base design

Make the basic html structure

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width:device-width, initial-scale:1.0">
        <title>DATE AND TIME</title>
        <link rel="stylesheet" href="style/style.css">
    </head>

    <body>
        <img src="" id="wallpaper"> <!-- here we will have the wallpaper change during the different times of the day -->
        <div class="hero">
            <h3 id="print-date"></h3> <!-- spot for printing the date -->
            <h2 id="print-time"></h2> <!-- spot for printing the time -->
        </div>
    </body>

</html>

1. Display current time

We create the js folder in our project folder and in it we make a file named time.js . Here we start with our JS code.

We set a var called noon so we can distinguish between AM and PM

var noon = 12;

We make a function that will show the current time

var showCurrentTime = function(){

We set a var currentTime (For info about Date(); see here)

var currentTime = new Date();

You can get a lot of outputs from Date(); but in this script we will use these:

 var hours = currentTime.getHours();
 var minutes = currentTime.getMinutes();
 var seconds = currentTime.getSeconds();

We set a variable for the meridian (AM/PM)

var meridian = "AM";

Now we use if statements to see if it is AM Or PM based on the hours variable

 if (hours >= noon)
    {
        meridian = "PM";
    }

And if it is not PM the time needs to be converted to the 12 hour format like this

if (hours > noon)
    {
        hours = hours - 12;
    }

Now we need to set the minutes to display correctly because we need to display it 12:05:45 and not 12:5:45 so when its less than 10 we append to the left a 0 like this

if (minutes < 10)
    {
        minutes = "0" + minutes;
    }

Also the same is done for seconds

Now we set it all up together in one variable to be displayed in the print-time

var clockTime = hours + ':' + minutes + ':' + seconds + ' ' + meridian;

And now we display it in the print-time class in HTML

document.getElementById("print-time").innerHTML = clockTime;

we close the function here

2. Increment the time on it's own

We make a new function

var updateClock = function() 
{

Inside we put the previous function

showCurrentTime();

we close the function and we call it

};
updateClock();

Then we set an universal variable of a second

var oneSecond = 1000;

And we make it update(reload) the clock every second like this

setInterval( updateClock, oneSecond);

Now When you add the script in the body of your HTML and reload your website you will get a really ugly clock but make sure it works , if it doesn't revist the steps above.

3. Display current date

Let's now make another file in the js folder named date.js and start coding
You are already familiar with the Date(); method now we need different outputs

var today = new Date();
var years = today.getFullYear();
var months = today.getMonth();
var days = today.getDate();
var day = today.getDay();

Also we add a variable for the superscript ordinals(st nd rd th) so we can say 27th 3rd 2nd 1st of February

var endOfDay;

Now the getMonth returns values from 0 to 11 and we need to translate that to string variables like "March" we do that like this

if (months == 0){months = "January"};
if (months == 1){months = "February"};
if (months == 2){months = "March"};
if (months == 3){months = "April"};
if (months == 4){months = "May"};
if (months == 5){months = "June"};
if (months == 6){months = "July"};
if (months == 7){months = "August"};
if (months == 8){months = "September"};
if (months == 9){months = "October"};
if (months == 10){months = "November"};
if (months == 11){months = "December"};

We do the same for days because getDay returns values from 0 to 6 and we need to turn that into string like Friday

if (day == 0){day = "Sunday"};
if (day == 1){day = "Monday"};
if (day == 2){day = "Tuesday"};
if (day == 3){day = "Wendesday"};
if (day == 4){day = "Thursday"};
if (day == 5){day = "Friday"};
if (day == 6){day = "Saturday"};

And now for the superscript ordinals we need to set for 1,21,31 to be st for 2,22 nd for 3,23 rd and for the rest th and append that to the day variable so it look like 21st

if (days == 1){endOfDay = "st"};
if (days == 2){endOfDay = "nd"};
if (days == 3){endOfDay = "rd"};
if (days == 21){endOfDay = "st"};
if (days == 22){endOfDay = "nd"};
if (days == 23){endOfDay = "rd"};
if (days == 31){endOfDay = "st"};
if (days > 3 || days < 21 || days > 23){endOfDay = "th"};
days += endOfDay;

And for the end we just need to print everything we want in the format we want like Thursday, January 28th 2021

document.getElementById("print-date").innerHTML = day + ", " + months + " " + days + ", " + years;

Don't forget to add the the script to the body element in your HTML and when you reload you will have today's date.
It is still ugly but don't worry first we need to make everything work and after that the styling comes.

4. Cycle through different wallpapers based on the time

Now to do this is simple you need to go to your time.js file in the updateClock and do the following.

Add a variable to see what hour of the day it is

var time = new Date().getHours();

Now let's add the a string variable image that will hold the path to the image

var image = "images/day.jpg";

Now it is set to day.jpg but it doesn't matter because it will change after one of the following if statements are met

if (time > 6 && time < 12)
    {
        image = "images/morning.jpg";
    }
    else if (time > 12 && time < 17)
    {
        image = "images/day.jpg";
    }
    else if (time > 17 && time < 21)
    {
        image = "images/evening.jpg";
    }
    else if (time > 21 && time > 6){
        image = "images/night.jpg";
    }

Now make sure you have a folder images with morning.jpg day.jpg evening.jpg and night.jpg and this will work

After that we need to assign the wallpaper id in the HTML the path for what image to be and we do it like this

wallpaper.src = image;

now this will automatically update because this function is happening every second remember?
So lets see how it looks.
ohh.. yeah everything breaks we are missing CSS so what are waiting for.

5. UI

Now this part is the easiest I encourage you to do however you like it but i will provide my code just for refrence and for some initial help in the right direction.

This part will make the website unscrollable , it will add a nice font it will center the hero div and make the background fit nicely

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

/* not allow scrolling */
html {
    overflow: hidden;
}

body {
    margin: 0;
    font-family: Roboto;
}

img {
    width: 100%;
    height: 100%;
}

.hero {
    text-align: center;
}

Now this part (final part) will make the text come infront make it nicer bigger add a border some blur and nice effect to make it stand out.

.hero h3 {
    padding: 0.6rem;
    font-size: 3rem;
    position: absolute;
    backdrop-filter: blur(3px);
    letter-spacing: 0.1rem;
    color: rgb(250, 245, 245);
    border-radius: 2rem;
    border: 0.15rem solid rgb(184, 182, 182);
    top: 11rem;
    left: 22%;
    right: 22%;
    width: 56%;
}

.hero h2 {
    position: absolute;
    font-size: 3.5rem;
    letter-spacing: 0.1rem;
    color: rgb(243, 235, 235);
    backdrop-filter: blur(30px);
    border: 0.3rem solid rgb(184, 182, 182);
    border-radius: 1rem;
    top: 18rem;
    left: 35%;
    right: 35%;
    width: 30%;
}

Final product

The whole project with the pictures and evrything used is in the GitHub

(star it if you like it (: )

Thank you for reading

Thanks so much,
Stay safe,
~Jovan

Why should you learn C in 2021?

Jovan M. — Wed, 27 Jan 2021 10:41:38 +0000

For a language created in 1972, C is a middle-level programming language, but still remains very close to hardware, which makes it very useful for programming in conditions of limited resources or in situations where the speed of execution is critical.

Why start with C?

C is not specialized to any particular area of application and is quite general, which makes it suitable for learning the fundamentals of computer programming.
Helps to understand the fundamentals of Computer Theories. Most of the theories related to computers like Computer Networks, Compiler Designing, Computer Architecture, Operating Systems are based on C programming language and requires a good knowledge of C programming if you are working on them.
C is very fast in terms of execution time. Programs written and compiled in C executes much faster than compared to any other programming language.
C is extensively used in Embedded Programming. Embedded Programming is also referred to as micro-controller programming, where C program is used to control micro-controllers.
C can be useful both in Embedded Systems and Data Science
Most modern operating systems are written in C

Your first program in C

#include <stdio.h>
#include <stdlib.h>

int main()
{
    printf("Hello world!");
    return 0;
}

Now let's explain the code

Now let's see what the program outputs on the console

After all this years still C!?

Many of the C projects that exist today were started decades ago. But C programming isn’t limited to projects that started decades ago, when there weren’t as many programming languages as today. Many C projects are still started today; these are the most famous ones:

Google Google uses C code mostly for their backend programming (same is done with YouTube)
Microsoft Windows Microsoft’s Windows kernel is developed mostly in C, with some parts in assembly language.
Linux Linux is also written mostly in C, with some parts in assembly.
Mac Mac computers are also powered by C, since the OS X kernel is written mostly in C. Every program and driver in a Mac, as in Windows and Linux computers, is running on a C-powered kernel.
Mobile iOS, Android and Windows Phone kernels are also written in C.
Tesla Tesla's computers are tested in python and then translated to C for faster execution time. (also SpaceX does the same)
HP
Dell
Ford

Final thoughts

Most of Computer Science or any software engineering course students are introduced to C briefly as a lesson in Principles of Computer Programming. I advice anyone that is getting into programming to do his/her own research and find out exactly what you want to learn and make your own choice. I would say that it will take you between 2-3 weeks to learn the basics of C and I will suggest you do.

Drop any suggestions for posts or projects this is my 4 day in a row posting and I want to keep it going as long as possible.

Thank you for reading,
Stay safe,
~Jovan

Interactive Dark mode switch for your Website using CSS and JavaScript

Jovan M. — Tue, 26 Jan 2021 12:06:11 +0000

In the process of making my personal website I played around making an interactive switch for Dark/Light modes of my website. So I am going to present you my solution and If you like it you can see the steps of how I build it using vanilla JavaScript.

What we are making

Steps

1. Make your static website

Pretty simple design, in this post we will focus more on the switch and not on the look of the website. Make sure to include some text so we can see the change between the dark mode and light mode and don't forget the input. This is what I made:

2. Make Function to toggle .dark-mode with input
We will use an onclick function that will apply the .dark-mode CSS rules to our website. It is easy and looks something like this:

function myFunction() {
        var element = document.body;
        element.classList.toggle("dark-mode");
      }

Don't forget to add the onclick="myFunction()" part in the input tag. Looks like this :

So we made the dark mode switch but let's start customizing it in CSS and making it look more like a switch.

3. Customization in CSS
First I made the switch look like an actual switch and played around with the colors schemes until I found a pretty good one. Then I researched a bit how to make content: '' into a sun and a moon so I could make a cool animation like switching from daytime to nightime. I played around and found the best design for each and the best colors. The only thing left was to use an animation and use keyframes to "animate" the sun and moon. And after around a half our of work it was done. Here is the code:

You can get the whole folder here
GitHub

Thank you for reading!

I hope this article helps you and becomes useful, any critism is accepted and I encourage you to ask any questions in the comments.

Thanks again,

Stay safe,

~Jovan

Making a Typewriter effect for your Website using Typed.js library

Jovan M. — Mon, 25 Jan 2021 14:14:37 +0000

Mindset before going in

I am developing and designing my personal website for blog-posts and projects. I want my Header to consist of a text like:
Hey, I'm Jovan.
Simple and to the point. However I thought of a cool idea to use a JS library I saw someone use called Typed.js. Check it out here so you understand the principle : LINK

So as you can see the library basically allows you to type out something and delete it and type something else but it makes for a cool effect on your webpage by making it look like a cool old typewriter effect to add.

My vision

So the header I wanted to have at the start and at the end of the animation is: Hey, I'm Jovan.
But I thought of a cool way for people to understand who I am from the start is to delete until it looks like: Hey, I'm
And then to circle around different things I do like:

a Software Engineer
a Web Developer
a student

and then to end with saying : Hey, I'm Jovan.
So that way people get a feeling of what the website is about in an interactive and pretty simple way.

My steps

1.Download the library and add to project folder

First of all you need to download the library so here's is the link if you want to follow along with this post/tutorial. After downloading the .zip extract the files and add the whole folder to your projects source folder.

2.Add scripts to the header

These are the needed scripts that make the library function, you need to inculde them on the header of your HTML file.

<!-- typed.min.js file from typed.js folder -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Add jquery cdn -->
<script src="./typed.js-master/lib/typed.min.js"></script>

3.Add the needed script to function

This is only the basic code that the website provides, when we move on we will change and modify this code for our needs

var typed = new Typed('.element', {
  strings: ["First sentence.", "Second sentence."],
  typeSpeed: 30
});

This is how that simple format looks with a little CSS added in the mix.

4.Modify to your needs

So we have already enstablished what I want to be on my site so let's try to implement it here. After adding the text I wanted I realised that it typed too fast. I slowed the typing speed by going in the script and playing with the typeSpeed attribute and found what I liked at: typeSpeed : 90

After that I needed to add another attribute so I could play arround with the speed that it backspaced the text. I searched in the files provided the code that can do that and found that I can just add backSpeed: 40 in the script which was a great speed. While searching throught the code I also found an attribute backDelay, which delays the time between when the line is typed and when it's deleted however I didn't use it.

I thought I was finished here but when you use CSS and make your text bigger the cursor when the library is typing isn't getting bigger with the text so you have to find the variable and modify it. So after reading the README file I found the variable and modified it by adding this to my CSS file:

.typed-cursor {
    font-size: 5.5rem;
    color:rgb(87, 87, 87);
}

and was basically it.

Final product

Pretty cool right? If you want to try it yourself here is where you can get my source code:
Codepile
In order to run this you have to also install the library and add it to the same folder.

GitHub
This is the complete code I used in this example & the library so by downloading the code you get both.

Final thoughts/ Goodbyes

Thank you so much for reading this If you made it to here tell me what's your favorite song in the comments :)!
I hope this helped anyone and Thanks again!
~Jovan

"Hello World!" My first post!

Jovan M. — Tue, 19 Jan 2021 17:32:34 +0000

Hello World!
I’m Jovan, I’ve recently started my journey in learning coding and thought I’d introduce myself and say what I am doing and what I want to do in the future.

My conundrum:
I am a first year in a Software and Data Engineering course and even before that I've been intrigued with what code and programmers can accomplish. This is why I decided enrolling in this course after playing arround with HTML, CSS and JavaScript for 2 months and making little homemade project web-sites. Since then I have not been able to stop reading about coding and learning something new everyday.

Hopefully my journey will be useful to someone out there and I hope to teach what I learn to other people . I'd be happy to help out if I can, I am open to all and any project ideas or just queastions in my Dm's.

Thank you so much, Stay safe,
~ Jovan