DEV Community: Davide

⏱️ Creating a Simple Timer App with JavaScript

Davide — Sun, 02 Feb 2025 21:19:36 +0000

🔗 Introduction

Have you ever needed a simple countdown timer for your projects? In this tutorial, we will build a minimalistic Timer App using HTML, CSS, and JavaScript. This project is perfect for beginners looking to practice DOM manipulation and event handling in JavaScript.

🔢 Project Overview

Our Timer App will include:

A countdown timer starting from 24:59 ⏳
Start/Stop functionality ⏸️▶️
Reset button to restart the timer 🔄
Simple and modern UI with CSS styling 🎨

Let's dive into the code! 🚀

📄 HTML Structure

The following HTML creates the basic layout of our Timer App:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer App</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <main>
        <section id="timerScreen">
            <div id="timer-container">
                <h4 id="author">Your Name</h4>
                <p id="course">JavaScript Timer</p>
                <div id="timerDisplay">
                    <h1 id="time">24:59</h1>
                </div>
                <div id="button-container">
                    <button id="startBtn" class="button">Start</button>
                    <button id="resetBtn" class="button">Reset</button>
                    <button id="closeBtn" class="button">&times;</button>
                </div>
            </div>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

📝 JavaScript Logic

Now, let's implement the timer functionality in JavaScript. This script:

Starts and stops the countdown ⏳
Updates the UI dynamically 🖥️
Resets the timer when needed 🔄

// Selecting elements
const timerDisplay = document.getElementById("time");
const startButton = document.getElementById("startBtn");
const resetButton = document.getElementById("resetBtn");
const timerContainer = document.getElementById("timerDisplay");

let isRunning = false;
let interval;
let minutes = 24;
let seconds = 59;

// Function to update timer display
function updateTimer() {
    timerDisplay.innerHTML = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
}

// Start/Stop button functionality
startButton.addEventListener("click", function () {
    if (!isRunning) {
        isRunning = true;
        startButton.textContent = "Stop";
        timerContainer.style.border = "1px solid lightgray";

        interval = setInterval(() => {
            if (seconds > 0 || minutes > 0) {
                seconds--;
                if (seconds === 0 && minutes > 0) {
                    seconds = 59;
                    minutes--;
                }
                updateTimer();
            } else {
                clearInterval(interval);
                isRunning = false;
                startButton.textContent = "Start";
            }
        }, 1000);
    } else {
        clearInterval(interval);
        isRunning = false;
        startButton.textContent = "Start";
        timerContainer.style.border = "2px solid red";
    }
});

// Reset button functionality
resetButton.addEventListener("click", function () {
    clearInterval(interval);
    isRunning = false;
    minutes = 24;
    seconds = 59;
    updateTimer();
    startButton.textContent = "Start";
});

// Initial display update
updateTimer();

🎨 Styling with CSS

To give our Timer App a clean and modern look, we use the following CSS styles:

body {
    background-color: #e5e5e5;
}

#timerScreen {
    margin: 6% auto;
    height: 600px;
    width: 60%;
    border: 1px solid #e5e5e5;
    border-radius: 30px;
    background-color: #fefefe;
    box-shadow: 10px 10px 50px grey;
    display: flex;
    align-items: center;
    justify-content: center;
}

#timerDisplay {
    border: 1px solid lightgray;
    height: 300px;
    width: 28%;
    border-radius: 50%;
    box-shadow: 0px 0px 150px 50px lightgray;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button {
    border: none;
    background-color: #fefefe;
    font-family: 'Courier New', Courier, monospace;
    color: gray;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
}

.button:hover {
    color: black;
}

🚀 Final Thoughts

Congratulations! 🎉 You have successfully built a simple Timer App using HTML, CSS, and JavaScript. This project is a great way to practice JavaScript fundamentals like event listeners, DOM manipulation, and intervals.

🔍 What You Learned:

✅ Creating a dynamic UI with JavaScript
✅ Using setInterval to update the timer every second
✅ Handling user interactions with event listeners
✅ Styling elements to improve UI/UX

Now, try customizing the app! Maybe add sound alerts, different themes, or an adjustable timer. 🚀

Happy coding! 💻✨

From Basics to Intermediate: My Journey Learning JavaScript ✨

Davide — Sun, 26 Jan 2025 21:03:45 +0000

