<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio</title>
<style>
body {
min-width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input {
margin: 10px;
}
</style>
</head>
<body>
<div class="text-btns">
<input type="text" name="name" id="name">
<input type="text" name="surname" id="surname">
</div>
<div class="radio-btns">
<input type="radio" name="shippingMethod" value="sdek" class="shippingMethod" checked>
<input type="radio" name="shippingMethod" value="rupost" class="shippingMethod">
<input type="radio" name="shippingMethod" value="pickup" class="shippingMethod">
</div>
<script>
const inputName = document.getElementById('name');
const inputSurname = document.getElementById('surname');
[...document.querySelectorAll('[name="shippingMethod"]')].map((method) => {
method.addEventListener('change', () => {
if (method.value === 'pickup') {
nameCurrentValue = inputName.value;
surnameCurrentValue = inputSurname.value;
inputName.value = inputSurname.value = 'самовывоз';
} else {
inputName.value = nameCurrentValue;
inputSurname.value = surnameCurrentValue;
}
});
});
</script>
</body>
</html>
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2",
"@popperjs/core": "^2.8.3",
"animate.css": "^3.7.0",
"bootstrap": "^5.0.0-beta2",
"caniuse-lite": "^1.0.30001168",
"chart.js": "^2.9.4",
"font-awesome": "^4.7.0",
"fslightbox": "^3.2.2",
"highlight.js": "^10.6.0",
"jquery": "^3.5.1",
"simplebar": "^5.3.0",
"swiper": "^6.4.11",
"wow.js": "^1.2.2"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.10",
"babel-loader": "^8.2.2",
"browser-sync": "^2.26.13",
"browserslist": "^4.16.3",
"del": "^6.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-cache": "^1.1.2",
"gulp-clean-css": "^4.3.0",
"gulp-htmlmin": "^5.0.1",
"gulp-if": "^3.0.0",
"gulp-imagemin": "^6.2.0",
"gulp-newer": "^1.4.0",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^1.4.0",
"gulp-rigger": "^0.5.8",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^2.6.5",
"imagemin-jpeg-recompress": "^6.0.0",
"imagemin-pngquant": "^8.0.0",
"terser-webpack-plugin": "^4.2.3",
"webpack": "^4.46.0",
"webpack-stream": "^6.1.1"
}// html build
function html_build () {
return gulp.src(path.src.html) // get all html files
.pipe(plumber()) // gulp plugins bug tracking
.pipe(rigger()) // templates import
.pipe(gulpif(prodMode, htmlMin({
sortAttributes: true,
sortClassName: true,
collapseWhitespace: true
})))
.pipe(gulp.dest(path.build.html)) // build html
.pipe(browserSync.reload({ stream: true })); // browser-sync reload
}
import './Header.scss';
import React from 'react';
function Header() {
let menu = React.createRef();
let menuBtn = React.createRef();
let hamburgerMenu = React.createRef();
console.log('menuBtn: ', menuBtn);
return (
<>
<div className="menu" ref={ menu }>
<div className="hamburger-wrapper" ref={ menuBtn }>
<div className="hamburger-menu" ref={ hamburgerMenu }></div>
</div>
{ /* ... */}menu: Object { current: null } Header.js:11
menuBtn: Object { current: null }Header.js:12
hamburgerMenu: Object { current: null }import { useRouteMatch, Link, useParams } from 'react-router-dom';
function UserId() {
let { userName } = useParams();
let userNameСap = userName[0].toUpperCase() + userName.substring(1);
let match = useRouteMatch();
let usersLink = match.url.split('/')[1];
let userNameImg = './img/' + useParams().userName +'.jpg'; // ИМПОРТ В КОМПОНЕНТЕ НЕ ДЕЛАЕТСЯ! КАК БЫТЬ???
return (
<>
<div className="container">
<h1>User: { userNameСap }</h1>
<img src={ userNameImg } alt={ userNameСap }/>
<Link to={ `/${usersLink}` }>Назад</Link>
</div>
</>
);
}
export default UserId;