#include <WiFi.h>
#include <ESPAsyncWebServer.h>
const char* ssid = "Wokwi-GUEST";
AsyncWebServer server(80);
#define LED1 26
#define LED2 27
#define BUZZER 21
void setup() {
Serial.begin(115200);
pinMode(LED1, OUTPUT);
pinMode(LED2, OUTPUT);
pinMode(BUZZER, OUTPUT);
WiFi.begin(ssid);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
Serial.println(WiFi.localIP());
server.on("/led1/on", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(LED1, HIGH);
request->send(200, "text/plain", "LED1 is ON");
});
server.on("/led1/off", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(LED1, LOW);
request->send(200, "text/plain", "LED1 is OFF");
});
server.on("/led2/on", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(LED2, HIGH);
request->send(200, "text/plain", "LED2 is ON");
});
server.on("/led2/off", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(LED2, LOW);
request->send(200, "text/plain", "LED2 is OFF");
});
server.on("/buzzer/on", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(BUZZER, HIGH);
request->send(200, "text/plain", "Buzzer is ON");
});
server.on("/buzzer/off", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(BUZZER, LOW);
request->send(200, "text/plain", "Buzzer is OFF");
});
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>ESP32 LED & Buzzer Control</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: Arial; text-align: center; }
.button { padding: 16px 40px; font-size: 24px; cursor: pointer; margin: 20px; }
.on { background-color: #4CAF50; color: white; }
.off { background-color: #f44336; color: white; }
</style>
</head>
<body>
<h1>ESP32 Web Server</h1>
<button class="button on" onclick="toggleLED('/led1/on')">LED1 ON</button>
<button class="button off" onclick="toggleLED('/led1/off')">LED1 OFF</button>
<br>
<button class="button on" onclick="toggleLED('/led2/on')">LED2 ON</button>
<button class="button off" onclick="toggleLED('/led2/off')">LED2 OFF</button>
<br>
<button class="button on" onclick="toggleLED('/buzzer/on')">Buzzer ON</button>
<button class="button off" onclick="toggleLED('/buzzer/off')">Buzzer OFF</button>
<script>
function toggleLED(url) {
fetch(url);
}
</script>
</body>
</html>)rawliteral");
});
server.begin();
}
void loop() {
}