Welcome to my guide on JavaScript fundamentals to advanced topics! As I was diving into learning JavaScript, I jotted down key points, examples, and tips. This post is structured from the basics to more advanced concepts, so you can follow along step-by-step. Let's get started!

Variables
Arrays
Conditional Statements
Functions
Objects
The DOM
Events
Integrating HTML and JS

1. Variables

Variables store data that we can use in our programs. JavaScript provides two primary ways to declare variables:

let: Used when the variable value may change.
const: Used for values that remain constant.

Example:

let age = 25;
const name = "Mario";

Variables can hold numbers, strings, booleans, or even undefined values. Additionally, JavaScript includes a range of arithmetic operators, such as +, -, *, and %. Fun fact: to calculate exponents, use **!

console.log(2 ** 3); // Output: 8

2. Arrays

An array can store multiple values in a single variable. Use square brackets to define an array:

let fruits = ["apple", "banana", "cherry"];

Access elements using their index (starting at 0):

console.log(fruits[0]); // Output: apple

Adding and Removing Elements

You can modify arrays dynamically:

Add to the end: .push()
Add to the beginning: .unshift()
Remove the last element: .pop()
Remove the first element: .shift()

Example:

fruits.push("orange");
console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]

Searching Arrays

Use .indexOf() to find the position of a value or .includes() to check if it exists:

console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false

3. Conditional Statements

Conditional statements let your code make decisions. The if and else statements are common tools:

if (grade > 60) {
  console.log("You passed!");
} else {
  console.log("You failed!");
}

Comparison Operators

These help evaluate conditions:

=== (strict equality)
!== (strict inequality)
> (greater than)
< (less than)
>= (greater than or equal to)
<= (less than or equal to)

4. Functions

Functions are reusable blocks of code. Define them using the function keyword:

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Output: Hello, Alice!

Parameters and Arguments

Functions can take inputs, called parameters, and use those inputs when called with arguments:

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // Output: 5

5. Objects

An object is a collection of key-value pairs. It’s like a mini-database for related data:

const car = {
  brand: "Tesla",
  model: "Model 3",
  year: 2020
};
console.log(car.brand); // Output: Tesla

Methods in Objects

Objects can also store functions, known as methods:

const phone = {
  brand: "Apple",
  ring() {
    console.log("Ring, ring! 📲");
  }
};
phone.ring();

6. The DOM

The Document Object Model (DOM) allows JavaScript to interact with HTML elements.

Selecting Elements

You can select HTML elements using the document object:

const heading = document.querySelector("h1");
console.log(heading.innerText); // Logs the text inside the <h1> tag

Updating Elements

Change content dynamically:

heading.innerText = "Welcome to JavaScript!";

7. Events

JavaScript allows you to respond to user interactions, like clicks or key presses. Use .addEventListener():

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

Example: Increment a counter when a button is clicked:

let count = 0;
button.addEventListener("click", () => {
  count++;
  console.log(`Clicked ${count} times`);
});

8. Integrating HTML and JS

JavaScript can be added directly in HTML files using the <script> tag:

<script>
  console.log("Hello from JavaScript!");
</script>

For larger scripts, link an external .js file:

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

That’s it for my journey through JavaScript basics to intermediate topics! I hope you found this post helpful and fun to follow along. If you have questions or want to share your own learning tips, drop a comment below! Happy coding! ✨

How to Customize Your GitHub Profile Like a Pro! 🚀

Davide — Thu, 23 Jan 2025 21:55:16 +0000

Want to make your GitHub profile stand out and reflect your personality? 🌟 You’re in the right place! In this post, we’ll guide you step-by-step on how to transform your profile into an eye-catching and professional showcase of your work. Let’s get started! 🙌

Step 1: Set Up Your Custom GitHub Profile

To create a custom profile, start by creating a public repository with the name exactly matching your GitHub username. Make sure to tick the box that says "Add a README file".

Once you do this, GitHub will automatically recognize the repository as your profile bio and display it prominently on your profile page. 🎉

The README file uses the Markdown (.md) format, which is super versatile and easy to work with. Need a quick Markdown tutorial? Check out this Markdown Cheat Sheet for all the tips and tricks! ✍️

Step 2: Use Tools to Elevate Your Profile

Here are some fantastic tools to take your profile to the next level:

1. GitHub Profile README Generator 🛠️

This tool helps you generate professional-looking README files packed with all the essential info about you, your projects, and more. It’s simple, efficient, and customizable!

