Today, as the lunch break challenge I decided to create Tabs in Vanilla JS and that's what I made:
About
Details
Contacts
In descriptive writing, the author does not just tell the reader what was seen, felt, tested,
smelled, or
heard. Rather, the author describes something from their own experience and, through careful choice
of
words and phrasing, makes it seem real. Descriptive writing is vivid, colorful, and detailed.
Good descriptive writing creates an impression in the reader's mind of an event, a place, a person,
or a
thing. The writing will be such that it will set a mood or describe something in such detail that if
the
reader saw it, they would recognize it.
To be concrete, descriptive writing has to offer specifics the reader can envision. Rather than "Her
eyes
were the color of blue rocks" (Light blue? Dark blue? Marble? Slate?), try instead, "Her eyes
sparkled
like sapphires in the dark."
The HTML is the following:
<html>
<head>
Tabs Example
</head>
<body>
About
In descriptive writing, the author does not just tell the reader what was seen, felt, tested,
smelled, or
heard. Rather, the author describes something from their own experience and, through careful choice
of
words and phrasing, makes it seem real. Descriptive writing is vivid, colorful, and detailed.
Good descriptive writing creates an impression in the reader's mind of an event, a place, a person,
or a
thing. The writing will be such that it will set a mood or describe something in such detail that if
the
reader saw it, they would recognize it.
To be concrete, descriptive writing has to offer specifics the reader can envision. Rather than "Her
eyes
were the color of blue rocks" (Light blue? Dark blue? Marble? Slate?), try instead, "Her eyes
sparkled
like sapphires in the dark."
Details
To be evocative, descriptive writing has to unite the concrete image with phrasing that evokes the
impression the writer wants the reader to have. Consider "her eyes shone like sapphires, warming my
night" versus "the woman's eyes had a light like sapphires, bright and hard." Each phrase uses the
same
concrete image, then employs evocative language to create different impressions.
To be plausible, the descriptive writer has to constrain the concrete, evocative image to suit the
reader's knowledge and attention span. "Her eyes were brighter than the sapphires in the armrests of
the
Tipu Sultan's golden throne, yet sharper than the tulwars of his cruelest executioners" will have
the
reader checking their phone halfway through. "Her eyes were sapphires, bright and hard" creates the
same
effect in a fraction of the reading time. As always in the craft of writing: when in doubt, write
less.
n this excerpt from Jamaica Inn by Daphne du Maurier, notice the writer's choice of adjectives,
adverbs,
and verbs. Granite. Mizzling. Du Maurier's choice of words allows the reader to almost feel the
weather
occurring on the page.
<p>In descriptive writing, the author does not just tell the reader what was seen, felt, tested,
smelled, or
heard. Rather, the author describes something from their own experience and, through careful choice
of
words and phrasing, makes it seem real. Descriptive writing is vivid, colorful, and detailed.</p>
<p>Good descriptive writing creates an impression in the reader's mind of an event, a place, a person,
or a
thing. The writing will be such that it will set a mood or describe something in such detail that if
the
reader saw it, they would recognize it.</p>
<p>To be concrete, descriptive writing has to offer specifics the reader can envision. Rather than "Her
eyes
were the color of blue rocks" (Light blue? Dark blue? Marble? Slate?), try instead, "Her eyes
sparkled
like sapphires in the dark."</p>
</div>
</div>
<div class="tabPage">
<h1 class="tabHeader">Details</h1>
<div class="tabPageContent">
<p>To be evocative, descriptive writing has to unite the concrete image with phrasing that evokes the
impression the writer wants the reader to have. Consider "her eyes shone like sapphires, warming my
night" versus "the woman's eyes had a light like sapphires, bright and hard." Each phrase uses the
same
concrete image, then employs evocative language to create different impressions.</p>
<p>To be plausible, the descriptive writer has to constrain the concrete, evocative image to suit the
reader's knowledge and attention span. "Her eyes were brighter than the sapphires in the armrests of
the
Tipu Sultan's golden throne, yet sharper than the tulwars of his cruelest executioners" will have
the
reader checking their phone halfway through."Her eyes were sapphires, bright and hard" creates the
same
effect in a fraction of the reading time. As always in the craft of writing: when in doubt,write
less.
</p>
<p>n this excerpt from Jamaica Inn by Daphne du Maurier, notice the writer's choice of adjectives,
adverbs,
and verbs. Granite. Mizzling. Du Maurier's choice of words allows the reader to almost feel the
weather
occurring on the page.</p>
</div>
</div>
<div class="tabPage">
<h1 class="tabHeader">Contacts</h1>
<div class="tabPageContent">
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
</div>
</div>
<div class="tabPage">
<div class="tabPageContent">
<p>A paragraph without a header.</p>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<script src="./main.js"></script>
<link rel="stylesheet" href="main.css">
<title>Tabs Example</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
tab('mainTab');
});
</script>
</head>
<body>
<div id="mainTab">
<div class="tabPage">
<h1 class="tabHeader">About</h1>
<div class="tabPageContent">
<p>In descriptive writing, the author does not just tell the reader what was seen, felt, tested,
smelled, or
heard. Rather, the author describes something from their own experience and, through careful choice
of
words and phrasing, makes it seem real. Descriptive writing is vivid, colorful, and detailed.</p>
<p>Good descriptive writing creates an impression in the reader's mind of an event, a place, a person,
or a
thing. The writing will be such that it will set a mood or describe something in such detail that if
the
reader saw it, they would recognize it.</p>
<p>To be concrete, descriptive writing has to offer specifics the reader can envision. Rather than "Her
eyes
were the color of blue rocks" (Light blue? Dark blue? Marble? Slate?), try instead, "Her eyes
sparkled
like sapphires in the dark."</p>
</div>
</div>
<div class="tabPage">
<h1 class="tabHeader">Details</h1>
<div class="tabPageContent">
<p>To be evocative, descriptive writing has to unite the concrete image with phrasing that evokes the
impression the writer wants the reader to have. Consider "her eyes shone like sapphires, warming my
night" versus "the woman's eyes had a light like sapphires, bright and hard." Each phrase uses the
same
concrete image, then employs evocative language to create different impressions.</p>
<p>To be plausible, the descriptive writer has to constrain the concrete, evocative image to suit the
reader's knowledge and attention span. "Her eyes were brighter than the sapphires in the armrests of
the
Tipu Sultan's golden throne, yet sharper than the tulwars of his cruelest executioners" will have
the
reader checking their phone halfway through. "Her eyes were sapphires, bright and hard" creates the
same
effect in a fraction of the reading time. As always in the craft of writing: when in doubt, write
less.
</p>
<p>n this excerpt from Jamaica Inn by Daphne du Maurier, notice the writer's choice of adjectives,
adverbs,
and verbs. Granite. Mizzling. Du Maurier's choice of words allows the reader to almost feel the
weather
occurring on the page.</p>
</div>
</div>
<div class="tabPage">
<h1 class="tabHeader">Contacts</h1>
<div class="tabPageContent">
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
</div>
</div>
<div class="tabPage">
<div class="tabPageContent">
<p>A paragraph without a header.</p>
</div>
</div>
</div>
</body>
</html>
If we comment out the tab('mainTab'); function on the line #8, the magic disappears:
About
In descriptive writing, the author does not just tell the reader what was seen, felt, tested,
smelled, or
heard. Rather, the author describes something from their own experience and, through careful choice
of
words and phrasing, makes it seem real. Descriptive writing is vivid, colorful, and detailed.
Good descriptive writing creates an impression in the reader's mind of an event, a place, a person,
or a
thing. The writing will be such that it will set a mood or describe something in such detail that if
the
reader saw it, they would recognize it.
To be concrete, descriptive writing has to offer specifics the reader can envision. Rather than "Her
eyes
were the color of blue rocks" (Light blue? Dark blue? Marble? Slate?), try instead, "Her eyes
sparkled
like sapphires in the dark."
Details
To be evocative, descriptive writing has to unite the concrete image with phrasing that evokes the
impression the writer wants the reader to have. Consider "her eyes shone like sapphires, warming my
night" versus "the woman's eyes had a light like sapphires, bright and hard." Each phrase uses the
same
concrete image, then employs evocative language to create different impressions.
To be plausible, the descriptive writer has to constrain the concrete, evocative image to suit the
reader's knowledge and attention span. "Her eyes were brighter than the sapphires in the armrests of
the
Tipu Sultan's golden throne, yet sharper than the tulwars of his cruelest executioners" will have
the
reader checking their phone halfway through. "Her eyes were sapphires, bright and hard" creates the
same
effect in a fraction of the reading time. As always in the craft of writing: when in doubt, write
less.
n this excerpt from Jamaica Inn by Daphne du Maurier, notice the writer's choice of adjectives,
adverbs,
and verbs. Granite. Mizzling. Du Maurier's choice of words allows the reader to almost feel the
weather
occurring on the page.
Contacts
A paragraph without a header.
JavaScript that builds tab pages:
const _tabHeaders = [];
const _tabPages = [];
let _pageContainer;
function tab(elementId) {
console.log('Trying to tabify the element ' + elementId);
const root = document.getElementById(elementId);
if (!root) {
console.error('Cannot find an element with ID=' + elementId);
return;
}
const tabPages = root.getElementsByClassName('tabPage');
console.log(tabPages.length + ' tab pages found');
//Extract tab headers and tab content
Array.from(tabPages).forEach((tabPage, index) => extractTabPage(tabPage, index));
//Clear root content
root.innerHTML = "";
//Build new content
buildTabButtons(root);
//Build page container
buildPageContainer(root);
//Select the first tab
clickTab(0);
}
function extractTabPage(tabPage, index) {
if (!tabPage) {
console.error('Cannot add NULL tab page');
return;
}
const pageHeader = tabPage.getElementsByClassName('tabHeader')[0];
if (!pageHeader) {
console.warn("Cannot add a tab page without a header. No header - no page. That's it.")
return;
}
const pageContent = tabPage.getElementsByClassName('tabPageContent')[0];
if (!pageContent) {
console.warn("Cannot add a tab page without a content. No content - no page. Pretty obvious, isn't it?")
return;
}
console.log('Adding new page ' + pageHeader.innerText);
_tabHeaders.push(createHeaderButton(pageHeader.innerText, index));
_tabPages.push(pageContent.innerHTML);
}
function createHeaderButton(headerText, index) {
let headerButton = document.createElement('div');
headerButton.innerText = headerText;
headerButton.setAttribute('class', 'headerButton');
headerButton.setAttribute('onclick', `clickTab(${index})`);
return headerButton;
}
function buildTabButtons(root) {
//Create the tab buttons container
let buttonsContainer = document.createElement('div');
buttonsContainer.setAttribute('class', 'buttonsContainer');
root.appendChild(buttonsContainer);
//Create a button for every header
_tabHeaders.forEach(header => buttonsContainer.appendChild(header));
}
function buildPageContainer(root) {
//Create the page container
_pageContainer = document.createElement('div');
_pageContainer.setAttribute('class', 'pageContainer');
root.appendChild(_pageContainer);
}
function clickTab(index) {
_tabHeaders.forEach(header => header.setAttribute('class', 'headerButton'));
_tabHeaders[index].setAttribute('class', 'headerButton active');
_pageContainer.innerHTML = _tabPages[index];
}
const _tabHeaders =[];
const _tabPages =[];
let _pageContainer;
function tab(elementId){
console.log('Trying to tabify the element '+ elementId);
const root = document.getElementById(elementId);
if(!root){
console.error('Cannot find an element with ID='+ elementId);
No comments:
Post a Comment