Today, as the lunch break challenge I decided to create Tabs in Vanilla JS and that's what I made:
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.
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.
Contacts
A paragraph without a header.
</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];
}
CSS:
.buttonsContainer {
margin-left: 5px;
}
.pageContainer {
border: 1px gray solid;
box-shadow: gray 3px 3px;
padding: 10px;
}
.headerButton {
display: inline-block;
font-size: 20px;
background-color: #e1c340;
padding: 2px 10px;
border: 1px gray solid;
border-top-left-radius: 7px 20px;
border-top-right-radius: 7px 20px;
margin-left: -5px;
position: relative;
cursor: pointer;
}
.active {
z-index: 10;
background-color: #f8ea8c;
padding: 2px 15px;
}
Also, I wanted to implement the mouseover effect, but the lunch break was over..
You can try it on JSFiddle: https://jsfiddle.net/AndrewBuntsev/ef6at3L5/
No comments:
Post a Comment