Skip to content

Commit

Permalink
Added card with tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@AirTechWick
AirTechWick committed Jun 18, 2024
1 parent 9170860 commit 734b753
Showing 1 changed file with 222 additions and 38 deletions.
260 changes: 222 additions & 38 deletions card-with-tabs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,75 +7,259 @@
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');

.card-tabs {
.card-with-tabs {
font-family: Inter;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
max-width: 400px;
border: 4px solid aqua;
border-radius: 10px;
align-items: center;
background-color: black;
color: white;
max-width: 700px;
overflow-x: scroll;
}

.card-tabs > .tab {
div.tab-bar {
display: inline-flex;
width: 100%;
}


.tab {
border: 4px solid aqua;
text-align: center;
padding: 5px;
margin-top: 20px;
flex-grow: 1;
}

.card-tabs > .tab:hover {
background-color: aquamarine;
.tab:hover {
background-color: rgba(127, 255, 212, 0.585);
cursor: pointer;
}

.tab1 { grid-area: 1 / 1 / 2 / 2; }
.tab2 { grid-area: 1 / 2 / 2 / 3; }
.tab3 { grid-area: 1 / 3 / 2 / 4; }
.text-area {
grid-area: 2 / 1 / 4 / 4;
}

#code-1 {
/* First shown as default */
.code-shown {
display: inline;
color: greenyellow;
}

#code-2 {
.code-hidden {
display: none;
}

#code-3 {
display: none;

.text-area {
display: block;
}


</style>
</head>
<body>
<div class="card-tabs">
<div class="tab tab1"> HTML </div>
<div class="tab tab2"> CSS </div>
<div class="tab tab3"> JavaScript </div>
<div class="card-with-tabs">
<div class="tab-bar">
<div class="tab tab-html"> HTML </div>
<div class="tab tab-css"> CSS </div>
<div class="tab tab-js"> JavaScript </div>
</div>
<div class="text-area">
<pre>
<code id="code-1">
p { color: red; }
body { background-color: #eee; }
</code>
<code id="code-2">
p { color: blue; }
body { background-color: #bbb; }
<pre class="code-shown code-html">
<code>
&lt;div&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;
&lt;p&gt;Welcome to my website!&lt;/p&gt;
&lt;/div&gt; </code>
</pre>

<pre class="code-hidden code-css">
<code>
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');

.card-tabs {
font-family: Inter;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
max-width: 400px;
border: 4px solid aqua;
border-radius: 10px;
align-items: center;
background-color: black;
color: white;

}

.card-tabs > .tab {
border: 4px solid aqua;
text-align: center;
padding: 5px;
margin-top: 20px;
}

.card-tabs > .tab:hover {
background-color: aquamarine;
cursor: pointer;
}

.tab1 { grid-area: 1 / 1 / 2 / 2; }
.tab2 { grid-area: 1 / 2 / 2 / 3; }
.tab3 { grid-area: 1 / 3 / 2 / 4; }
.text-area {
grid-area: 2 / 1 / 4 / 4;
}

.code-shown {
display: inline;
color: greenyellow;
}

.code-hidden {
display: none;
}

</code>
<code id="code-3">
p { color: green; }
body { background-color: #ccc; }
</pre>

<pre class="code-hidden code-js">
<code>
var htmlTab = document.querySelector('.tab-html')
var cssTab = document.querySelector('.tab-css')
var jsTab = document.querySelector('.tab-js')

var htmlCode = document.querySelector('.code-html')
var cssCode = document.querySelector('.code-css')
var jsCode = document.querySelector('.code-js')


htmlTab.addEventListener("click", function(){
console.log("html tab");
showCode("html");
hideCode("css");
hideCode("js");
});

cssTab.addEventListener("click", function(){
console.log("css tab");
showCode("css");
hideCode("html");
hideCode("js");
});

jsTab.addEventListener("click", function(){
console.log("js tab");
showCode("js");
hideCode("html");
hideCode("css");
});

function showCode(tab_type){
if (tab_type == "html"){
htmlCode.classList.add("code-shown")
htmlCode.classList.remove("code-hidden")
}

if (tab_type == "css"){
cssCode.classList.add("code-shown")
cssCode.classList.remove("code-hidden")
}

if (tab_type == "js"){
jsCode.classList.add("code-shown")
jsCode.classList.remove("code-hidden")
}
}

function hideCode(tab_type){
if (tab_type == "html"){
htmlCode.classList.add("code-hidden")
htmlCode.classList.remove("code-shown")
}

if (tab_type == "css"){
cssCode.classList.add("code-hidden")
cssCode.classList.remove("code-shown")
}

if (tab_type == "js"){
jsCode.classList.add("code-hidden")
jsCode.classList.remove("code-shown")
}
}
</code>
</pre>
</div>
</div>

<script>
var htmlTab = document.querySelector('.tab-html')
var cssTab = document.querySelector('.tab-css')
var jsTab = document.querySelector('.tab-js')

var htmlCode = document.querySelector('.code-html')
var cssCode = document.querySelector('.code-css')
var jsCode = document.querySelector('.code-js')


htmlTab.addEventListener("click", function(){
console.log("html tab");
showAndCopyCode("html");
hideCode("css");
hideCode("js");
});

cssTab.addEventListener("click", function(){
console.log("css tab");
showAndCopyCode("css");
hideCode("html");
hideCode("js");
});

jsTab.addEventListener("click", function(){
console.log("js tab");
showAndCopyCode("js");
hideCode("html");
hideCode("css");
});

function showAndCopyCode(tab_type){
if (tab_type == "html"){
htmlCode.classList.add("code-shown")
htmlCode.classList.remove("code-hidden")
navigator.clipboard.writeText(htmlCode.textContent)
}

if (tab_type == "css"){
cssCode.classList.add("code-shown")
cssCode.classList.remove("code-hidden")
navigator.clipboard.writeText(cssCode.textContent)
}

if (tab_type == "js"){
jsCode.classList.add("code-shown")
jsCode.classList.remove("code-hidden")
navigator.clipboard.writeText(jsCode.textContent)
}
}

function hideCode(tab_type){
if (tab_type == "html"){
htmlCode.classList.add("code-hidden")
htmlCode.classList.remove("code-shown")
}

if (tab_type == "css"){
cssCode.classList.add("code-hidden")
cssCode.classList.remove("code-shown")
}

if (tab_type == "js"){
jsCode.classList.add("code-hidden")
jsCode.classList.remove("code-shown")
}
}



</script>
</body>
</html>

0 comments on commit 734b753

Please sign in to comment.