Commit 7d4f0da4 authored by julientaq's avatar julientaq

cleaning before upload

parent 2ff7434c
MIT License
Copyright (c) [2017] [julien taquet]
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
\ No newline at end of file
<html>
<head>
<meta charset="UTF-8">
<title>README.md</title>
</head>
<body>
<h1 id="cover-builder-">Cover builder!</h1>
<p>This small experiment is an example of how you can set up cover for printed book and epub in the browser.</p>
<p>It&#39;s using CSS grids and css variables, and is only working in chrome/chromium as it&#39;s the only browser with the tools we need for printing.</p>
<h2 id="how-to-use-it">how to use it</h2>
<h3 id="friendly-user-">friendly user:</h3>
<p>use the buttons on top to add images, logos, changes text. You cannot change the font, and moving things around is not yet easy as it could. </p>
<p>when you&#39;re happy with it, you can print directly from the browser, or generate a jpg of the front, the back or the spread.</p>
<p>WARNING! No saving system is in the tool for now.</p>
<p>Please open issues for anything that comes to mind.</p>
<h3 id="friendly-developer">friendly developer</h3>
<p>There is no automation tool used for this yet. I&#39;ve been using <a href="https://prepros.io/">prepros</a> to set it up, so i leave the configuration file within. You can also use <a href="https://codekitapp.com/">codekit</a>. I&#39;m looking at making a webpack/gulp/grunt (not chosen yet) to easily set things up. </p>
<p>If you know your way around code, almost all the events are changes in the css variables: </p>
<p>and the illustration for the back is changed in the pug/html.</p>
<h3 id="to-do">to do</h3>
<p>[ ] Add automation tool for easy setup
[ ] CRUD for the data
[ ] Covers management system
[ ] Add features for designers (rotation, italic, bold, add/remove element, color functions…)</p>
<h2 id="license">License</h2>
<p>MIT</p>
</body>
</html>
\ No newline at end of file
bookCover
# Cover builder!
This small experiment is an example of how you can set up cover for printed book and epub in the browser.
It's using CSS grids and css variables, and is only working in chrome/chromium as it's the only browser with the tools we need for printing.
## how to use it
### friendly user:
use the buttons on top to add images, logos, changes text. You cannot change the font, and moving things around is not yet easy as it could.
when you're happy with it, you can print directly from the browser, or generate a jpg of the front, the back or the spread.
WARNING! No saving system is in the tool for now.
Please open issues for anything that comes to mind.
### friendly developer
There is no automation tool used for this yet. I've been using [prepros](https://prepros.io/) to set it up, so i leave the configuration file within. You can also use [codekit](https://codekitapp.com/). I'm looking at making a webpack/gulp/grunt (not chosen yet) to easily set things up.
If you know your way around code, almost all the events are changes in the css variables:
and the illustration for the back is changed in the pug/html.
### to do
[ ] Add automation tool for easy setup
[ ] CRUD for the data
[ ] Covers management system
[ ] Add features for designers (rotation, italic, bold, add/remove element, color functions…)
## License
MIT
\ No newline at end of file
......@@ -141,7 +141,6 @@
font-style: normal; }
/* fontface */
/* colors for the books */
@page {
margin: 0;
padding: 0; }
......@@ -479,6 +478,15 @@
top: 50%;
left: 10%; }
button#colorMask {
display: block;
margin-top: 2em;
white-space: 80%; }
hr {
margin-top: 2em;
margin-bottom: 2em; }
.hide *,
.hide {
display: none !important; }
......
This diff is collapsed.
<div class="page" id="page">
<div class="spread">
<div class="background"></div>
<div class="backcover" id="back">
<div class="logos draggable" id="drag-logos"></div>
<p contenteditable="true" spellcheck="false">This is where you can add some stuff on the back cover</p>
</div>
<div class="spinecover" id="spine">
<p id="spinetitle" contenteditable="true" spellcheck="false">TITLE</p>
</div>
<div class="frontcover" id="front">
<hgroup id="drag-titles">
<h1 class="draggable" id="booktitle" contenteditable="true" spellcheck="false">TITLE!</h1>
<p class="draggable" contenteditable="true" spellcheck="false">Authors?</p>
</hgroup>
</div>
</div>
</div>
\ No newline at end of file
script.
const inputs = document.querySelectorAll('.buttons div input');
function handleUpdate() {
const suffix = this.dataset.sizing || '';
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
//- for the next step: moving stuff around.
//- script.
//- // target elements with the "draggable" class
//- interact('.draggable')
//- .draggable({
//- // enable inertial throwing
//- //- inertia: true,
//- // keep the element within the area of it's parent
//- restrict: {
//- //- restriction: "parent",
//- //- endOnly: true,
//- //- elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
//- },
//- // enable autoScroll
//- autoScroll: true,
//- // call this function on every dragmove event
//- onmove: dragMoveListener,
//- // call this function on every dragend event
//- onend: function (event) {
//- var textEl = event.target.querySelector('p');
//- textEl && (textEl.textContent =
//- 'moved a distance of '
//- + (Math.sqrt(event.dx * event.dx +
//- event.dy * event.dy)|0) + 'px');
//- }
//- });
//- function dragMoveListener (event) {
//- var target = event.target,
//- // keep the dragged position in the data-x/data-y attributes
//- x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
//- y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
//- // translate the element
//- target.style.webkitTransform =
//- target.style.transform =
//- 'translate(' + x + 'px, ' + y + 'px)';
//- // update the posiion attributes
//- target.setAttribute('data-x', x);
//- target.setAttribute('data-y', y);
//- }
//- front cover image downloader here
//- script.
//- html2canvas(document.getElementById('css-source'), {
//- onrendered: function(canvas) {
//- document.body.appendChild(canvas);
//- }
//- });
//- for the paper demo
script.
const buttons = document.querySelectorAll('button');
function show(e) {
const layer = this.dataset.layer || "no-layer";
//- console.log(layer);
this.classList.toggle("active");
document.querySelector(`#${layer}`).classList.toggle("hide");
}
buttons.forEach(button => {
button.addEventListener('click', show);
});
const wtfbutton = document.querySelector('#what');
wtfbutton.addEventListener('click', function() {
const lol = document.querySelectorAll('img');
console.log(lol);
for (var i = 0; i < lol.length; i++) {
lol[i].classList.toggle("wtf");;
}
});
document.querySelector('#button-all').addEventListener('click', function() {
const Allbutton = document.querySelectorAll('button');
const lol = document.querySelectorAll('img');
for (var i = 0; i < lol.length; i++) {
lol[i].classList.addClass("hide");;
}
})
script.
const colors = document.querySelectorAll('.buttons .color input');
const sizes = document.querySelectorAll('.buttons .size');
handleUpdate() ;
function handleUpdate() {
document.documentElement.style.setProperty(`--${this.name}`, this.value);
}
colors.forEach(color => color.addEventListener('change', handleUpdate));
sizes.forEach(size => size.addEventListener('change', handleUpdate));
//- colors.forEach(color => color.addEventListener('mousemove', handleUpdate));
//- front spread
script.
const fc = document.querySelector('#fc')
const bc = document.querySelector('#bc')
var page = document.querySelector('.page');
//- const pageWidth = window.getComputedStyle(page, null).getPropertyValue("width");
//- console.log(pageWidth);
//- const pageHeight = document.querySelector('.page').style.height;
//- console.log(pageWidth , pageHeight);
fc.addEventListener('click', function() {
document.querySelector('.spinecover').classList.toggle('hide');
document.querySelector('.backcover').classList.toggle('hide');
//- document.querySelector('.background').classList.toggle('hide');
//- document.querySelector('.spread').setAttribute('style' , 'width: 148mm' );
//- document.querySelector('.frontcover').setAttribute('style', 'grid-area: back');
//- document.querySelector('.background').setAttribute('style', ' -webkit-mask-size: 220%; -webkit-mask-position: -128mm -10mm;');
document.querySelector('.spread').classList.toggle('nobefore');
document.querySelector('.spread').classList.toggle('noafter');
//- document.querySelector('.background').classList.toggle('hide');
document.querySelector('.spread').classList.toggle('modif');
document.querySelector('.frontcover').classList.toggle('modif');
document.querySelector('.background').classList.toggle('modif');
});
bc.addEventListener('click', function() {
document.querySelector('.spinecover').classList.toggle('hide');
document.querySelector('.frontcover').classList.toggle('hide');
//- document.querySelector('.background').classList.toggle('hide');
//- document.querySelector('.spread').setAttribute('style' , 'width: 148mm' );
//- document.querySelector('.frontcover').setAttribute('style', 'grid-area: back');
//- document.querySelector('.background').setAttribute('style', ' -webkit-mask-size: 220%; -webkit-mask-position: -128mm -10mm;');
document.querySelector('.spread').classList.toggle('nobefore');
document.querySelector('.spread').classList.toggle('noafter');
//- document.querySelector('.background').classList.toggle('hide');
document.querySelector('.spread').classList.toggle('modif');
document.querySelector('.backcover').classList.toggle('modif');
document.querySelector('.background').classList.toggle('modif');
});
script.
//- clone the title on the spine cover
const title = document.querySelector("#booktitle");
const spinetitle = document.querySelector("#spinetitle");
title.addEventListener('keyup', function() {
const content = title.textContent;
spinetitle.textContent = content;
})
script.
//- image adder
const illus = document.querySelector('#backimage');
console.log(illus);
var
input = document.querySelector('#imgback'),
image = document.querySelector('#back-demo'),
cover = document.querySelector('.background');
input.addEventListener('drop', onFileInput);
input.addEventListener('change', onFileInput);
function onFileInput(e) {
var
reader = new FileReader(),
files = e.dataTransfer ? e.dataTransfer.files : e.target.files,
i = 0;
reader.onload = onFileLoad;
while (files[i]) reader.readAsDataURL(files[i++]);
}
function onFileLoad(e) {
var data = e.target.result;
//- image.src = data;
cover.style.background = ' url(' + data + ')'
}
const posX = document.querySelector('#imgX');
const posY = document.querySelector('#imgY');
const size = document.querySelector('#imgSize');
const pattern = document.querySelector('#pattern');
posX.addEventListener('mousemove', function() {
console.log(posX.value);
cover.style.backgroundPositionX = posX.value + '%';
});
posY.addEventListener('mousemove', function() {
console.log(posY.value);
cover.style.backgroundPositionY = posY.value + '%';
});
size.addEventListener('mousemove', function() {
console.log(size.value);
cover.style.backgroundSize = size.value + '%';
});
pattern.addEventListener('click', function() {
if (window.getComputedStyle(cover).backgroundRepeat === 'repeat') {
cover.style.backgroundRepeat = 'no-repeat';
}
else if (window.getComputedStyle(cover).backgroundRepeat === 'no-repeat'){
cover.style.backgroundRepeat = 'repeat';
}
console.log(cover.style.backgroundRepeat)
});
<script src="js/helpers.js"></script>
<script src="js/ui.js"></script>
<script src="js/page.js"></script>
<script src="js/colors.js"></script>
<script src="js/export.js"></script>
<script src="js/content.js"></script>
\ No newline at end of file
This diff is collapsed.
<div class="buttons">
<div id="size">
<label for="width">page width</label>
<input class="size" id="width" type="text" name="page-width" value="148mm"/>
<label for="height">page height</label>
<input class="size" id="height" type="text" name="page-height" value="210mm"/>
<label for="spine">spine width</label>
<input class="size" id="spine" type="text" name="spine-width" value="20mm"/>
</div>
<hr/>
<div class="colors" style="margin-top: 2em;">
<div class="color" id="text-area">
<label for="color-text">Text color</label>
<input id="text" type="color" name="color-text" value="#ffffff"/>
</div>
<div class="color" id="back-area">
<label for="color-back">Back color</label>
<input id="back" type="color" name="color-back" value="#c4e3f3"/>
</div>
<div class="color" id="front-area">
<label for="color-front">Spine color</label>
<input id="front" type="color" name="color-front" value="#495776"/>
</div>
</div>
<hr/>
<h2>cover image</h2>
<input id="imgback" type="file" accept="image/*"/>
<hr/>
<h2>size and positions</h2>
<label for="position horizontal">horizontal</label>
<input id="imgX" type="range" name="position horizontal" max="200" min="-200" step="10"/>
<label for="position vertical">vertical</label>
<input id="imgY" type="range" name="position vertical" max="200" min="-200" step="10"/>
<label for="size">image size</label>
<input id="imgSize" type="range" name="size" max="200" min="1" step="3"/>
<button id="pattern" style="margin-bottom: 5em;"> REPEAT</button>
<hr/>
<button id="fc">front </button>
<button id="bc">BACK</button>
</div>
\ No newline at end of file
.buttons
#size
label(for="width") page width
input.size#width(type='text' name="page-width" value="148mm")
label(for="height") page height
input.size#height(type='text' name="page-height" value="210mm")
label(for="spine") spine width
input.size#spine(type='text' name="spine-width" value="20mm")
hr
.colors(style="margin-top: 2em;")
#text-area.color
label(for="color-text") Text color
input#text(type="color" name="color-text" value="#ffffff")
#back-area.color
label(for="color-back") Back color
input#back(type="color" name="color-back" value="#c4e3f3")
#front-area.color
label(for="color-front") Spine color
input#front(type="color" name="color-front" value="#495776")
hr
h2 cover image
//- img#back-demo(alt="" src="img/back.jpg")
input#imgback(type="file" accept="image/*")
hr
h2 size and positions
label(for="position horizontal") horizontal
input#imgX(type="range" name="position horizontal" max="200" min="-200" step="10")
label(for="position vertical") vertical
input#imgY(type="range" name="position vertical" max="200" min="-200" step="10")
label(for="size") image size
input#imgSize(type="range" name="size" max="200" min="1" step="3")
button#pattern(style="margin-bottom: 5em;") REPEAT
hr
button#fc front
button#bc BACK
......@@ -15,22 +15,22 @@
#colors.buttons.drag.hide
.handle Colors
.colors
#back-area.color
label(for='color-back') Background/Tint color
input#back(type='color', name='color-back', value='#1aa4cf')
#text-area.color
label(for='color-text') Text color
input#text(type='color', name='color-text', value='#eaeaea')
#back-area.color
label(for='color-back') Tint color
input#back(type='color', name='color-back', value='#1aa4cf')
#front-area.color
label(for='color-front') Spine color
input#front(type='color', name='color-spine', value='white')
#spine-text.color
label(for='color-front') Spine text color
input#front(type='color', name='color-spine-text', value='#fff')
#logo-back.color
label(for='color-back') Logo back color
input#front(type='color', name='color-logo-back', value='white')
hr
#front-area.color
label(for='color-front') Spine color
input#front(type='color', name='color-spine', value='white')
hr
button#colorMask Tint filter
#background.buttons.drag.hide
.handle Background
......
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/cover.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!-- for a spread cover, the page should be equal to : back cover + spine + front cover -->
<div class="spread">
<div class="backcover"></div>
<p>This book is CC-BY-SA.
<br/>For more information on the Cabbage Tree Method, see:
<br/><a href="https://www.adamhyde.net">https://www.adamhyde.net</a> and <a href="https://www.cabbagetree.org">https://www.cabbagetree.org</a></p>
<p>This book is version 0.2</p>
<div class="spine">
<!-- spine is only blue -->
</div>
<div class="frontcover">
<div class="trees"></div>
<img src="img/coverillust_wb.jpg" alt="">
<div class="tint"></div>
<p class="version">version 0.2</p>
<hgroup>
<h1>The Cabbage <br/>Tree Method</h1>
<p>Open Source Collaborative Product Development</p>
</hgroup>
</div>
<!-- lets try to use masking for an example -->
</div>
</body>
</html>
......@@ -27,17 +27,13 @@
<div class="buttons drag hide" id="colors">
<div class="handle">Colors</div>
<div class="colors">
<div class="color" id="text-area">
<label for="color-text">Text color</label>
<input id="text" type="color" name="color-text" value="#eaeaea"/>
</div>
<div class="color" id="back-area">
<label for="color-back">Tint color</label>
<label for="color-back">Background/Tint color</label>
<input id="back" type="color" name="color-back" value="#1aa4cf"/>
</div>
<div class="color" id="front-area">
<label for="color-front">Spine color</label>
<input id="front" type="color" name="color-spine" value="white"/>
<div class="color" id="text-area">
<label for="color-text">Text color</label>
<input id="text" type="color" name="color-text" value="#eaeaea"/>
</div>
<div class="color" id="spine-text">
<label for="color-front">Spine text color</label>
......@@ -46,8 +42,12 @@
<div class="color" id="logo-back">
<label for="color-back">Logo back color</label>
<input id="front" type="color" name="color-logo-back" value="white"/>
<hr/>
</div>
<div class="color" id="front-area">
<label for="color-front">Spine color</label>
<input id="front" type="color" name="color-spine" value="white"/>
</div>
<hr/>
<button id="colorMask">Tint filter</button>
</div>
</div>
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Demo for the icons</title>
<link rel="stylesheet" href="css/cover.css" type="text/css"/>
<script src="js/interact.js" type="text/javascript"></script>
<script src="js/html2canvas.js" type="text/javascript"></script>
<style>@page {size: 357mm 250mm}</style>
</head>
<body>
<div class="icon-bar ui">
<div class="icon active" id="bt-page" data-pane="page">Page</div>
<div class="icon" id="bt-colors" data-pane="colors">Colors</div>
<div class="icon" id="bt-background" data-pane="background">Background</div>
<div class="icon" id="bt-export" data-pane="export">Export</div>
</div>
<div class="buttons drag" id="page">
<div class="handle">Page format</div>
<label for="width">page width</label>
<input class="size" id="width" type="text" name="page-width" value="148mm"/>
<label for="height">page height</label>
<input class="size" id="height" type="text" name="page-height" value="210mm"/>
<label for="spine">spine width</label>
<input class="size" id="spine" type="text" name="spine-width" value="20mm"/>
</div>
<div class="buttons drag hide" id="colors">
<div class="handle">Colors</div>
<div class="colors">
<div class="color" id="text-area">
<label for="color-text">Text color</label>
<input id="text" type="color" name="color-text" value="#ffffff"/>
</div>
<div class="color" id="back-area">
<label for="color-back">Back color</label>
<input id="back" type="color" name="color-back" value="#c4e3f3"/>
</div>
<div class="color" id="front-area">
<label for="color-front">Spine color</label>
<input id="front" type="color" name="color-front" value="#495776"/>
</div>
<div class="color" id="spine-text">
<label for="color-front">Spine text color</label>
<input id="front" type="color" name="color-spine-text" value="#495776"/>
</div>
</div>
</div>
<div class="buttons drag hide" id="background">
<div class="handle">Background </div>
<h2>cover image</h2>
<input id="imgback" type="file" accept="image/*"/>
<label for="position horizontal">horizontal</label>
<input id="imgX" type="range" name="position horizontal" max="1000" min="-1000" step="1"/>
<label for="position vertical">vertical</label>
<input id="imgY" type="range" name="position vertical" max="1000" min="-1000" step="1"/>
<label for="size">image size</label>
<input id="imgSize" type="range" name="size" max="2000" min="50" step="3"/>
<button id="pattern" style="margin-bottom: 5em;"> make pattern</button>
</div>
<div class="buttons drag hide" id="export">
<div class="handle">export</div>
<button id="fc">front </button>
<button class="hide" id="sc">spread</button>
<button id="generator">GENERATE THE JPG</button>
<p><a id="download" download="YourFileName.jpg">Download as image</a></p>
</div>
<div class="page" id="page">
<div class="spread">
<div class="background" style="background-image: url('img/11121355345_3797d16e6b_o.jpg');"></div>
<div class="backcover" id="back">
<!-- <div class="logos draggable" id="drag-logos"><img class="logo" src="img/logo/community_partnership.jpg"/><img class="logo" src="img/logo/community_works.jpg"/><img class="logo" src="img/logo/esrc.png"/><img class="logo" src="img/logo/leverhulme_trust_logo.jpg"/><img class="logo" src="img/logo/mothers_uncovered.jpg"/><img class="logo" src="img/logo/sheffield.png"/><img class="logo" src="img/logo/sussex.png"/><img class="logo" src="img/logo/university_brighton.png"/></div> -->
<p contenteditable="true" spellcheck="false">This is where you can add some stuff on the back cover</p>
</div>
<div class="spinecover" id="spine">
<p id="spinetitle" contentEditable="true" spellcheck="false">New Practices for New Publics?</p>
</div>
<div class="frontcover" id="frontcover">
<hgroup id="drag-titles">
<h1 id="booktitle" contentEditable="true" spellcheck="false">New Practices for New Publics?</h1>
<p class="subtitle" contentEditable="true" spellcheck="false">Theories of social practice and the voluntary and community sector</p>
</hgroup>
</div>
</div>
</div>
<script src="js/helpers.js"> </script>
<script src="js/ui.js"> </script>
<script src="js/page.js"> </script>
<script src="js/colors.js"> </script>
<script src="js/export.js"> </script>
<script src="js/content.js"> </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Demo for the icons</title>
<link rel="stylesheet" href="css/paper.css" type="text/css"/>
</head>
<body>
<figcaption class="image-caption"></figcaption>
<div class="buttons">
<button id="button-paper" data-layer="paper">paper</button>
<button id="button-background" data-layer="background">background</button>
<button id="button-mask" data-layer="mask">Black & white illustration</button>
<button id="button-frontMask" data-layer="frontMask">color mask for the illustration</button>
<button id="button-backcover" data-layer="backcover">backcover</button>
<button id="button-frontcover" data-layer="frontcover">frontcover</button>
<button id="button-spine" data-layer="spine">spine</button>
<button id="button-cropMark" data-layer="cropMark">cropMark</button>
<button id="what">Moving magic</button>
</div>
<figure><img class="hide" src="img/construct/paper.png" id="paper"/><img class="hide" src="img/construct/background.png" id="background"/><img class="hide" src="img/construct/mask.png" id="mask"/><img class="hide" src="img/construct/frontMask.png" id="frontMask"/><img class="hide" src="img/construct/backcover.png" id="backcover"/><img class="hide" src="img/construct/frontcover.png" id="frontcover"/><img class="hide" src="img/construct/spine.png" id="spine"/><img class="hide" src="img/construct/cropMark.png" id="cropMark"/>
</figure>
<script>
const inputs = document.querySelectorAll('.buttons div input');
function handleUpdate() {
const suffix = this.dataset.sizing || '';
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
</script>
<script>
const buttons = document.querySelectorAll('button');
function show(e) {
const layer = this.dataset.layer || "no-layer";
//- console.log(layer);
this.classList.toggle("active");
document.querySelector(`#${layer}`).classList.toggle("hide");
}
buttons.forEach(button => {
button.addEventListener('click', show);
});
const wtfbutton = document.querySelector('#what');
wtfbutton.addEventListener('click', function() {
const lol = document.querySelectorAll('img');
console.log(lol);
for (var i = 0; i < lol.length; i++) {
lol[i].classList.toggle("wtf");;
}
});
document.querySelector('#button-all').addEventListener('click', function() {
const Allbutton = document.querySelectorAll('button');
const lol = document.querySelectorAll('img');
for (var i = 0; i < lol.length; i++) {
lol[i].classList.addClass("hide");;
}
})
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
title Demo for the icons
link(rel="stylesheet" href="css/paper.css" type="text/css")