Avdhesh-Varshney · ananyag309 · Oct 11, 2024 · Oct 11, 2024
diff --git a/Vanilla-JS-Projects/Intermediate/Online-IDE/README.md b/Vanilla-JS-Projects/Intermediate/Online-IDE/README.md
@@ -0,0 +1,63 @@
+<h1 align='center'><b>💻 Online IDE for HTML, CSS, and JavaScript 💻</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+
+</div>
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+    <p>An online IDE for writing and testing HTML, CSS, and JavaScript code in real-time. This tool allows users to create and preview web projects directly in the browser.</p>
+</div>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+- Clone this repository.
+- Navigate to the project directory.
+- Open `index.html` in your browser.
+- Start writing and testing your HTML, CSS, and JavaScript code directly in the IDE.
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Features 🛠️
+
+- Real-time preview of HTML, CSS, and JavaScript.
+- Easy-to-use code editor for beginners and advanced users.
+- Lightweight and runs directly in the browser without the need for external plugins.
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+
+<!-- Add a screenshot of your online IDE project here -->
+![img](./screenshot.webp)
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Ananya Gupta</i></b> 👨‍💻</h4>
+
+<p align='center'>
+  <a href='https://github.com/ananyag309'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/Vanilla-JS-Projects/Intermediate/Online-IDE/index.html b/Vanilla-JS-Projects/Intermediate/Online-IDE/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML/CSS/JS Online IDE</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>HTML/CSS/JS Online IDE</h1>
+    </header>
+
+    <main>
+        <div class="editor-section">
+            <div class="editor-container">
+                <h2>HTML</h2>
+                <textarea id="html-code" placeholder="Write HTML here..."></textarea>
+            </div>
+
+            <div class="editor-container">
+                <h2>CSS</h2>
+                <textarea id="css-code" placeholder="Write CSS here..."></textarea>
+            </div>
+
+            <div class="editor-container">
+                <h2>JavaScript</h2>
+                <textarea id="js-code" placeholder="Write JavaScript here..."></textarea>
+            </div>
+        </div>
+
+        <button id="run-code">Run Code</button>
+
+        <div class="output-section">
+            <iframe id="output-frame"></iframe>
+            <pre id="error-log"></pre>
+        </div>
+    </main>
+
+    <footer>
+        <p>Test your HTML, CSS, and JavaScript in real-time!</p>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Vanilla-JS-Projects/Intermediate/Online-IDE/screenshot.webp b/Vanilla-JS-Projects/Intermediate/Online-IDE/screenshot.webp
diff --git a/Vanilla-JS-Projects/Intermediate/Online-IDE/script.js b/Vanilla-JS-Projects/Intermediate/Online-IDE/script.js
@@ -0,0 +1,24 @@
+document.getElementById("run-code").addEventListener("click", function() {
+    const htmlCode = document.getElementById("html-code").value;
+    const cssCode = document.getElementById("css-code").value;
+    const jsCode = document.getElementById("js-code").value;
+
+    const output = `
+        <style>${cssCode}</style>
+        ${htmlCode}
+        <script>
+            try {
+                ${jsCode}
+                parent.document.getElementById("error-log").style.display = 'none';
+            } catch (error) {
+                parent.document.getElementById("error-log").style.display = 'block';
+                parent.document.getElementById("error-log").textContent = 'Error: ' + error.message;
+            }
+        <\/script>
+    `;
+
+    const iframe = document.getElementById("output-frame").contentWindow.document;
+    iframe.open();
+    iframe.write(output);
+    iframe.close();
+});
diff --git a/Vanilla-JS-Projects/Intermediate/Online-IDE/style.css b/Vanilla-JS-Projects/Intermediate/Online-IDE/style.css
@@ -0,0 +1,188 @@
+/* General Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+header {
+    text-align: center;
+    padding: 20px;
+    background: rgba(0, 0, 0, 0.7);
+    border-bottom: 3px solid #4ca1af;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+h1 {
+    font-size: 2.5rem;
+    background: -webkit-linear-gradient(#4ca1af, #c4e0e5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    flex-grow: 1;
+}
+
+.editor-section {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    gap: 20px;
+}
+
+.editor-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: #1c1e26;
+    border-radius: 10px;
+    padding: 15px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+}
+
+.editor-container h2 {
+    color: #c4e0e5;
+    font-weight: 600;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+textarea {
+    width: 100%;
+    height: 200px;
+    background: #222436;
+    border: none;
+    border-radius: 8px;
+    color: #fff;
+    padding: 10px;
+    font-family: monospace;
+    font-size: 1rem;
+    resize: none;
+    outline: none;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    scrollbar-width: thin; /* For Firefox */
+}
+
+/* Scrollbar Styles */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px; 
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #4ca1af, #2c5364); /* Color matching the background gradient */
+    border-radius: 10px;
+}
+
+textarea:focus {
+    box-shadow: 0 0 15px rgba(144, 238, 144, 0.7);
+}
+
+button {
+    padding: 15px 30px;
+    background: linear-gradient(135deg, #4ca1af, #c4e0e5);
+    border: none;
+    color: #222436;
+    font-size: 1.2rem;
+    font-weight: bold;
+    cursor: pointer;
+    border-radius: 8px;
+    margin-top: 20px;
+    transition: background 0.3s ease-in-out;
+}
+
+button:hover {
+    background: linear-gradient(135deg, #4ca1af, #1c92d2);
+}
+
+.output-section {
+    width: 100%;
+    margin-top: 20px;
+}
+
+iframe {
+    width: 100%;
+    height: 400px;
+    border: none;
+    border-radius: 10px;
+    background-color: white;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+#error-log {
+    color: #ff6b6b;
+    background-color: #333;
+    padding: 15px;
+    border-radius: 8px;
+    font-family: monospace;
+    margin-top: 10px;
+    display: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+footer {
+    text-align: center;
+    padding: 20px;
+    background: rgba(0, 0, 0, 0.7);
+    border-top: 3px solid #4ca1af;
+    color: #c4e0e5;
+    margin-top: auto;
+}
+
+@media (max-width: 768px) {
+    .editor-section {
+        flex-direction: column;
+    }
+
+    .editor-container {
+        margin-bottom: 20px;
+    }
+}
+
+
+
+/* Custom scrollbar styles */
+textarea {
+    width: 100%;
+    height: 200px;
+    background: #222436;
+    border: none;
+    border-radius: 8px;
+    color: #fff;
+    padding: 10px;
+    font-family: monospace;
+    font-size: 1rem;
+    resize: none;
+    outline: none;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    overflow-y: auto;
+}
+
+/* Webkit scrollbar styles */
+textarea::-webkit-scrollbar {
+    width: 8px;
+    height: 8px; 
+}
+
+textarea::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #4ca1af, #2c5364);
+    border-radius: 10px;
+}
+
+textarea:focus {
+    box-shadow: 0 0 15px rgba(144, 238, 144, 0.7);
+}
diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md
@@ -123,6 +123,7 @@
 |  96   | [Github-Profile-Viewer](./Intermediate/Github-Profile-Viewer/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
 |  97  | [Qr-Code-Generator](./Basic/Qr-Code-Generator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
 |  98  | [Amazon-Clone](./Intermediate/Amazon-Clone/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
+|  99  | [Online-IDE](./Intermediate/Online-IDE/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
 </div>