2. GitHub Stats 📊

Want to showcase your GitHub activity? This tool lets you add beautiful stats directly into your README file. You can display metrics like commit frequency, top languages, and more—all with sleek and customizable designs.

Check it out here

Features include:

Accurate and detailed account stats.
Multiple styles to match your aesthetic.
Easy-to-embed code snippets.

3. Markdown Badges 🎖️

Add colorful badges to your bio for a polished and professional touch! These badges can represent tools, technologies, certifications, or anything you want to highlight. 🏷️

Explore Markdown Badges

4. YouTube Cards 🎥

Are you a content creator? Link your latest YouTube videos to your profile with these visually appealing cards. Each card displays your video thumbnail, making it easier for visitors to discover your work!

Learn how to add YouTube Cards

Why Customize Your GitHub Profile?

A well-crafted GitHub profile isn’t just about aesthetics. It:

Showcases your skills to potential collaborators or employers.
Highlights your projects in a clean and organized way.
Leaves a lasting impression on anyone who visits your profile.

Ready to Get Started? 🎉

What are you waiting for? Head over to your GitHub account and start customizing today. Use the tools we’ve shared to create a profile that’s not just functional but also uniquely YOU! 💡

Have fun customizing your profile, and don’t forget to share it with us in the comments! 💬 We’d love to see what you come up with. 😊

Learning C: Building an Inventory Management System 🚀

Davide — Wed, 22 Jan 2025 22:03:40 +0000

Hello, world! 🌍

As a student diving into the world of programming with C, I recently challenged myself with an exciting project: creating an Inventory Management System! 🛠️ This program is a practical way to manage products, categories, quantities, and prices, all while learning key programming concepts.

Let me walk you through what I built, and maybe it will inspire you to try something similar! 🤓

Features of My Inventory Management System 🗂️

1. Add Products 🛒

You can add items to your inventory by specifying their category, name, quantity, and price. These details are stored in a file named Inventory.txt. Here's how the data is saved:

//Category: INFORMATICS
Product: Mouse  Quantity: 20    Price: 15.99€

2. View Inventory 📜

Want to see what you have in stock? The program can display the entire inventory in a neat format. No need to manually search through files—just run the program and select the View Inventory option!

3. Modify Quantities ✏️

If stock levels change, you can update the quantity of any product. This feature reads the file, modifies the necessary line, and saves the updates seamlessly.

4. Split by Category 🗃️

Organize your inventory further by splitting items into separate files based on their categories. For instance, all INFORMATICS products go into Informatics.txt, and ELECTRONICS items go into Electronics.txt.

The Code 🖥️

Here's a snippet of the core functionality:

// Function to add an item to the inventory
void addItem(char category[], char name[], int quantity, float price) {
    FILE *pFile;
    pFile = fopen("Inventory.txt", "a");
    fprintf(pFile, "//Category: %s\nProduct: %s\tQuantity: %d\tPrice: %.2f€\n", category, name, quantity, price);
    fclose(pFile);
}

I implemented several functions to handle specific tasks, like adding items, viewing the inventory, and even splitting it by category. These functions helped me learn how to work with file I/O, string manipulation, and conditional logic in C.

Lessons Learned 📚

File Handling: Managing inventory required reading, writing, and modifying files. This was a fantastic introduction to file handling in C!
String Operations: I practiced working with strings to format data and convert categories to uppercase.
Problem-Solving: Debugging and refining my code taught me to think like a programmer.

Try It Out! 💻

Here’s the full code if you want to experiment:

#include <stdio.h>
#include <string.h>
#include <ctype.h>

// Function to add an item to the inventory
void addItem(char category[], char name[], int quantity, float price) {
    FILE *pFile;
    // Open file in append mode to add data
    pFile = fopen("Inventory.txt", "a");
    // Write the item details in the file
    fprintf(pFile, "//Category: %s\nProduct: %s\tQuantity: %d\tPrice: %.2f€\n", category, name, quantity, price);
    fclose(pFile); // Close the file
}

// Function to display the inventory
void viewInventory() {
    char line[200];
    FILE *pFile;
    // Open the inventory file in read mode
    pFile = fopen("Inventory.txt", "r");

    // Read and print each line until EOF
    while (fgets(line, sizeof(line), pFile)) {
        printf("%s", line);
    }
    fclose(pFile); // Close the file
}

// Function to modify the quantity of an item
void modifyQuantity(char name[], int newQuantity) {
    char line[200], updatedLine[200], itemName[30];
    int itemQuantity;
    float itemPrice;
    FILE *pFile, *pTmp;

    // Open the original file in read mode and a temporary file in write mode
    pFile = fopen("Inventory.txt", "r");
    pTmp = fopen("Temporary.txt", "w");

    // Read each line and process
    while (fgets(line, sizeof(line), pFile)) {
        sscanf(line, "Product: %s\tQuantity: %d\tPrice:%f€", itemName, &itemQuantity, &itemPrice);

        // If the product matches, update its quantity
        if (strcmp(name, itemName) == 0) {
            sprintf(updatedLine, "Product: %s\tQuantity: %d\tPrice: %.2f€\n", itemName, newQuantity, itemPrice);
            fputs(updatedLine, pTmp);
        } else {
            // Otherwise, copy the original line
            fputs(line, pTmp);
        }
    }
    fclose(pFile);
    fclose(pTmp);

    // Replace the original file with the updated file
    remove("Inventory.txt");
    rename("Temporary.txt", "Inventory.txt");
}

// Function to split inventory items into separate files by category
void splitByCategory() {
    char line[200], categoryName[30], name[30];
    int quantity;
    float price;
    FILE *pFile, *pInf, *pElec;

    // Open the inventory file and category files
    pFile = fopen("Inventory.txt", "r");
    pInf = fopen("Informatics.txt", "w");
    pElec = fopen("Electronics.txt", "w");

    // Process each line
    while (fgets(line, sizeof(line), pFile)) {
        sscanf(line, "//Category: %s\nProduct: %s\tQuantity: %d\tPrice:%f€", categoryName, name, &quantity, &price);

        // Write items into the respective category file
        if (strcmp(categoryName, "INFORMATICS") == 0) {
            fputs(line, pInf);
        } else if (strcmp(categoryName, "ELECTRONICS") == 0) {
            fputs(line, pElec);
        }
    }
    fclose(pFile);
    fclose(pInf);
    fclose(pElec);
}

int main() {
    int choice;
    char name[30], category[30];
    int quantity, newQuantity;
    float price;

    printf("-- Welcome to the Inventory Management System --");

    do {
        // Display menu options
        printf("\nWhat would you like to do?\n");
        printf("1. Add Product\t 2. View Inventory\t 3. Modify Quantity\t 4. Split by Category\t 5. Exit\n");
        scanf("%d", &choice);

        switch (choice) {
            case 1:
                // Add a product
                while (1) {
                    printf("Enter the product category (Informatics/Electronics):\n");
                    scanf("%s", category);

                    // Convert category to uppercase
                    for (int i = 0; i < strlen(category); i++) {
                        category[i] = toupper(category[i]);
                    }

                    // Validate category
                    if (strcmp(category, "INFORMATICS") == 0 || strcmp(category, "ELECTRONICS") == 0) {
                        break;
                    } else {
                        printf("Unsupported category. Please try again.\n");
                    }
                }
                printf("Enter the product name:\n");
                scanf("%s", name);
                printf("Enter the quantity of %s in stock:\n", name);
                scanf("%d", &quantity);
                printf("Enter the price per unit:\n");
                scanf("%f", &price);
                addItem(category, name, quantity, price);
                break;

            case 2:
                // View inventory
                printf("Here is your inventory:\n");
                viewInventory();
                break;

            case 3:
                // Modify product quantity
                printf("Enter the product name:\n");
                scanf("%s", name);
                printf("Enter the new quantity:\n");
                scanf("%d", &newQuantity);
                modifyQuantity(name, newQuantity);
                break;

            case 4:
                // Split inventory by category
                splitByCategory();
                break;

            case 5:
                // Exit
                printf("Exiting the program.\n");
                break;

            default:
                printf("Invalid choice. Please try again.\n");
        }
    } while (choice != 5);

    return 0;
}

Feel free to share your feedback or suggest improvements! Let’s learn and grow together. 🚀

Have you built something similar or have ideas to enhance this project? Drop your thoughts in the comments! 💬

Happy coding! 👨‍💻👩‍💻

Practicing C: Building a Simple Phonebook Application

Davide — Tue, 21 Jan 2025 19:01:11 +0000

