-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #556 from Siddhart2004/main
Created Code Editor and Age Calculator added
- Loading branch information
Showing
5 changed files
with
285 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| *{ | ||
| margin:0; | ||
| padding: 0; | ||
| font-family: 'poppins',sans-serif; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body{ | ||
| background: rgba(82, 82, 82, 0.879); | ||
| color: #fff ; | ||
| } | ||
|
|
||
| .container{ | ||
| width:100%; | ||
| height:100vh; | ||
| padding: 20px; | ||
| display: flex; | ||
| } | ||
| .left,.right{ | ||
| flex-basis: 50%; | ||
| padding:10px; | ||
| } | ||
| textarea{ | ||
| width: 100%; | ||
| height:29%; | ||
| background:#1f1f1f; | ||
| padding: 10px 20px; | ||
| color:white; | ||
| border: 0; | ||
| outline: 0; | ||
| font-size:18px; | ||
|
|
||
| } | ||
| iframe{ | ||
| width:100%; | ||
| height:100%; | ||
| background: white; | ||
| border:0; | ||
| outline:0; | ||
| } | ||
|
|
||
| label i{ | ||
| margin-left: 10px; | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| label{ | ||
| display: flex; | ||
| align-items: center; | ||
| background: black; | ||
| height: 30px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>CodeEditor</title> | ||
| <link rel="stylesheet" href="CodeEditor.css"> | ||
| <script src="https://kit.fontawesome.com/1303b9f5f2.js" crossorigin="anonymous"></script> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="left"> | ||
| <label ><i class="fa-brands fa-html5"></i>HTML</label> | ||
| <textarea id="html-code" onkeyup="run()"></textarea> | ||
| <label ><i class="fa-brands fa-css3-alt"></i>CSS</label> | ||
| <textarea id="css-code" onkeyup="run()"></textarea> | ||
| <label ><i class="fa-brands fa-js"></i>JS</label> | ||
| <textarea id="js-code" onkeyup="run()"></textarea> | ||
| </div> | ||
| <div class="right"> | ||
| <label for="Output"><i class="fa-solid fa-play"></i>Output</label> | ||
| <iframe id="output"></iframe> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| function saveCode() { | ||
| localStorage.setItem('htmlCode', document.getElementById('html-code').value); | ||
| localStorage.setItem('cssCode', document.getElementById('css-code').value); | ||
| localStorage.setItem('jsCode', document.getElementById('js-code').value); | ||
| } | ||
| function loadCode() { | ||
| document.getElementById('html-code').value = localStorage.getItem('htmlCode') || ''; | ||
| document.getElementById('css-code').value = localStorage.getItem('cssCode') || ''; | ||
| document.getElementById('js-code').value = localStorage.getItem('jsCode') || ''; | ||
| run(); | ||
| } | ||
| function run(){ | ||
| saveCode(); | ||
| let htmlCode =document.getElementById("html-code").value; | ||
| let cssCode =document.getElementById("css-code").value; | ||
| let jsCode =document.getElementById("js-code").value; | ||
| let output =document.getElementById("output"); | ||
| output.contentDocument.body.innerHTML =htmlCode + "<style>"+cssCode+"</style>"; | ||
| output.contentWindow.eval(jsCode); | ||
| } | ||
| window.onload = loadCode; | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: 'Poppins', sans-serif; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .wrapper { | ||
| width: 100%; | ||
| height: 100vh; | ||
| background: linear-gradient(135deg, #6a11cb, #2575fc); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .age-box { | ||
| width: 100%; | ||
| max-width: 500px; | ||
| background: rgba(255, 255, 255, 0.1); | ||
| padding: 50px; | ||
| border-radius: 15px; | ||
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); | ||
| text-align: center; | ||
| } | ||
|
|
||
| .age-box h1 { | ||
| font-size: 48px; | ||
| color: #fff; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .age-box h1 span { | ||
| color: #ffcc33; | ||
| } | ||
|
|
||
| .input-container { | ||
| display: flex; | ||
| gap: 15px; | ||
| margin-top: 30px; | ||
| background: rgba(255, 255, 255, 0.2); | ||
| padding: 20px; | ||
| border-radius: 10px; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .input-container input { | ||
| flex: 1; | ||
| padding: 12px; | ||
| font-size: 18px; | ||
| border: 2px solid transparent; | ||
| border-radius: 8px; | ||
| background: rgba(255, 255, 255, 0.8); | ||
| transition: border-color 0.3s; | ||
| } | ||
|
|
||
| .input-container input:focus { | ||
| border-color: #ffcc33; | ||
| outline: none; | ||
| } | ||
|
|
||
| .input-container button { | ||
| background: #ffcc33; | ||
| padding: 12px 20px; | ||
| border: none; | ||
| border-radius: 8px; | ||
| font-weight: bold; | ||
| color: #333; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s, transform 0.1s; | ||
| } | ||
|
|
||
| .input-container button:hover { | ||
| background-color: #ffb700; | ||
| transform: scale(1.05); | ||
| } | ||
|
|
||
| .input-container input::-webkit-calendar-picker-indicator { | ||
| position: absolute; | ||
| right: 10px; | ||
| width: 20px; | ||
| height: 20px; | ||
| background-size: 20px; | ||
| background-position: center; | ||
| cursor: pointer; | ||
| opacity: 0.5; | ||
| } | ||
|
|
||
| #outputResult { | ||
| font-size: 22px; | ||
| margin-top: 25px; | ||
| color: #fff; | ||
| } | ||
|
|
||
| #outputResult strong { | ||
| color: #ffcc33; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Age_Calc</title> | ||
| <link rel="stylesheet" href="Age_Calc.css"> | ||
| </head> | ||
| <body> | ||
| <div class="wrapper"> | ||
| <div class="age-box"> | ||
| <h1>Age<span>Calc</span></h1> | ||
| <div class="input-container"> | ||
| <input type="date" id="dobInput" /> | ||
| <button onclick="displayAge()">Calculate Age</button> | ||
| </div> | ||
| <p id="outputResult"></p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| const dobInput = document.getElementById("dobInput"); | ||
| dobInput.max = new Date().toISOString().split("T")[0]; | ||
|
|
||
| const output = document.getElementById("outputResult"); | ||
|
|
||
| function displayAge() { | ||
| const birthDate = new Date(dobInput.value); | ||
|
|
||
| if (isNaN(birthDate)) { | ||
| output.innerHTML = "<span>Please enter a valid date.</span>"; | ||
| return; | ||
| } | ||
|
|
||
| const today = new Date(); | ||
|
|
||
| let years = today.getFullYear() - birthDate.getFullYear(); | ||
| let months = today.getMonth() - birthDate.getMonth(); | ||
| let days = today.getDate() - birthDate.getDate(); | ||
|
|
||
| if (days < 0) { | ||
| months--; | ||
| days += getDaysInMonth(today.getFullYear(), today.getMonth()); | ||
| } | ||
|
|
||
| if (months < 0) { | ||
| years--; | ||
| months += 12; | ||
| } | ||
|
|
||
| output.innerHTML = | ||
| `<strong>${years}</strong> years, <strong>${months}</strong> months, and <strong>${days}</strong> days old.`; | ||
| } | ||
|
|
||
| function getDaysInMonth(year, month) { | ||
| return new Date(year, month + 1, 0).getDate(); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters