• Как заменять блок div.content на главное странице блоком div.content из другого .html файла?

    @TheOnlyFastCoder2
    Используйте LocalStorage , т.е вам нужно загружать свои данные и выгружать (Удалять) на свои страницы .
    Так вы можете жонглировать своими данными между вашими страницами .
    А так советую вам использовать nuxt для Vue шикарный framework . Или nextJS или nestJS для react или angular
    Ответ написан
    Комментировать
  • Sublime не регистрирует command для плагина. Почему?

    @TheOnlyFastCoder2 Автор вопроса
    Решение :
    У классов не должно быть нижнее подчеркивание в названиях , всегда должно быть на конце слово Command.
    А вызов команды осуществляется путем нижнего подчеркивания и на конце не должно быть слово Command .
    например:
    class CompilerCommand() -> .run_command("compiler") 
    class HelperCompilerCommand() -> .run_command("helper_compiler") 
    class CompilerHelperCommand() -> .run_command("compiler_helper")
    Ответ написан
    Комментировать
  • Как создать универсальную кнопку?

    @TheOnlyFastCoder2
    Я не понимаю , зачем вам нужно менять местами ссылку с кнопкой , в чем смысл ?
    Я понимаю вы хотите сделать кнопку одну но для разных целей , но так не очень хорошо делать как по мне

    //css
    .submit.myStyles1 {
    }
    .submit.myStyles2 {
    }
    .submit.myStyles3 {
    }


    const myfunction1 = () => {}
    const myfunction2 = () => {}
    
    
    const PhoneBTN = ({phone}) => (
      <a className="phone" href={`tel:${phone}`}>
        <img src="./Assets/Phone.svg" alt="" />
      </a>
    )
    
    const Button = ({type,text}) => {
      
      return (
        type === "phone" ? 
        <PhoneBTN {...{phone:text}} onClick={myfunction1}/>: 
        <button className="submit myStyles" onClick={myfunction2}>{text}</button> 
      )
    } 
    
    const render = () => (
      <Button {...{type:"phone",text:""}}/>
    )
    Ответ написан
    Комментировать
  • Почему исчезает контент при нажатии на пустую область?

    @TheOnlyFastCoder2
    Поменяйте свой код , на этот
    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') 
            } 
        }
    })
    Ответ написан
  • Как сгенерировать ссылку в React?

    @TheOnlyFastCoder2
    (Изменил ответ)
    //index.js
    import React from "react";
    import { render } from "react-dom";
    
    // import react router
    import { BrowserRouter, Link } from "react-router-dom";
    import toLinkParams from "./toLinkParams";
    
    const params = {
      pathname: "/signup",
      search: toLinkParams({
        lang: "ua",
        source: "3",
        offer: 1,
        country: "ua"
      })
    };
    
    const App = () => (
      <BrowserRouter>
        <div className="sans-serif">
          <Link to={params}>Button</Link>
        </div>
      </BrowserRouter>
    );
    
    render(<App />, document.getElementById("root"));


    //toLinkParams.js

    export default function toLinkParams(params) {
      return (
        "?" +
        Object.entries(params)
          .map((param) => {
            const [key, value] = param;
            return `${key}=${value}`;
          })
          .join("&")
      );
    }
    Ответ написан
  • Пробема с v-for, как связать два цикла v-for?

    @TheOnlyFastCoder2
    у вас ошибки были в некоторых местах , попробуйте сейчас
    <template>
      <div className="container">
        <h1>Portfolio</h1>
        <ul class="portfolio__video-item">
            <li
                v-for="video in mainVideo"
                v-bind:key="video.id"
                class="portfolio__video-item__subitem"
            >
                <img v-bind:src="video.img" />
                <div class="portfolio__video-descr">
                    <div class="portfolio__video-descr__title">
                        {{ video.title }}
                    </div>
                    <div class="portfolio__video-descr__subtitle">
                        <span>
                            {{ video.subtitle }}
                        </span>
                    </div>
                </div>
            </li>
        </ul>
    
        <div
            class="modal"
            v-for="modal in modals"
            v-bind:key="modal.id"
        >
            <div class="modal__close">&times;</div>
            <div class="modal__wrapper" >
            <div class="modal__player">
                <iframe
                    class="modal__player-item"
                    v-bind:src="modal.url"
                ></iframe>
            </div>
                <div class="modal__descr-block">
                    <h2 class="modal__descr-block__subtitle">
                    <span>{{ modal.title }}</span>
                    </h2>
                    <div class="modal__descr-block__descr">
                        <span>{{ modal.description }}</span>
                    </div>
                </div>
            </div>
         </div>
      </div>
      
    </template>
    Ответ написан
  • Плавный скролл к секциям, почему не работает сама плавность?

    @TheOnlyFastCoder2
    Я так реализовал плавную прокрутку , на ванильном js. Надеюсь , что помог вам
    Ответ написан
    1 комментарий
  • Как в js посчитать цифры с 0 до числа с фиксированной скоростью?

    @TheOnlyFastCoder2
    Зависимости от расстояния регулируйте delay , чтобы погрешность была не велика
    надеюсь я вам помог) поменяйте значение num1=30000 num2=20 вам можно поставить delay 0.6
    чтобы узнать необходимый диапазон delay , нужно записать такую формулу num2 / num 1 * 1000 = 0.6 можно выбрать все значения до 0.6

    ____ШкОлЬНики:
    Мне математика и физика не нужна :))____ результат ->

    60f98a7c19ea8171048428.png
    Мне интересно , а для чего вам этот алгоритм понадобился ?
    Ответ написан
  • Как правильно настроить слайдер / сделать проверку на класс?

    @TheOnlyFastCoder2
    Просто добавьте своей оболочке или телу слейдера overflow: hidden;
    .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);
    }
    Ответ написан
  • Является ли такой код плохим?

    @TheOnlyFastCoder2
    Вроде по максимуму сократил и улучшил.
    Если вы как-нибудь исправите(улучшите) названия своих ключей , код будет еще лучше смотреться
    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)
    Ответ написан
  • Как сделать, чтобы после нажатия на пункт смена активного элемента происходила по-другому?

    @TheOnlyFastCoder2
    вот пример на ванильном js . Надеюсь , что я вам помог
    Ответ написан
    Комментировать
  • Как заскролить страницу до определонго блока?

    @TheOnlyFastCoder2
    1.Способ через js (ванильный)

    2. Способ
    как было выше сказано можно задать контейнеру свойство scroll-behavior: smooth;
    Обязательно добавьте ссылки на id блока , в данном случаи секции
    <nav>
      <ul> 
        <li class="sectButton"> <a href="#one">1</a></li>
        <li class="sectButton"> <a href="#two">2</a> </li>
        <li class="sectButton"> <a href="#three">3</a></li>
        <li class="sectButton"> <a href="#four">4</a></li>
      </ul>
    </nav>
    <main>
      <div class="main_wrapper" style="scroll-behavior: smooth;">
        <section id="one">1</section>
        <section id="two">2</section>
        <section id="three">3</section>
        <section id="four">4</section>
      </div>
    </main>
    Ответ написан
    Комментировать
  • Как можно избежать дублирование кода?

    @TheOnlyFastCoder2
    Что то вроде этого : https://codepen.io/theonlyfastcoder2/pen/JjNJXyv ?
    Вам всего-лишь нужно изменить дизайн этой менюшки , и изменить или добавить теги li в menu-lowerNav_ul
    в принципе на этом все.
    Ответ написан
  • Почему компонент рендерится дважды? Проблема в codesandbox?

    @TheOnlyFastCoder2
    Может быть вы хотели сделать что то подобное ?
    import React, { useState } from "react";
    
    export default function App() {
      let [getID,setID] = useState(0);
      return (
        <>
          <p> {getID} </p>
          <button onClick={ () => setTimeout(() => setID(getID + 1),800)} > clickMe </button>
        </>
      )
    }


    или что то вроде этого

    import React, { useState } from "react";
    
    const MemoID = ({getID}) => {
      return Array.from(new Array(getID)).map( (_,i) => {
        return (<p key={i}> {i} </p>)
      })
    }
    
    export default function App() {
      let [getID,setID] = useState(0);
      return (
        <>
          <MemoID key={getID} {...{getID}}/>
          <button onClick={ () => setTimeout(() => setID(getID + 1),800)} > clickMe </button>
        </>
      )
    }
    Ответ написан
    Комментировать
  • Как сделать поочерёдное появление слов в ряд текста?

    @TheOnlyFastCoder2
    Прощу прощения но вы уже задавали такой вопрос , в предыдущий раз .
    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)
      })
    }
    Ответ написан
  • Почему XMLHttpRequest.getAllResponseHeaders() не показывает мои собственные кастомные заголовки?

    @TheOnlyFastCoder2
    Потому что getAllResponseHeaders() отображает заголовки получателя , которой дает вам доступ на запрос .
    Вот разъяснение из документации :


    XMLHttpRequest.getAllResponseHeaders ()

    Метод XMLHttpRequest getAllResponseHeaders () возвращает все заголовки ответов, разделенные CRLF, в виде строки или возвращает null, если ответ не был получен. Если произошла сетевая ошибка, возвращается пустая строка.


    60f3f52fc51c5007978695.png
    Ответ написан
    1 комментарий
  • Почему у меня не работает html-webpack-plugin?

    @TheOnlyFastCoder2
    Я могу скинуть вам полноценную настройку webpack , чтобы вы долго не мучились и смогли быстро начать свою разрабутку приложения
    /**** package.json ****/
    В свойстве devDependencies находятся список установленных пакетов .

    npm i -D yourPack
    {
      "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"
      }
    }

    /**** webpack.config.js ****/
    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'],
                },
            ]
        }
    }
    Ответ написан
    5 комментариев
  • Как кастомизировать ютуб плеер?

    @TheOnlyFastCoder2
    Для этого есть полноценный API для Youtube Iframe. Вот ссылка:
    https://developers.google.com/youtube/iframe_api_r...
    Ответ написан
    1 комментарий
  • Зачем вообще нужен FileSystem API?

    @TheOnlyFastCoder2
    Вместо FileSystem API можно использовать new FileReader(); он позволяет загружать и читать файл , без
    каких-нибудь затруднений . Но если же вы хотите перезаписать файл или создать новый , то вам не обойтись от использования серверной части вместе с библиотекой fs для Nodejs
    <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)


    обратиться к серверу можно с помощью библиотеки axios
    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)
    Ответ написан
    Комментировать
  • Почему не работает export, import js?

    @TheOnlyFastCoder2
    В ванильном js не реализованы import и export , вам нужно тогда использовать какие-нибудь сборщики как webpack или gulp .

    Если вам этот подход не нравится , тогда есть лишь один вариант:
    Нужно подключить файлы по очереди , чтобы вы смогли использовать свои функции и переменные в файле file1.js из файла file2.js
    <script type="javascript/text" src="file1.js"></script>
    <script type="javascript/text" src="file2.js"></script>
    Ответ написан
    Комментировать