If you're learning C programming, practical exercises can be the best way to solidify your skills. In this post, I'll walk you through a project I worked on recently: creating a simple phonebook application. This program allows you to add, view, and delete contacts, demonstrating file handling and basic data management in C.

Code Walkthrough

Here's the complete code for the phonebook application:

#include <stdio.h>
#include <string.h>

// Function declarations
void addContact(char name[], char number[]);
void viewContacts();
void deleteContact(char name[]);

int main() {
    int choice;
    char name[20];
    char number[20];

    printf("-- Welcome to your phonebook! -- \n");

    do {
        // Display menu
        printf("\nWhat operation would you like to perform?\n");
        printf("1. Create a new contact\t 2. View your phonebook\t 3. Delete a contact\t 4. Exit\n");
        scanf("%d", &choice);

        switch (choice) {
            case 1:
                // Adding a new contact
                printf("Great, let's create a new contact: \n");
                printf("Enter the contact's name:\n");
                scanf("%s", name);
                printf("Now enter the phone number:\n");
                scanf("%s", number);
                addContact(name, number);
                break;
            case 2:
                // Viewing the phonebook
                printf("Here is your phonebook: \n");
                viewContacts();
                break;
            case 3:
                // Deleting a contact
                printf("Write the name of the contact you want to delete:\n");
                scanf("%s", name);
                deleteContact(name);
                break;
        }
    } while (choice != 4); // Loop until the user selects "Exit"

    return 0;
}

// Function to add a contact to the phonebook
void addContact(char name[], char number[]) {
    FILE *pFile;
    pFile = fopen("Phonebook.txt", "a");
    if (pFile == NULL) {
        printf("Error opening the phonebook.");
        return;
    }
    fprintf(pFile, "Name: %s \t Number: %s\n", name, number);
    printf("The contact has been created! \n");
    fclose(pFile);
}

// Function to view all contacts in the phonebook
void viewContacts() {
    char fileContent[200];
    FILE *pFile;
    pFile = fopen("Phonebook.txt", "r");

    while (fgets(fileContent, sizeof(fileContent), pFile)) {
        printf("\n%s", fileContent);
    }

    fclose(pFile);    
}

// Function to delete a contact from the phonebook
void deleteContact(char name[]) {
    FILE *pFile, *pTrash;
    char line[200], contactName[20], contactNumber[20];

    pFile = fopen("Phonebook.txt", "r");
    pTrash = fopen("Trash.txt", "w");

    if (pFile == NULL || pTrash == NULL) {
        printf("Error opening the file.");
        return;
    }

    while (fgets(line, sizeof(line), pFile)) {
        sscanf(line, "Name: %s \t Number: %s\n", contactName, contactNumber);
        if (strcmp(name, contactName) != 0) {
            fputs(line, pTrash);
        }
    }

    fclose(pFile);
    fclose(pTrash);

    // Replace the old phonebook with the updated version
    remove("Phonebook.txt");
    rename("Trash.txt", "Phonebook.txt");
    printf("The contact has been deleted.");
}

Features of the Program

This program implements three key functionalities:

Add Contacts:
- Allows the user to input a name and a phone number.
- Stores the contact in a file named Phonebook.txt.
View Contacts:
- Reads and displays all the contacts stored in Phonebook.txt.
Delete Contacts:
- Removes a contact based on the name entered by the user.
- Creates a temporary file to filter out the deleted contact, then replaces the original file.

Key Learnings from This Exercise

File Handling in C:
- Using fopen, fclose, and file manipulation functions.
- Handling errors when files cannot be opened or accessed.
Working with Strings:
- Using functions like strcmp and sscanf for string comparisons and parsing.
Basic Data Management:
- Storing and organizing data in a simple text file.
- Replacing or updating file contents by creating temporary files.

How to Test the Code

Copy the code into a .c file and compile it with a C compiler (e.g., gcc):

   gcc -o phonebook phonebook.c

Run the compiled program:

   ./phonebook

Follow the on-screen instructions to add, view, or delete contacts.
Open Phonebook.txt to verify that the data is being stored as expected.

Potential Enhancements

This program is a great starting point, but here are a few improvements you can try:

Input Validation:
- Ensure phone numbers are valid (e.g., only numeric characters).
- Prevent duplicate names in the phonebook.
Improved User Interface:
- Provide more detailed instructions.
- Allow multi-word names using fgets instead of scanf.
Enhanced File Handling:
- Encrypt data for security.
- Use a structured format (e.g., CSV or JSON).
Advanced Features:
- Implement a search functionality to find contacts quickly.
- Sort the phonebook alphabetically.

