DEV Community: AHMED (ZOZ)

New comer to dev.to

AHMED (ZOZ) — Sun, 24 Nov 2024 21:05:51 +0000

Newcomer’s Journey into the World of Developer Blogs

As someone who is transitioning into the world of front-end development, I’ve been exploring various platforms to learn, share knowledge, and connect with like-minded individuals. That’s when I came across Dev.to — a community-driven platform dedicated to developers, where ideas, tutorials, and discussions flow freely. Being new to this space, I thought I’d share my experience of getting started on Dev.to and why I believe it’s such a valuable resource.

Why Dev.to?

Dev.to isn’t just another developer blog site. It’s a hub where developers from all skill levels share their experiences, thoughts, and knowledge on everything from JavaScript and React to AI and machine learning. After reading some blogs and tutorials on the platform, I realized this community was exactly what I needed to expand my skills.

What stood out to me was the open and welcoming nature of the platform. Dev.to encourages people to share not only their technical achievements but also their struggles and lessons learned. This makes it feel less intimidating, especially for someone like me who's still navigating the early stages of front-end development.

My First Post on Dev.to

As a newcomer, I found the process of creating and publishing my first blog post on Dev.to incredibly straightforward. The platform’s clean and user-friendly interface made it easy to draft my thoughts, format my post, and add relevant tags. I was also impressed by the built-in editor that supports markdown, which makes writing technical content feel seamless.

I decided to write about my journey learning React and Tailwind CSS. Sharing what I’ve learned so far and documenting my struggles felt like a great way to both consolidate my knowledge and engage with the community.

Engaging with the Community

One of the things I quickly noticed about Dev.to is the vibrant community. After posting my article, I was amazed by the responses I received. Not only did fellow developers leave thoughtful comments, but some even shared links to tutorials or resources that I hadn’t come across before. This feedback and support helped me grow as a developer and reinforced my belief in the importance of community in tech.

Learning from Others

Dev.to isn’t just a platform for writing — it’s a treasure trove of learning resources. The sheer volume of blogs, tutorials, and projects shared by developers around the world is incredible. Whether you’re interested in web development, AI, cloud computing, or game development, there’s something for everyone. The best part? It’s all free!

I’ve already bookmarked several blogs that provide valuable insights into topics like React hooks, JavaScript best practices, and web performance optimization. As I continue my journey, I know I’ll be revisiting these posts to deepen my understanding.

Why I Recommend Dev.to for New Developers

If you're new to programming or just starting to learn a new technology, I highly recommend joining Dev.to. Here’s why:

Welcoming Community: You’ll find that developers are friendly, and everyone is eager to help others improve.

Easy to Share: Writing a blog post is simple, and the editor is intuitive.

Free Resources: There’s a ton of high-quality content available on various development topics.

Networking: It’s a great place to build connections with other developers, from beginners to experts.

Looking Forward

I’m excited to be a part of the Dev.to community. My goal is to continue posting about my development journey, sharing my progress with React and TypeScript, and learning from others. I hope that in a few months, I can contribute more advanced tutorials and insights that will help other newcomers like myself.

As I continue to develop my skills, I know that Dev.to will remain an invaluable resource for learning, sharing, and growing as a developer. If you're new here, or if you're thinking about joining, I highly encourage you to dive in. You never know what you might learn or who you might meet along the way.

My first Weather app

AHMED (ZOZ) — Sun, 24 Nov 2024 16:36:32 +0000

Building a Simple Weather App with API Integration

As I continue learning and improving my coding skills, I decided to build a basic weather app using an API to get real-time data. This project helped me understand how to interact with APIs, handle asynchronous operations, and dynamically update the user interface. In this blog, I will walk you through the code I used to create the app.

Project Overview

The weather app fetches weather data for a given location and displays the current weather and a 3-day forecast. It uses the WeatherAPI to gather data, and JavaScript handles the functionality.

Key Features

Location Search: Users can input a city name to get weather data.
Current Weather: Display the current temperature, weather conditions, and more.
Forecast: Show weather forecasts for the next 3 days.

Let's take a look at the key parts of the code that make this app work.

Fetching Weather Data Using an API

The first step is to fetch the weather data from the WeatherAPI. Here's how I set up the function to handle the API call:

async function searchWeather(term) {
    var response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=7d77b96c972b4d119a3151101212704&q=${term}&days=3`);
    if (response.ok && response.status !== 400) {
        let weatherData = await response.json();
        displayCurrent(weatherData.location, weatherData.current);
        displayForecast(weatherData.forecast.forecastday);
    }
}

This function uses fetch() to make an asynchronous request to the WeatherAPI. It retrieves the current weather and a 3-day forecast, and then passes that data to the displayCurrent() and displayForecast() functions.

Handling User Input

The app listens for user input via the search box. When the user types in a location (e.g., "London"), it triggers the weather search:

document.getElementById('search').addEventListener('keyup', function (event) {
    searchWeather(event.target.value);
});

In addition, I added a button to trigger the search when clicked:

document.getElementById('searchBtn').addEventListener('click', function() {
    let searchTerm = document.getElementById('search').value;
    searchWeather(searchTerm);
});

This allows the user to either type in the search box or click the search button to fetch weather data.

Displaying Current Weather

Once the data is fetched, the displayCurrent() function is responsible for showing the current weather details on the page. Here's how it works:

function displayCurrent(location, currentWeather) {
    if (currentWeather) {
        let lastUpdatedDate = new Date(currentWeather.last_updated);
        let cardHTML = `
            <div id="todayCard">
                <div class="card">
                    <div class="card-header d-flex justify-content-between px-4 text-grey">
                        <span>${days[lastUpdatedDate.getDay()]}</span>
                        <span>${lastUpdatedDate.getDate()} ${monthNames[lastUpdatedDate.getMonth()]}</span>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title location">${location.name}</h5>
                        <div class="degree">
                            <div class="num px-2">${currentWeather.temp_c}<sup>o</sup>C</div>
                            <div class="forecast-ico">
                                <img src="https:${currentWeather.condition.icon}" alt="" width="90px">
                            </div>
                        </div>
                        <div class="current-info d-flex">
                            <span><i class="fa-solid fa-umbrella"> </i> 20%</span>
                            <span><i class="fa-solid fa-wind"></i> ${currentWeather.gust_kph} Km/h</span>
                            <span><i class="fa-regular fa-compass"></i>West</span>
                        </div>
                    </div>
                </div>
            </div>
        `;
        document.getElementById('day').innerHTML = cardHTML;
    }
}

This function generates a card displaying the current temperature, weather condition, and additional details like wind speed and humidity. It dynamically updates the page by inserting the generated HTML into the DOM.

Displaying the 3-Day Forecast

Next, I display the weather forecast for the next three days. This is handled by the displayForecast() function:

function displayForecast(forecastData) {
    let forecastHTML = '';
    for (let i = 1; i < forecastData.length; i++) {
        forecastHTML += `
            <div class="col-lg-6 p-0">
                <div class="text-center forecastCard">
                    <div class="card w-100">
                        <div class="card-header d-flex justify-content-center px-4 text-grey">
                            <span>${days[new Date(forecastData[i].date).getDay()]}</span>
                        </div>
                        <div class="card-body d-flex flex-column align-items-center justify-content-center">
                            <div class="degree">
                                <div>
                                    <div class="forecast-ico">
                                        <img src="${forecastData[i].day.condition.icon}" alt="">
                                    </div>
                                    <h1>${forecastData[i].day.maxtemp_c}<sup>o</sup>C</h1>
                                    <h4 class="text-muted">${forecastData[i].day.mintemp_c}<sup>o</sup></h4>
                                </div>
                            </div>
                            <div class="custom text-primary">${forecastData[i].day.condition.text}</div>  
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    document.getElementById('next').innerHTML = forecastHTML;
}

This function loops over the forecast data and generates cards for each of the next two days, showing the max and min temperatures, weather conditions, and icons.

Conclusion

Building this weather app was a great exercise for me as I learned how to interact with APIs, process JSON data, and dynamically update a webpage. The project helped me solidify my knowledge of asynchronous JavaScript, DOM manipulation, and event handling.

If you're just starting with JavaScript and APIs, this weather app is a simple yet powerful way to practice your skills. You can extend this project by adding more features like error handling, more detailed forecasts, or even a dark mode for the UI.

Feel free to try out the code and tweak it to fit your needs. Let me know if you have any questions or suggestions!

Bookmarker

AHMED (ZOZ) — Sun, 24 Nov 2024 16:25:41 +0000

Building a Bookmark Management System: Practicing JavaScript and Local Storage

As I continue my front-end development journey, I realized the need to practice advanced JavaScript concepts and create functional projects to solidify my skills. To do so, I built a Bookmark Management System using HTML, CSS, Bootstrap, and JavaScript. The project leverages Local Storage for data persistence and includes features such as adding, updating, deleting, and searching bookmarks.

This project not only helped me improve my JavaScript skills but also gave me insights into creating user-friendly interfaces and managing client-side data effectively.

Features of the Bookmark Management System

Add Bookmarks: Save bookmarks with a name and URL.
Search Bookmarks: Quickly find bookmarks by name.
Update Bookmarks: Edit existing bookmark details.
Delete Bookmarks: Remove bookmarks permanently.
Data Persistence: Bookmarks are stored in the browser's Local Storage, ensuring they remain available even after the page is refreshed.
Validation: Input validation ensures that only valid bookmark names and URLs are accepted.

Key JavaScript Snippets and Concepts

Saving Bookmarks to Local Storage

let bookmarksContainer = [];
if (localStorage.getItem('book')) {
    bookmarksContainer = JSON.parse(localStorage.getItem('book'));
    display();
}

addbtn.addEventListener('click', function() {
    if (bookName.classList.contains('is-valid') && bookUrl.classList.contains('is-valid')) {
        let bookmark = {
            name: bookName.value,
            url: bookUrl.value
        };
        bookmarksContainer.push(bookmark);
        localStorage.setItem('book', JSON.stringify(bookmarksContainer));
        clearInput();
        display();
    } else {
        errorBox.classList.remove('d-none');
    }
});

This code initializes the bookmark container and ensures that bookmarks saved in Local Storage are loaded when the page is refreshed.

Displaying Bookmarks

function display() {
    let row = '';
    for (let i = 0; i < bookmarksContainer.length; i++) {
        let httpURL = 'https://' + bookmarksContainer[i].url;
        row += `
            <tr>
                <td>${i + 1}</td>
                <td>${bookmarksContainer[i].name}</td>
                <td><a href="${httpURL}" class="btn btn-success">Visit</a></td>
                <td><button onclick="deleteItem(${i})" class="btn btn-danger">Delete</button></td>
                <td><button onclick="setFormForUpdate(${i})" class="btn btn-warning">Update</button></td>
            </tr>
        `;
    }
    document.getElementById('tableOfContent').innerHTML = row;
}

The display function dynamically renders the bookmarks in a table, making it easy for users to manage their saved links.

Deleting Bookmarks

function deleteItem(index) {
    bookmarksContainer.splice(index, 1);
    display();
    localStorage.setItem('book', JSON.stringify(bookmarksContainer));
}

This function removes the selected bookmark and updates Local Storage to ensure data consistency.

Input Validation

function

validateInput(element) {
    const regex = {
        bookmarkName: /^([A-Z]|[a-z]|[0-9]){3,}$/,
        URL: /^(https?:\/\/)?(w{3}\.)?\w+\.\w{2,}\/?(:\d{2,5})?(\/\w+)*$/
    };
    if (regex[element.id].test(element.value)) {
        element.classList.add('is-valid');
        element.classList.remove('is-invalid');
        return true;
    } else {
        element.classList.add('is-invalid');
        element.classList.remove('is-valid');
        return false;
    }
}

This validation ensures that users enter meaningful names and properly formatted URLs.

Updating Bookmarks

function setFormForUpdate(i) {
    updatedIndex = i;
    addbtn.classList.add('d-none');
    updatebtn.classList.remove('d-none');
    bookName.value = bookmarksContainer[i].name;
    bookUrl.value = bookmarksContainer[i].url;
}

function update() {
    bookmarksContainer[updatedIndex].name = bookName.value;
    bookmarksContainer[updatedIndex].url = bookUrl.value;
    display();
    localStorage.setItem('book', JSON.stringify(bookmarksContainer));
    clearInput();
    addbtn.classList.remove('d-none');
    updatebtn.classList.add('d-none');
}

The update functionality lets users modify existing bookmarks and save the changes seamlessly.

Lessons Learned

Data Management: Storing and retrieving data from Local Storage taught me the importance of client-side storage.
Dynamic DOM Manipulation: Creating, updating, and deleting DOM elements dynamically improved my JavaScript skills.
Input Validation: Ensuring only valid inputs are accepted made the application more robust.
User Experience: Adding error handling and form validation improved the overall usability of the project.

Future Enhancements

Implement category-based organization for bookmarks.

Add drag-and-drop functionality for sorting bookmarks.

Use external APIs to fetch website metadata for better bookmark previews.

This project was a fun and challenging way to deepen my understanding of JavaScript and enhance my skills in building interactive, user-focused web applications. If you're on a similar journey, I encourage you to build and experiment with projects like this to grow your skills.

