Skip to content

Save To Local Storage #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
billalben wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Save To Local Storage #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 bootstrap/bootstrap.min.css → bootstrap/css/bootstrap.min.css
View file
Open in desktop
File renamed without changes.
1 change: 1 addition & 0 deletions bootstrap/css/bootstrap.min.css.map
View file
Open in desktop

Large diffs are not rendered by default.

0 bootstrap/bootstrap.bundle.min.js → bootstrap/js/bootstrap.bundle.min.js
View file
Open in desktop
File renamed without changes.
1 change: 1 addition & 0 deletions bootstrap/js/bootstrap.bundle.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

103 changes: 62 additions & 41 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,71 @@
*{
font-family: "Bree Serif", sans-serif;
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
a {
text-decoration: none;
}
body{
padding: 0;
margin: 0;
html {
font-family: "Bree Serif", sans-serif;
scroll-behavior: smooth;
}
.editor{
height: 50vh;
.btn.active {
background-color: #333;
color: #fff;
}
.result{
height: 100vh;
[data-tab-content] {
display: none;
}
[data-tab-content].active {
display: block;
}
.editor {
height: 50vh;
}
.result {
height: 100vh;
}
textarea,
iframe {
height: 100%;
width: 100%;
background: transparent;
}
textarea {
color: #e2e2e2;
background-color: #121212;
outline: none;
border: none;
resize: none;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
border: none;
}
::-webkit-scrollbar-track:hover {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #b1b1b1;
}
::-webkit-scrollbar-thumb:hover {
background: #c3c3c3;
}
textarea, iframe{
height: 100%;
width: 100%;
background: transparent;
}
textarea{
color: #e2e2e2;
background-color: #121212;
outline: none;
border: none;
resize: none;
}
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: transparent;border: none;}
::-webkit-scrollbar-track:hover {background: transparent;}
::-webkit-scrollbar-thumb {background: #b1b1b1;}
::-webkit-scrollbar-thumb:hover {background: #c3c3c3;}

@media screen and (min-width: 992px) {
#controls{
display: none;
}
#html, #css, #js, #result{
display: block;
}
[data-tab-btn] {
display: none;
}
[data-tab-content] {
display: block;
}
}
@media screen and (max-width: 991px) {
.editor{
height: 100vh;
}
#css, #js, #result{
display: none;
}
}
.editor {
height: 100vh;
}
}
24 changes: 24 additions & 0 deletions favicon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
141 changes: 76 additions & 65 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,90 @@
<!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">
<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" />
<meta name="description" content="Live Web Code Editor" />
<meta name="keywords" content="HTML, CSS, JavaScript, Live Web Code Editor" />
<title>Live Web Code Editor</title>
<link href='https://fonts.googleapis.com/css?family=Bree Serif' rel='stylesheet'>
<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body class="bg-light mt-5 pt-2" onresize="show_all()">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.svg" type="image/svg+xml" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Bree Serif" rel="stylesheet" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
<!-- Custom CSS -->
<link rel="stylesheet" href="./css/style.css" />
<!-- Js -->
<script src="./bootstrap/js/bootstrap.bundle.min.js" defer></script>
<script src="./js/app.js" defer></script>
</head>
<body class="bg-light mt-5 pt-2">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#home">Online Live Web Code Editor</a>
</div>
<div class="container-fluid">
<a class="navbar-brand" href="#home">Online Live Web Code Editor</a>
</div>
</nav>

<div class="container-fluid mt-2">
<div class="row mb-2" id="controls">
<div class="col-3">
<div class="container-fluid p-0">
<button class="btn btn-light w-100 p-1 border rounded" onclick="show('html')">HTML</button>
</div>
</div>
<div class="col-3">
<div class="container-fluid p-0">
<button class="btn btn-light w-100 p-1 border rounded" onclick="show('css')">CSS</button>
</div>
</div>
<div class="col-3">
<div class="container-fluid p-0">
<button class="btn btn-light w-100 p-1 border rounded" onclick="show('js')">JS</button>
</div>
</div>
<div class="col-3">
<div class="container-fluid p-0">
<button class="btn btn-primary w-100 p-1 border rounded" onclick="show('result')">Result</button>
</div>
</div>
<div class="row mb-2" id="controls">
<div class="col-3">
<div class="container-fluid p-0">
<button class="btn btn-light w-100 p-1 border rounded active" data-tab-btn="html">HTML</button>
</div>
</div>
<div class="col-3">
<div class="container-fluid p-0">
<button class="btn btn-light w-100 p-1 border rounded" data-tab-btn="css">CSS</button>
</div>
</div>
<div class="col-3">
<div class="container-fluid p-0">
<button class="btn btn-light w-100 p-1 border rounded" data-tab-btn="js">
JS
</button>
</div>
</div>
<div class="col-3">
<div class="container-fluid p-0">
<button class="btn btn-primary w-100 p-1 border rounded" data-tab-btn="result">
Result
</button>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12" id="html">
<div class="container-fluid border rounded p-1 bg-dark text-light editor">
<textarea id="htmlCode" placeholder="HTML Code"
oninput="showPreview()"></textarea>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" id="css">
<div class="container-fluid border rounded p-1 bg-dark text-light editor">
<textarea id="cssCode" placeholder="CSS Code"
oninput="showPreview()"></textarea>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" id="js">
<div class="container-fluid border rounded p-1 bg-dark text-light editor">
<textarea id="jsCode" placeholder="JavaScript Code"
oninput="showPreview()"></textarea>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 mt-2 mb-2" id="result">
<div class="container-fluid border rounded p-1 result bg-white">
<iframe id="preview-window"></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12 active" id="html" data-tab-content="html">
<div class="container-fluid border rounded p-1 bg-dark text-light editor">
<textarea id="htmlCode" placeholder="HTML Code"></textarea>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" id="css" data-tab-content="css">
<div class="container-fluid border rounded p-1 bg-dark text-light editor">
<textarea id="cssCode" placeholder="CSS Code"></textarea>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" id="js" data-tab-content="js">
<div class="container-fluid border rounded p-1 bg-dark text-light editor">
<textarea id="jsCode" placeholder="JavaScript Code"></textarea>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 mt-2 mb-2" id="result" data-tab-content="result">
<div class="container-fluid border rounded p-1 result bg-white">
<iframe id="preview-window"></iframe>
</div>
</div>
</div>
</div>

<footer>
<div class="text-center p-2 bg-light border-top mt-2">
Developed By
<a class="text-reset fw-bold" href="https://ahmed0saber.github.io/bootstrap-projects/portfolio/" target="_blank">Ahmed Saber</a>
</div>
<div class="text-center p-2 bg-light border-top mt-2">
Developed By
<a class="text-reset fw-bold" href="https://ahmed0saber.github.io/bootstrap-projects/portfolio/" target="_blank" >
Ahmed Saber
</a>
</div>
</footer>
</body>
<script src="./bootstrap/bootstrap.bundle.min.js"></script>
<script src="./js/app.js"></script>
</html>
</body>
</html>
Loading