Final Thoughts

This exercise helped me strengthen my understanding of file handling and basic data management in C. It’s a simple yet practical program that can serve as a foundation for more complex projects. If you’re new to C, give it a try—it’s a fun and rewarding way to practice programming!

C language from 0

Davide — Tue, 21 Jan 2025 01:18:41 +0000

Learning C can seem intimidating at first, but with the right approach, you can master its basics and become proficient in no time. This guide introduces you to the fundamental concepts of C, guiding you step-by-step from the basics to more advanced topics.

Basics of C and Data Types
User Input
Conditional Shortcuts
Switch Statements
Arrays in C
Nested Loops
Functions in C
Structs
Pointers

Basics of C and Data Types

C programs follow a standard structure and use various data types for variables. A basic program looks like this:

#include <stdio.h>

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

Key Concepts:

Data types:
- int: Integer numbers (e.g., int x = 10;).
- float and double: Floating-point numbers for decimals (e.g., float pi = 3.14;).
- char: Single characters or ASCII codes (e.g., char letter = 'A';).
- bool: Boolean values (true or false) if you include <stdbool.h>.

// Data Types:
int a = 40; // Integer (4 bytes)
short int b = 32767; // Short Integer (2 bytes, range: -32,768 to 32,767)
unsigned int c = 4294967295; // Unsigned Integer (4 bytes, range: 0 to 4,294,967,295)
float d = 9.81; // Float (4 bytes, 6-7 digits precision, format: %f)
double e = 3.141592653589793; // Double (8 bytes, 15-16 digits precision, format: %lf)
bool f = true; // Boolean (1 byte, True/False, format: %d where 1=true and 0=false)
char g = 'e'; // Character (1 byte, can be used for character or number)
char h = 100; // Character (1 byte, format: %d for number or %c for ASCII, range: -128 to 127)
char name[] = "Example"; // String

// Variable declaration and initialization
int age; // Declaration
age = 5; // Initialization
char language = 'C'; // Declaration and Initialization

// Displaying variables
printf("You are %d years old", age); // For integers
printf("Hello %s", name); // For strings
printf("You are now learning %c", language); // For characters

// Format specifiers: %d -> int, %s -> String, %c -> Char, %f -> Float, %.(numberOfDecimals)f -> Float with specified decimal places

Operators:

/*
+ = (Addition)
- = (Subtraction)
* = (Multiplication)
/ = (Division)
% = (Modulus)
++ = (Increment by one)
-- = (Decrement by one)
*/

//The result needs to be stored in a variable that have the type of the result

//Change data type:
int x = 5;
int y = 2;

float z = 5/2 = //Wrong result bc x and y are INT so we can modify the type

float z = 5 / (float)2 = 2.5 //Correct way

//To increment a single variable:
int x = 4

x += 2 // x = 6
x -= 2 // x = 2
x *= 2 // x = 8
x /= 2 // x = 2

User Input

If you are using VS Code, you need to switch from the Output tab to the Terminal tab to run the program, because the terminal accepts user input.

int age;
char name[25];

// USER INPUT INT:
printf("How old are you? \n"); // Display "How old are you?"
scanf("%d", &age); // Specify the data type and the variable name
printf("You are %d years old", age);

// USER INPUT STRING (ARRAY OF CHAR):
printf("What's your name?");
scanf("%s", name);
printf("Hi %s, how are you?", name);

/*
scanf() doesn't read whitespace, so if you need to insert name and surname, you can use the fgets function:
Structure:
fgets(variable name, size, stdin)
*/

fgets(name, 25, stdin); // fgets also includes '\n' at the end

C is case sensitive
If we need an uppercase value, we can modify the user input to get the correct value. For example:

#include <ctype.h>

// We ask the user to input uppercase F or uppercase C
char unit;

printf("Is the temperature in (F) or (C)?");
scanf(" %c", &unit); // Note the space before %c to consume any leading whitespace

// To modify the user input:
unit = toupper(unit);

// Now, even if the user inputs lowercase c or f, we save the uppercase value in unit

if(unit == 'C'){
    printf("The temperature is currently in Celsius.");
}
else if (unit == 'F'){
    printf("The temperature is currently in Fahrenheit.");
}
else{
    printf("%c isn't a correct value", unit);
}