Smart login system

AHMED (ZOZ) — Sun, 24 Nov 2024 15:45:30 +0000

Building a Simple Login System Using HTML, CSS, Bootstrap, and JavaScript

Starting my journey as a front-end developer has been both challenging and rewarding. One of my first projects was creating a basic login system. While simple in concept, it allowed me to apply fundamental concepts of front-end development and learn how to store user data using browser local storage.

Here's how I approached this project:

Objective

The goal was to build a basic login system where:

Users can sign up by entering their credentials.
Credentials are saved locally in the browser using local storage.
Users can log in by verifying their saved credentials.

Tools and Technologies Used

HTML: To structure the web page.

CSS: For styling and layout customization.

Bootstrap: To make the design responsive and visually appealing.

JavaScript: For interactivity, validation, and local storage integration.

Features

Sign-Up Form: Captures the user's name, email, and password.

Error Handling: Alerts users if their login fails or their email is not registered.

Responsive Design: Ensures a seamless experience across all devices.

How It Works

Sign-Up Process

The user fills out the registration form.

JavaScript validates the input to ensure all fields are filled correctly.

The data is stored securely in the browser's local storage as a JSON object.

The user enters their email and password.

JavaScript checks if the provided credentials match the stored data in local storage.

If the credentials are correct, the user is redirected to a dashboard or shown a success message.

Error Handling

If the email doesn't exist, the user is prompted to sign up.

If the password is incorrect, an error message is displayed.

Code Overview

HTML (Structure)

<div class="container mt-5">
  <h2 class="text-center">Login System</h2>
  <div class="row justify-content-center">
    <div class="col-md-6">
      <!-- Sign-Up Form -->
      <div id="signup-form">
        <h4>Sign Up</h4>
        <input type="text" id="name" class="form-control mb-2" placeholder="Name" />
        <input type="email" id="email" class="form-control mb-2" placeholder="Email" />
        <input type="password" id="password" class="form-control mb-2" placeholder="Password" />
        <button class="btn btn-primary w-100" onclick="signup()">Sign Up</button>
      </div>

      <!-- Login Form -->
      <div id="login-form" class="d-none">
        <h4>Login</h4>
        <input type="email" id="login-email" class="form-control mb-2" placeholder="Email" />
        <input type="password" id="login-password" class="form-control mb-2" placeholder="Password" />
        <button class="btn btn-success w-100" onclick="login()">Login</button>
      </div>
    </div>
  </div>
</div>

CSS (Styling with Bootstrap)

I used Bootstrap for a responsive layout, ensuring the system works well on all devices. Minor custom CSS was added to fine-tune padding and margins.

JavaScript (Functionality)

// Sign-Up Function
function signup() {
  const name = document.getElementById("name").value;
  const email = document.getElementById("email").value;
  const password = document.getElementById("password").value;

  if (name && email && password) {
    const user = { name, email, password };
    localStorage.setItem(email, JSON.stringify(user));
    alert("Sign up successful! Please login.");
    document.getElementById("signup-form").classList.add("d-none");
    document.getElementById("login-form").classList.remove("d-none");
  } else {
    alert("Please fill out all fields.");
  }
}

// Login Function
function login() {
  const email = document.getElementById("login-email").value;
  const password = document.getElementById("login-password").value;
  const storedUser = JSON.parse(localStorage.getItem(email));

  if (storedUser) {
    if (storedUser.password === password) {
      alert(`Welcome back, ${storedUser.name}!`);
    } else {
      alert("Incorrect password.");
    }
  } else {
    alert("Email not registered. Please sign up first.");
  }
}

Challenges and Learnings

Local Storage:
Understanding how to save, retrieve, and parse data in local storage was a key takeaway.
Form Validation:
I learned how to use JavaScript to validate user inputs and provide real-time feedback.
Responsive Design:
Using Bootstrap helped me create a clean, responsive UI without spending too much time on styling.

Future Improvements

This is just the beginning. In the future, I plan to:

Add password encryption for better security.

Implement session storage for managing logged-in states.

Replace local storage with a backend database for scalability.

Add a "Forgot Password" feature for better usability.

Conclusion

This project was a great learning experience and a significant milestone in my journey as a front-end developer. By building this login system, I solidified my understanding of HTML, CSS, Bootstrap, and JavaScript. It's simple yet functional and serves as a strong foundation for more advanced projects in the future.

Feel free to try it out and share your feedback!