added code-editor

Vanilla-JS-Projects/Intermediate/Code-Editor/README.md

@@ -0,0 +1,76 @@
+<h1 align='center'><b>💥 CODE-EDITOR 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<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)
+  <!-- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) -->
+  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+  <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
+  <!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
+  <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
+  <!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
+  <!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
+  <!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
+  <!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
+  <!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
+  <!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
+  <!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
+  <!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>This project utilizes a technology stack comprising HTML, CSS, and JavaScript. The integrated code editor features dedicated HTML, CSS, and JavaScript editors, providing real-time output previews for an enhanced development experience.</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+
+- Clone this repository.
+- Navigate to this project directory
+- Run the `index.html` file. 
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+![img](./screenshot.webp)
+
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>MANKALA VAISHNAVI</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/vaishnavi-mankala-33a256252/'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/VaishnaviMankala19'>
+    <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>
+

Vanilla-JS-Projects/Intermediate/Code-Editor/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="index.css">
+    <title>Document</title>
+</head>
+<body>
+    <h1>My Editor</h1>
+    <div class="container">
+        <div class="left">
+
+             <label><i class="fa-brands fa-html5" style="color: #b71515;"></i> HTML</label>
+                <textarea id="htmlcode" onkeyup="run()"></textarea>
+
+
+            <label><i class="fa-brands fa-css3-alt" style="color: #5180d2;"></i> CSS</label>
+                <textarea id="csscode" onkeyup="run()"></textarea>
+
+
+            <label> <i class="fa-brands fa-js" style="color: #cec022;"></i> JS</label>
+                <textarea id="jscode" onkeyup="run()"></textarea>
+
+        </div>
+        <div class="right">
+
+            <label><i class="fa-solid fa-play" style="color: #058514;"></i>  OUTPUT</label>
+            <iframe id="outputcode"></iframe>  
+
+        </div>
+
+    </div>
+    <script src="https://kit.fontawesome.com/201ee9aee4.js" crossorigin="anonymous"></script>
+
+    <script>
+        function run(){
+            let h  = document.getElementById('htmlcode').value;
+            let c = document.getElementById('csscode').value;
+            let j  = document.getElementById('jscode').value;
+            let o  = document.getElementById('outputcode');
+            o.contentDocument.body.innerHTML = h + '<style>' + c +'</style>';
+            o.contentWindow.eval(j);
+        }
+    </script>
+</body>
+</html>

Vanilla-JS-Projects/Intermediate/Code-Editor/style.css

@@ -0,0 +1,52 @@
+*{
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+    font-family: 'Lato,Lucida, sans-serif; Helvetica Narrow, sans-serif; sans-serif';
+}
+h1{
+    color:rgb(83, 83, 236);
+    text-align: center;
+    margin-top:5px;
+}
+body{
+    background-color:#454545;
+    color:white;
+}
+.container{
+    height:100vh;
+    width:100%;
+    padding:20px;
+    display:flex;
+}
+.left, .right{
+    flex-basis: 50%;
+    padding:10px;
+}
+textarea{
+    width:100%;
+    height:28%;
+    background:#1f1f1f;
+    color:#fff;
+    padding:10px 20px;
+    font-size:18px;
+    border:0;
+    outline:0;
+}
+iframe{
+    width:100%;
+    height:95%;
+    border:0;
+    outline:0;
+    background-color: white;
+}
+label i{
+    margin-right:10px;
+    margin-left:10px;
+}
+label{
+   display:flex;
+   align-items:center;
+   background:#000;
+   height:30px;
+}

Vanilla-JS-Projects/README.md

@@ -67,6 +67,7 @@
 |  40	| [Anagram-Checker](./Basic/Anagram-Checker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
 |  41   | [Leap-Year-Checker](./Basic/Leap-Year-Checker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
 |  42	| [Image-Search-Engine](./Basic/Image-Search-Engine/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
+|  43   | [Code-Editor](./Intermediate/Code-Editor/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | 
 
 </div>
 

database/vanilla.json

@@ -118,5 +118,10 @@
 		"tag":"Intermediate",
 		"title":"Meme-Generator",
 		"description":"This is a simple project which generates random memes along with an image and the name of the author just by one click of a button."
+	},
+	{
+		"tag":"Intermediate",
+		"title":"Code-Editor",
+		"description":"This project utilizes a technology stack comprising HTML, CSS, and JavaScript. The integrated code editor features dedicated HTML, CSS, and JavaScript editors, providing real-time output previews for an enhanced development experience."
 	}
 ]