From 703ee30ed43cd5d28a1102d35db80ffc2f4d3480 Mon Sep 17 00:00:00 2001 From: Daksh-404 Date: Wed, 30 Sep 2020 23:52:06 +0530 Subject: [PATCH] Added the dark mode --- index.html | 19 +++++++++++++++---- script.js | 13 ++++++++++++- styles.css | 42 +++++++++++++++++++++++++++++++++++++----- 3 files changed, 64 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 08ca0d4..9c894a2 100644 --- a/index.html +++ b/index.html @@ -7,9 +7,13 @@ + + + + - + +
+ Dark Mode +
+
+ + +
+
@@ -29,8 +40,8 @@ id="jsTA" placeholder="Enter Java Script" > -
-

+

+

Output

diff --git a/script.js b/script.js index de7d31a..321123e 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,4 @@ -alert("Click on language pills to open different tabs."); + $(".toggle-btn").click(function () { $(this).toggleClass("active"); if ($(this).attr("id") == "output") { @@ -20,6 +20,17 @@ $("#runBtn").click(function () { $("iframe").contents().find("html").html(addCode); document.getElementById("outputDiv").contentWindow.eval($("#jsTA").val()); }); +// Added later..// +//************************************************// +$("#customSwitch1").change(function(){ + $(".panelH").toggleClass("dark-mode-panel"); + $(".panel").toggleClass("dark-mode-panel"); + $(".extra-cover").toggleClass("dark-mode-panel"); + $(".panelH").toggleClass("text-colors"); + $(".panel").toggleClass("text-colors"); + $(".extra-cover").toggleClass("text-colors"); +}); +//************************************************// if ($("#htmlTA").is(":visible")) { $("#html").addClass("active"); } diff --git a/styles.css b/styles.css index 6c16803..99169e6 100644 --- a/styles.css +++ b/styles.css @@ -7,7 +7,7 @@ body { width: 100%; display: flex; flex-direction: row; - /* justify-content: center; */ + /* justify-content: space-between;*/ background-color: #B6EAEE; /* background-color:black; */ } @@ -54,13 +54,30 @@ body { .toggle-btn:hover { background-color: #EBF3FF; } - -#html { +/*Added later on..*/ +/******************************/ +.dark +{ + display: inline-block; + font-weight: bold; + font-size: 100%; + margin: auto 5px; + color: #227C7B; + -webkit-text-stroke: black 0.5px; +} +.myChange +{ + display: inline-block; + vertical-align: baseline; + margin: auto ; +} +/******************************/ +#html{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; } -#output { +#output{ border-top-right-radius: 5px; border-bottom-right-radius: 5px; } @@ -98,4 +115,19 @@ iframe { hr { background-color: #227C7B; -} \ No newline at end of file +} + +/* Added later on..*/ +/**************************************/ +.dark-mode-panel +{ + background-color: #282828; +} +.text-colors +{ + color:white; +} +.place-color { + color:#FFFFFF; +} +/**************************************/