w3resource

Sunday’s Coding Challenges & Projects

Frontend Mini Project Challenge

Task: Build a Dark Mode Toggle

Tech Stack: HTML, CSS, JavaScript

  • Toggle between light mode & dark mode
  • Save user preference in localStorage
  • Use CSS transitions for a smooth effect

Backend Challenge

Task: Build a URL Shortener

Tech Stack: Node.js + Express + MongoDB

Requirements:

  • Create an API that generates short URLs
  • Store long URLs in MongoDB
  • Redirect users when they access the short URL

Database Query Challenge

Problem: Find employees who have been with the company for more than 5 years but haven't received a salary increase in the last 2 years.

Sample table: employees 
+-------------+-------------+-------------+----------+--------------------+------------+------------+----------+----------------+------------+---------------+
| EMPLOYEE_ID | FIRST_NAME  | LAST_NAME   | EMAIL    | PHONE_NUMBER       | HIRE_DATE  | JOB_ID     | SALARY   | COMMISSION_PCT | MANAGER_ID | DEPARTMENT_ID |
+-------------+-------------+-------------+----------+--------------------+------------+------------+----------+----------------+------------+---------------+
|         100 | Steven      | King        | SKING    | 515.123.4567       | 2003-06-17 | AD_PRES    | 24000.00 |           0.00 |          0 |            90 |
|         101 | Neena       | Kochhar     | NKOCHHAR | 515.123.4568       | 2005-09-21 | AD_VP      | 17000.00 |           0.00 |        100 |            90 |
|         102 | Lex         | De Haan     | LDEHAAN  | 515.123.4569       | 2001-01-13 | AD_VP      | 17000.00 |           0.00 |        100 |            90 |
|         103 | Alexander   | Hunold      | AHUNOLD  | 590.423.4567       | 2006-01-03 | IT_PROG    |  9000.00 |           0.00 |        102 |            60 |
|         104 | Bruce       | Ernst       | BERNST   | 590.423.4568       | 2007-05-21 | IT_PROG    |  6000.00 |           0.00 |        103 |            60 |
|         105 | David       | Austin      | DAUSTIN  | 590.423.4569       | 2005-06-25 | IT_PROG    |  4800.00 |           0.00 |        103 |            60 |
|         106 | Valli       | Pataballa   | VPATABAL | 590.423.4560       | 2006-02-05 | IT_PROG    |  4800.00 |           0.00 |        103 |            60 |
|         107 | Diana       | Lorentz     | DLORENTZ | 590.423.5567       | 2007-02-07 | IT_PROG    |  4200.00 |           0.00 |        103 |            60 |
|         108 | Nancy       | Greenberg   | NGREENBE | 515.124.4569       | 2002-08-17 | FI_MGR     | 12008.00 |           0.00 |        101 |           100 |
|         109 | Daniel      | Faviet      | DFAVIET  | 515.124.4169       | 2002-08-16 | FI_ACCOUNT |  9000.00 |           0.00 |        108 |           100 |
.......

View the table



Data Structures & Algorithms Challenge

  • Easy: Find the first non-repeating character in a string.
  • Medium: Implement a min heap from scratch.
  • Hard: Find the maximum product of any three numbers in an array.

Daily Quiz Challenge

Frontend Quiz (3 Questions)

  1. What will be the output of the following JavaScript code?

    2. console.log(0 == '0');
    console.log(0 === '0');

    1. true true
    2. true false
    3. false true
    4. false false
  1. Which CSS property is used to create a flexible layout?
    1. display: grid;
    2. display: block;
    3. display: flex;
    4. display: inline;
  1. What is the correct way to emit an event in Vue.js from a child component to a parent?
    1. this.send('eventName')
    2. this.$emit('eventName')
    3. this.trigger('eventName')
    4. this.dispatch('eventName')

Backend Quiz

  1. Which of the following is not a valid HTTP method?
    1. GET
    2. FETCH
    3. POST
    4. DELETE
  1. In Node.js, which module is used to create an HTTP server?
    1. fs
    2. http
    3. express
    4. url
  1. What does the finally block do in Java?
    1. Executes only if an exception is thrown
    2. Executes regardless of whether an exception is thrown
    3. Catches exceptions
    4. None of the above

Other Topics Quiz

  1. Which of the following is not an ACID property in databases?
    1. Atomicity
    2. Consistency
    3. Durability
    4. Scalability
  1. In Linux, which command is used to display the current working directory?
    1. pwd
    2. ls
    3. cd
    4. mv

Bug of the Day

Buggy Python Code:


def multiply(x, lst=[]):
    lst.append(x)
    return lst
print(multiply(2))
print(multiply(3))
print(multiply(4))

Find and fix the issue!

  • Frontend (JavaScript):
    
let num = 5;
console.log("Square: " + num ** 2);
  • SQL:
    			
 SELECT * FROM employees WHERE salary > 50000 OR department = 'HR' AND department = 'IT';
  • Operating System:
    			
fork();
printf("Hello from parent process\n");
  • Miscellaneous (Bash):
    			
for i in {1..5}; do
echo "Iteration $i"
done
  • Python:
    
def multiply(x, lst=[]):
lst.append(x)
return lst
print(multiply(2))
print(multiply(3))
print(multiply(4))

    • Interview Question of the Day

    Daily Interview Questions

      Frontend (4 Questions)
      • What is the difference between null and undefined in JavaScript?
      • Explain how the event delegation pattern works in JavaScript.
      • How does the Virtual DOM work in React, and why is it useful?
      • What are the key differences between Vue.js computed properties and watchers?
      Backend (4 Questions)
      • Explain the difference between synchronous and asynchronous programming in Node.js.
      • What is the difference between a thread and a process?
      • How does memory management work in Python?
      • Explain how a RESTful API differs from GraphQL.
      Database (3 Questions)
      • What is the difference between inner join and left join in SQL?
      • How does indexing improve query performance in databases?
      • What is the difference between NoSQL and SQL databases?
      Others (2 Questions)
      • What are system calls in an operating system? Provide an example.
      • What is containerization, and how does Docker help in deployment?

    Trivia: 5 Fun Facts

    • Who created Linux?
        • Answer: Linus Torvalds created Linux in 1991.
    • When was JavaScript first released?
        • Answer: JavaScript was first released in 1995 by Netscape, developed by Brendan Eich.
    • Which company developed React?
        • Answer: Facebook (now Meta) developed React in 2013.
    • What was the first programming language ever created?
        • Answer: The first high-level programming language was FORTRAN, developed in 1957 by IBM.
    • Which database system is known as the world's most popular open-source database?
        • Answer: MySQL, originally developed by MySQL AB in 1995.

    API of the Week

    Task: Hints for Building a Simple Weather App using OpenWeatherMap API

    1. Get an API Key
      • Sign up at OpenWeatherMap and get a free API key.
    1. Choose an HTTP Request Method
      • Use fetch() in JavaScript or requests in Python to get weather data.
    1. API Endpoint Example
    1. Use this URL:
      • https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric
      • Replace London with the city name and YOUR_API_KEY with your actual API key
    1. Extract Important Data
      • Parse the JSON response to extract key details like temperature, humidity, and weather description.
    1. Display the Data
      • Show weather details in a simple UI using HTML, CSS, and JavaScript.
      • Example: Display city name, temperature, and weather conditions.
    1. Handle Errors Gracefully
      • Show an error message if the city is not found or the API call fails.
    1. Enhancements (Optional)
      • Allow users to enter any city name.
      • Show weather icons based on conditions.
      • Use geolocation to fetch the user’s current weather.

    orgopenweathermap.org

    Current weather and forecast - OpenWeatherMap

    OpenWeather provides comprehensive weather data services, including current, forecast, and historical weather information. Explore a wide range of APIs for solar radiation, road risk assessment, solar energy prediction, and more, with global coverage and user-friendly access. Ideal for developers and businesses seeking accurate and reliable weather insights.

    Tool of the Day

    Postman - Great for testing APIs!

    Postman is a popular API testing tool used by developers to send requests, inspect responses, and automate testing. It provides a user-friendly interface to work with APIs without needing to write code manually.

    Key Features of Postman:

    • Send API Requests: Easily send GET, POST, PUT, DELETE requests to test RESTful APIs.
    • Manage Environments: Store API keys, base URLs, and variables for different environments (e.g., dev, staging, production).
    • Automated Testing: Use Postman Tests (JavaScript-based scripts) to validate API responses.
    • Collections & Workspaces: Organize API requests into collections and collaborate with teams.
    • Mock Servers: Simulate API responses for development without needing a backend.
    • API Documentation: Generate and share API documentation automatically.

    Why Use Postman?

    • Saves time on manual API testing
    • No coding required for basic usage
    • Works with REST, GraphQL, and SOAP APIs
    • Free version available for personal use

    Real-World Project of the Week

    Project: Build a Personal Portfolio Website

    Tech Stack: HTML, CSS, JavaScript (Optional: React, TailwindCSS)

    

    Follow us on Facebook and Twitter for latest update.