How to Wrap Up the SheCodes JavaScript Basics Workshop

JavaScript
Written by Rick Bowen (JavaScript)

Today marks the culmination of my journey through the SheCodes Basics JavaScript Workshop! It’s been an enriching experience diving into JavaScript concepts, working with selectors, handling events, and mastering the art of refactoring code.

I’ll share my key takeaways, the skills I sharpened, and an exciting interactive feature I built using the powerful addEventListener method.

Learn JavaScript?

JavaScript is the backbone of interactive web development. While HTML provides structure and CSS handles styling, JavaScript brings a website to life. My goal was to learn how to:

  1. Select elements dynamically using JavaScript.
  2. Handle events like clicks, hovers, and keyboard inputs.
  3. Write cleaner, reusable code through refactoring techniques.

Through this workshop, I aimed to go beyond the basics and gain confidence in crafting engaging user experiences.

Building an Interactive Color Changer

As part of the practice, I built an interactive color changer. The idea was simple:

  1. Create a button that, when clicked, changes the background color of the page.
  2. Add an input field where users can type a color name (like “red” or “blue”) to set the background dynamically.
  3. Ensure the code is clean and modular by leveraging refactoring techniques.

Setting Up the HTML

The HTML structure is straightforward, with a button and an input field wrapped in a container.

code<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Color Changer</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Interactive Color Changer</h1>
    <input id="colorInput" type="text" placeholder="Enter a color (e.g., red)">
    <button id="changeColorBtn">Change Background</button>
  </div>

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

Adding Styles with CSS

I kept the design minimalistic, focusing on functionality.

code/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f4f4f4;
  color: #333;
  padding: 50px;
}

.container {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

input, button {
  margin: 10px 0;
  padding: 10px;
  font-size: 16px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

Adding Interactivity with JavaScript

Here’s where the magic happens. Using JavaScript, I:

  • Selected the button and input field using DOM selectors.
  • Added an event listener to the button to listen for clicks.
  • Updated the background color dynamically based on user input.

JavaScript Code:

code// Select the button and input field
const changeColorBtn = document.getElementById("changeColorBtn");
const colorInput = document.getElementById("colorInput");

// Add an event listener to the button
changeColorBtn.addEventListener("click", () => {
  // Get the value from the input field
  const color = colorInput.value.trim();

  // Check if the input is not empty
  if (color) {
    // Change the background color
    document.body.style.backgroundColor = color;

    // Clear the input field for a better UX
    colorInput.value = "";
  } else {
    // Alert the user if no color is entered
    alert("Please enter a valid color.");
  }
});

Writing Cleaner Code

Initially, my code was functional but not very modular. Refactoring helped me organize the logic better. Here’s how I improved it:

  1. Encapsulated functionality into a separate function, changeBackgroundColor.
  2. Added comments to improve readability.
  3. Reduced redundancy by using early returns.

Refactored Code:

code// Function to change the background color
function changeBackgroundColor() {
  const color = colorInput.value.trim();

  if (!color) {
    alert("Please enter a valid color.");
    return; // Exit early if no input
  }

  document.body.style.backgroundColor = color;
  colorInput.value = ""; // Clear the input field
}

// Attach the function to the button's click event
changeColorBtn.addEventListener("click", changeBackgroundColor);

Lessons Learned

  1. DOM Selectors Are Key: I learned how to effectively use methods like getElementById and querySelector.
  2. Event Listeners = Interactivity: addEventListener is a game-changer for building dynamic user experiences.
  3. Refactoring Is Powerful: Cleaner, modular code makes projects easier to understand and maintain.

Future Enhancements

While the project is simple, there’s always room to grow. Here are some ideas for improvement:

  1. Validation: Add stricter checks to ensure the entered color is valid (e.g., using regex or predefined color names).
  2. Random Colors: Add a button to generate random background colors.
  3. Save Preferences: Store the user’s favorite colors in localStorage to persist settings.

Conclusion

Wrapping up the SheCodes Basics JavaScript Workshop has been a fulfilling experience. This small project not only solidified my understanding of selectors, events, and refactoring but also demonstrated how a few lines of JavaScript can significantly enhance user interaction.

Related blog posts

Load more
Know More About FSIBLOG
Useful Pages

2024 © FSIBLOG. All Rights Reserved.