Conditional Shortcuts

C provides a shorthand for if-else conditions using the ternary operator:

int max = (a > b) ? a : b;

This is equivalent to:

if (a > b) {
    max = a;
} else {
    max = b;
}

It’s a clean and efficient way to write simple conditional logic.

Switch Statements

The switch statement allows you to handle multiple possible values for a variable:

char grade = 'A'; // Declare a variable 'grade' and initialize it with the value 'A'

switch (grade) { // Start a switch statement to check the value of 'grade'
    case 'A': // If 'grade' is 'A'
        printf("Excellent!\n"); // Print "Excellent!"
        break; // Exit the switch statement
    case 'B': // If 'grade' is 'B'
        printf("Good job!\n"); // Print "Good job!"
        break; // Exit the switch statement
    default: // If 'grade' is not 'A' or 'B'
        printf("Better luck next time.\n"); // Print "Better luck next time."
}

Always include a default case to handle unexpected values.

Arrays in C

An array is a collection of variables of the same type stored sequentially in memory. For example:

int numbers[5] = {10, 20, 30, 40, 50};

Key Concepts:

Accessing elements: Use the index of the array, starting from 0:

  printf("%d", numbers[0]); // Prints 10

2D Arrays: These are like matrices or grids:

  int matrix[2][3] = { // Declare a 2D array named 'matrix' with 2 rows and 3 columns
    {1, 2, 3}, // Initialize the first row with values 1, 2, and 3
    {4, 5, 6}  // Initialize the second row with values 4, 5, and 6
};

Array of Strings: Arrays can store strings too:

  // Declare a 2D array named 'cars' with each string having a maximum length of 10 characters
  char cars[][10] = {"BMW", "Tesla", "Toyota"};

Arrays are widely used for handling lists of data, grids, or tables.

Nested Loops

Nested loops are loops inside other loops, often used for handling grids or repeated patterns:

for (int i = 0; i < 3; i++) {
    for (int j = 0; j < 3; j++) {
        printf("%d ", i * j);
    }
    printf("\n");
}

These are ideal for working with multi-dimensional arrays or creating complex outputs.

Functions in C

Functions allow you to reuse code. For example:

void greet() {
    // Define a function named 'greet' that takes no arguments and returns no value
    // A function can store multiple lines of code to perform a series of actions
    printf("Hello, World!\n"); // Print "Hello, World!" followed by a newline character
    printf("Welcome to learning C programming.\n"); // Print another message followed by a newline character
    printf("Let's start coding!\n"); // Print another message followed by a newline character
}

int main() {
    greet(); // Call the 'greet' function to execute its code
    return 0; // Return 0 to indicate that the program ended successfully
}

Functions can accept arguments to make them more flexible:

void greet(char name[]) {
    printf("Hello, %s!\n", name);
}

int main() {
    greet("Alice");
    return 0;
}

Using functions helps keep your code organized and reusable.

Structs

Structures (struct) group related variables under a single name:

// Define a structure named 'Player' with two members
struct Player {
    char name[50]; // A character array 'name' to store the player's name (maximum 50 characters)
    int score; // An integer 'score' to store the player's score
};

// Create an instance of the 'Player' structure and initialize it
struct Player player1 = {"Alice", 100}; // Initialize 'player1' with name "Alice" and score 100

// Print the player's name and score
printf("Name: %s, Score: %d", player1.name, player1.score); // Output: Name: Alice, Score: 100

They are often used for creating complex data models, like records or objects.

Pointers

Pointers are variables that store memory addresses, allowing for efficient data handling:

int value = 42; // Declare an integer variable 'value' and initialize it with 42
int *ptr = &value; // Declare a pointer variable 'ptr' and initialize it with the address of 'value'
printf("Value: %d, Address: %p", *ptr, ptr); // Print the value pointed to by 'ptr' and the address stored in 'ptr'

// Explanation:
// - 'value' is an integer variable storing the value 42.
// - 'ptr' is a pointer to an integer, and it stores the address of the 'value' variable.
// - '*ptr' dereferences the pointer 'ptr' to get the value stored at the address it points to, which is 42.
// - 'ptr' itself contains the memory address where 'value' is stored.
// - The printf statement prints the dereferenced value (42) and the memory address of 'value'.

Pointers are essential for dynamic memory allocation and low-level operations in C.

