devjourney

Practice Javascript

JavaScript Exercises for Skill Development

Practicing JavaScript is essential for honing your programming skills and becoming a proficient developer. In this article, we'll provide a series of JavaScript exercises designed to cover a wide range of topics, from basic concepts to more advanced techniques. Feel free to use an online code editor or your local development environment to work through these exercises.

I. Exercices #

1. Basic Syntax and Variables #

Exercise 1.1 #

Write a JavaScript program to display your name in the console.

// simple log statement to output your name ( just one line )

Exercise 1.2 #

Create two variables, x and y, and swap their values without using a temporary variable.

let x = 5; let y = 10; 
// Swap x and y here console.log("x:", x, "y:", y);

2. Control Structures #

Exercise 2.1 #

Write a JavaScript program to find the largest of three numbers.

let num1 = 5; let num2 = 10; let num3 = 3; 
// Find the largest number here 
console.log("The largest number is:", largestNumber);

Exercise 2.2 #

Create a loop to print the first 10 even numbers.

for (...) {
  console.log(i); 
}

3. Functions #

Exercise 3.1 #

Write a function that accepts a temperature in Celsius and converts it to Fahrenheit using the formula: Fahrenheit = (Celsius * 9/5) + 32.

function celsiusToFahrenheit(celsius) { 
  // Your code here return fahrenheit;
}


console.log("20°C is equal to", celsiusToFahrenheit(20), "°F");

Exercise 3.2 #

Create a function that calculates the factorial of a given number.

function factorial(n) { 
  // Your code here return result; 
} 

console.log("Factorial of 5 is", factorial(5));

4. Arrays and Objects #

Exercise 4.1 #

Given an array of numbers, find the sum of all positive numbers in the array.

const numbers = [1, -2, 3, -4, 5, -6, 7, -8]; 
// Calculate the sum of positive numbers here 

console.log("The sum of positive numbers is:", sum);

Exercise 4.2 #

Create an object representing a book and display its properties.

5. DOM Manipulation and Events #

Exercise 5.1 #

Create an HTML button element and use JavaScript to change the text of the button when it is clicked.

// html element 
<button id="myButton">Click me</button> 

// javascript code

const button = document.getElementById("myButton"); 

button.addEventListener("click", function() {
  // Change the text of the button here 
  });

Exercise 5.2 #

Build a simple to-do list. Allow users to add new tasks, mark tasks as completed, and remove tasks.

<input type="text" id="taskInput" placeholder="New task"> 
<button id="addTask">Add Task</button>
<ul id="taskList"></ul> 


// Your JavaScript code for the to-do list

These exercises are designed to cover a wide range of JavaScript topics and help you reinforce your skills. Practice is key to becoming proficient in JavaScript, so don't hesitate to tackle more complex exercises and explore real-world projects to further enhance your programming abilities.

II. Exercices Solutions #

Nice Done! Here are the solutions for the JavaScript exercises provided in the previous article, along with their exercise numbers:

1. Basic Syntax and Variables #

Exercise 1.1 #

console.log("Your Name");

Exercise 1.2 #

let x = 5; let y = 10; x = x + y; y = x - y; x = x - y; console.log("x:", x, "y:", y);

2. Control Structures #

Exercise 2.1 #

let num1 = 5;
let num2 = 10;
let num3 = 3;
let largestNumber = Math.max(num1, num2, num3);

console.log("The largest number is:", largestNumber);

Exercise 2.2 #

for (let i = 2; i <= 20; i += 2) {
  console.log(i); 
}

3. Functions #

Exercise 3.1 #

function celsiusToFahrenheit(celsius) {
  const fahrenheit = (celsius * 9/5) + 32; return fahrenheit; 
} 

console.log("20°C is equal to", celsiusToFahrenheit(20), "°F");

Exercise 3.2 #

function factorial(n) {
  if (n === 0) { return 1; }
  return n * factorial(n - 1);
}

console.log("Factorial of 5 is", factorial(5));

4. Arrays and Objects #

Exercise 4.1 #

const numbers = [1, -2, 3, -4, 5, -6, 7, -8];
// this is an advanced way to solve this problem using array.reduce()
const sum = numbers.reduce((accumulator, currentValue) => {
      if (currentValue > 0) {
        return accumulator + currentValue;
      } 
      return accumulator;
    }, 0);
    
console.log("The sum of positive numbers is:", sum);

Exercise 4.2 #

const book = { 
  title: "The Catcher in the Rye", 
  author: "J.D. Salinger",
  year: 1951 
};

// Display the book properties 

console.log("Title:", book.title); 
console.log("Author:", book.author); 
console.log("Year:", book.year);

5. DOM Manipulation and Events #

Exercise 5.1 #

//js code 
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
  button.textContent = "Button Clicked!"; 
  
});

Exercise 5.2 #

const taskInput = document.getElementById("taskInput");
const addTaskButton = document.getElementById("addTask");
const taskList = document.getElementById("taskList");

addTaskButton.addEventListener("click", function() {
  const taskText = taskInput.value; 
  if (taskText) {
    const li = document.createElement("li");
    li.textContent = taskText;
    
    li.addEventListener("click", function() {
      li.classList.toggle("completed");
    });
    
    taskList.appendChild(li);
    taskInput.value = "";
  } 
});

These solutions provide the answers to the exercises, and they demonstrate the application of JavaScript concepts in various scenarios. Feel free to adapt and expand upon these solutions to further your understanding of JavaScript.