const buttons = document.querySelectorAll('ul.sidebar-menu > li');
const divs = document.querySelectorAll('div.services-info>div.content>div');
buttons.forEach( (btn,i) => {
btn.onclick = _ => {
for(let j = divs.length; j--;) {
const divsName = divs[j].classList[0];
divsName == btn.id ?
divs[j].classList.add('visible'):
divs[j].classList.remove('visible')
}
}
})
.slider {
width: 100%;
display: flex;
justify-content: center;
overflow:hidden;
}
или
.slider-wrapper {
overflow:hidden;
max-width: 800px;
width: 100%;
height: 120px;
position: relative;
box-shadow: 10px 10px 44px -10px rgba(0,0,0,0.75);
}
const SECTIONS = ['top','bottom','head','shoes','bag','accs',];
const prepareShareItems = ({person,items}) => {
for (var i = 0 , res = {} ; i < SECTIONS.length; i++) {
const {slide,list} = person[SECTIONS[i]];
Object.assign(res,{[SECTIONS[i]]: items.find((item) => item.id === list[slide]).image})
}
return res;
};
prepareShareItems(store.getState().globals)
span {
transition: 1s;
opacity: 0;
}
<h1 id="giveText"></h1>
const giveText = document.getElementById("giveText")
const myTEXT = "задайте свой текст";
window.onload = () => {
myTEXT.split(" ").forEach( (word,i) => {
giveText.innerHTML += ` <span>${word}</span>`
setTimeout( () => {
giveText.children[i].setAttribute("style","opacity:1")
},(i+1)*600)
})
}
{
"name": "yourProject",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack serve --mode development",
"build": "webpack serve --mode production",
"watch": "webpack serve --mode development --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.2.5",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"node-sass": "^6.0.0",
"sass-loader": "^11.1.1",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.7",
"vue-loader-plugin": "^1.3.0",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.37.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"
}
}
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
mode:'development',
devtool: false,
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
entry: ["./src/index.js","./src/assets/js/main.js"],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HTMLWebpackPlugin({template: "./src/index.html"}),
new VueLoaderPlugin(),
],
resolve: {
extensions:['.js','.scss','.vue', '.svg', '.png', '.jpg','...'],
alias: {
vue: 'vue/dist/vue.js'
},
},
module: {
rules: [
{
test:/\.vue$/,
use: ['vue-loader']
},
{
test: /\.scss$/,
use: ['vue-style-loader','style-loader','css-loader','sass-loader'],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [{
loader:'url-loader',
options: {
name: '[name].[ext]',
outPath: './src/assets/imgs',
publicPath: './src/assets/imgs',
emitFile: true,
esModule: false,
}
}]
},
{
test: /\.(ttf|woff|woff2|eot)/,
use: ['file-loader'],
},
]
}
}
<input id="loaderFile" type="file" >
loaderFile.addEventListener('change', ({target}) => {
let file = target.files[0];
const loader = new FileReader();
if((/(.json)$/).test(file.name)) {
loader.readAsText(file)
loader.onload = () => {
const res = JSON.parse(loader.result);
console.log(res)
}
}
})
const express = require("express");
const cors = require("cors");
const app = express();
const fs = require("fs-extra");
app.use(cors())
app.use(express.json({limit: '4MB'}))
app.all("/", function(req,res) {
if(req.body.name != undefined){
res.send("It's okay")
const name = req.body.name.replace(/(\.)/gi,"");
if(!fs.existsSync(`./files/${name}`)) {
fs.mkdir(`./files/${name}`, function(el){
fs.writeFileSync(`./files/${name}/${name}.srt.json`, JSON.stringify(req.body.DOM) )
});
}
else {
fs.writeFileSync(`./files/${name}/${name}.srt.json`, JSON.stringify(req.body.DOM) )
}
}
})
app.listen(8080)
const url = "http://localhost:8080/";
const loadedFile = JSON.stringify(loadSubtittles);
const savedSub = JSON.stringify(saveSubtittles);
const data = {
name: target.dataset.file,
DOM: {
"loadFile": loadedFile,
"saveSubtittles": savedSub
}
}
axios.post(url,data,{
headers:{
"Content-Type":"application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers" : "Origin, X-Requested-With, Content-Type, Accept"
},
})
.then ( res => res)
.catch( err => err)
<script type="javascript/text" src="file1.js"></script>
<script type="javascript/text" src="file2.js"></script>
.background {
position: absolute;
top:0; left:0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
img {
width: 100vw;
height: 100vh;
}
}
<div class="background">
<img src="https://avtovesti.com/wp-content/uploads/2016/06/ferrari-488-gtb-tuning-novitec-rosso-9.jpg" alt="">
</div>
<button>sdfsdfsdf</button>
<div id="block">hover me</div>
function getHidden (hide , seconds , animation) {
block.setAttribute('style',`
width:100px;
height: 50px;
cursor:pointer;
background: ${hide ? "red" : "none"};
transition: ${seconds}s ${animation};
`)
}
block.addEventListener('mouseover' , () => getHidden(true,1,"ease-in") )
block.addEventListener('mouseout' , () => getHidden(false,1,"ease-out") )
<span>
<input id="textarea_1" type="text" placeholder="до">
<input id="textarea_2" type="text" placeholder="после">
<p id="textarea_after"> </p>
</span>
<button id="button">найти</button>
button.onclick = () => {
textarea_after.textContent = findChanged(textarea_1.value,textarea_2.value)
}
function findChanged (orig,changed) {
[orig,changed] = [orig,changed].map((text) => text.split(""))
return changed.filter( (char) => orig.indexOf(char) === -1 ).join("")
}
<div>
<audio id="audio" controls>
<source type="audio/mp3" src="https://dnl.megapesni.com/get/online/EWdZCiMIEXxZ3O4cLtOqLg/1626470796/ae17d566/2021/05/Galibri & Mavik - Федерико Феллини.mp3">
</audio>
</div>
<button id="button"> clickMe </button>
button.onclick = () => {
if( audio.paused === false ) {
audio.pause()
alert("audio остановлено")
}
else {
audio.play()
alert("audio продолжено")
}
}