I'm learning C and have gathered useful information. Mastering these concepts will give you a solid foundation in C programming. Use this guide as a reference, practice regularly, and you'll quickly go from beginner to expert in C. Happy coding!

Vim on VSCode: Boost Your Productivity

Davide — Sun, 19 Jan 2025 21:02:39 +0000

If you want to speed up and enhance your programming experience on VSCode, one of the best choices is integrating Vim, a powerful and feature-rich text editor. Vim allows you to boost significantly your productivity.

Installing Vim on VSCode
1. Open VSCode
2. Go to the Extensions section
3. Search for “Vim” and select vscodevim
4. Click Install

Once the extension is installed, we’re ready to start using Vim! However, before diving in, we need to configure a few settings to ensure the keyboard shortcuts work correctly on all operating systems.

Configuring Keyboard Shortcuts

For Windows:

To set up your keyboard shortcuts, check the GitHub pages:
• useCtrlKeys
• handleKeys

You’ll find all the settings to customize Vim to your liking.

For Mac:

On macOS, the configuration is simpler.
Open the terminal and enter one of the following commands based on your VSCode version:

//For VSCode:
defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false

//For VSCode Insider:
defaults write com.microsoft.VSCodeInsiders ApplePressAndHoldEnabled -bool false

//For VS Codium:
defaults write com.vscodium ApplePressAndHoldEnabled -bool false

//For VS Codium Exploration:
defaults write com.microsoft.VSCodeExploration ApplePressAndHoldEnabled -bool false

//To reset global defaults:
defaults delete -g ApplePressAndHoldEnabled

Vim Keyboard Shortcuts

Once everything is set up, it’s time to learn the most useful Vim shortcuts that will help you navigate code, write, and edit more efficiently.

Movement in the Document:

• h =  Move cursor left
• j =  Move cursor down
• k =  Move cursor up
• l =  Move cursor right

Text Insertion:

• i = Enter insert mode to the left of the cursor
• I = Enter insert mode at the beginning of the line
• a = Enter insert mode to the right of the cursor
• A = Enter insert mode at the end of the line

Text Modification:

• x = Delete the character to the right of the cursor (equivalent to “Delete”)
• r = Replace the character under the cursor with another (Replace mode)

Conclusion

With Vim on VSCode, you can make your coding experience much smoother and faster. Be sure to configure the keyboard shortcuts correctly to make everything even more efficient and intuitive. With these basics, you’re ready to start using Vim like a pro!

Happy coding! 🚀

DEV Community: Davide

⏱️ Creating a Simple Timer App with JavaScript

🔗 Introduction

🔢 Project Overview

📄 HTML Structure

📝 JavaScript Logic

🎨 Styling with CSS

🚀 Final Thoughts

🔍 What You Learned:

From Basics to Intermediate: My Journey Learning JavaScript ✨

Table of Contents

1. Variables

2. Arrays

Adding and Removing Elements

Searching Arrays

3. Conditional Statements

Comparison Operators

4. Functions

Parameters and Arguments

5. Objects

Methods in Objects

6. The DOM

Selecting Elements

Updating Elements

7. Events

8. Integrating HTML and JS

How to Customize Your GitHub Profile Like a Pro! 🚀

Step 1: Set Up Your Custom GitHub Profile

Step 2: Use Tools to Elevate Your Profile

1. GitHub Profile README Generator 🛠️

2. GitHub Stats 📊

3. Markdown Badges 🎖️

4. YouTube Cards 🎥

Why Customize Your GitHub Profile?

Ready to Get Started? 🎉

Learning C: Building an Inventory Management System 🚀

Features of My Inventory Management System 🗂️

1. Add Products 🛒

2. View Inventory 📜

3. Modify Quantities ✏️

4. Split by Category 🗃️

The Code 🖥️

Lessons Learned 📚

Try It Out! 💻

Have you built something similar or have ideas to enhance this project? Drop your thoughts in the comments! 💬

Practicing C: Building a Simple Phonebook Application

Code Walkthrough

Features of the Program

Key Learnings from This Exercise

How to Test the Code

Potential Enhancements

Final Thoughts

C language from 0

Table of Contents

Basics of C and Data Types

Key Concepts:

User Input

Conditional Shortcuts

Switch Statements

Arrays in C

Key Concepts:

Nested Loops

Functions in C

Structs

Pointers

Vim on VSCode: Boost Your Productivity