<body>
<header>
<div id="co-name">
ABCD Design Co.
</div>
<nav>
<ul id="nav-list">
<li>Services</li>
<li class="" id="item-b">Work</li>
<li id="item-c">About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="button-container">
<button id="buttonEmpty" onclick="empty()">Empty the third Nav Item</button>
</div>
</body>
body,
button {
font-family: "Roboto", sans-serif;
}
header {
padding: 1ch 2ch;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background: linear-gradient(270deg, #16407a, #0f7543);
color: white;
}
#co-name {
font-size: 1.3rem;
}
ul {
display: flex;
gap: 2ch;
font-family: "Merriweather", serif;
& li {
display: inline-block;
}
}
li:empty {
display: none;
}
#button-container {
padding: 2ch;
display: flex;
justify-content: center;
& button {
padding: 1.5ch;
background: none;
border: 0.5ch solid #16407a;
border-radius: 1ch;
background: transparent;
box-shadow: 3px 3px #e8eaf6;
font-weight: bold;
cursor: pointer;
transform: 2s ease;
&:active {
position: relative;
left: 3px;
top: 3px;
box-shadow: none;
text-shadow: none;
}
}
}
View Compiled
const itemC = document.getElementById("item-c");
const emptyButton = document.getElementById("buttonEmpty");
function empty() {
if (itemC.textContent == "") {
itemC.textContent = "About";
emptyButton.textContent = "Empty the third Nav Item";
console.log(itemC);
} else {
itemC.textContent = "";
emptyButton.textContent = "Insert the third Nav Item";
console.log(itemC);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.