主页 / user-331312

Михаил Камахин's questions

Martin Hope
Михаил Камахин
Asked: 2024-03-15 06:47:01 +0800 CST
  • 5

我有一个使用 puppeteer 包的 .ts 文件。我可以使用 tsx 包运行代码，但无法将 .ts 文件构建为 .js 文件。我检查了，完全删除了 tsconfig.json 中的所有内容，并且在构建过程中没有任何损坏（错误没有改变）。就好像 tsс 根本看不到 tsconfig.json.
当我尝试构建该文件时，出现以下错误：

node_modules/puppeteer/lib/types.d.ts:31:5 - error TS18028:
Private identifiers are only available when targeting ECMAScript 2015 and higher.

如何摆脱这个错误？好吧，或者只是如何将这个 .ts 文件构建到 .js 文件中。

我将附上配置：

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "module": "ES2022",
        "target": "ES2022",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "importHelpers": true,
        "lib": [
      "ES2022",
      "dom"
    ]
    },
    "exclude": [
        "src/models",
        "node_modules"
    ]
}

包.json

{
  "name": "sport-parsing",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "tsx ./src/index.ts",
    "build": "tsc ./src/index.ts --outDir ./dist"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "puppeteer": "^22.4.1"
  },
  "devDependencies": {
    "@types/node": "^20.11.27",
    "pkg": "^5.8.1",
    "tsx": "^4.7.1",
    "typescript": "^5.4.2"
  }
}

在 Node.js v20.11.1 上运行

node.js
Martin Hope
Михаил Камахин
Asked: 2024-03-06 23:20:20 +0800 CST
  • 5

我无法从后端服务访问 postgres。我检查了pgadmin，它与postgres一起成功运行，没有任何问题（即postgres已成功启动）。但是NestJs无法与postgress通信。我尝试在本地运行 NestJs，并在 Docker 中运行 postgress 和 pgadmin，在本例中，NestJs 可以访问 postgres。但容器内部无法通信。
我什至指定了depends_on: -postgres ，但没有任何效果。

什么可能导致错误？

与 postgres 没有连接的标准错误示例：

backend  | [Nest] 31  - 03/06/2024, 3:23:52 PM
ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...

docker-compose.yml

version: "3.9"

services:
  postgres:
    container_name: chat
    image: postgres:16.2
    env_file:
      - ./api-chat/.env
    volumes:
      - ./api-chat/postgres_data:/var/lib/postgresql/data/
    ports:
      - "5432:5432"

  pgadmin:
    container_name: pgadmin
    image: dpage/pgadmin4:8.3
    environment:
      PGADMIN_DEFAULT_EMAIL: [email protected]
      PGADMIN_DEFAULT_PASSWORD: root
    ports:
      - "5050:80"

  backend:
    container_name: backend
    build:
      context: ./api-chat
      dockerfile: Dockerfile
    depends_on:
      - postgres
    restart: always
    env_file:
      - ./api-chat/.env
    command: npm run start:dev
    volumes:
      - ./api-chat:/docker-backend
    ports:
      - "3000:3000"

Dockerfile

# Use the official Node.js image
FROM node:18.14.0

# Set the working directory
WORKDIR /usr/src/docker-backend

# Копирование package.json to the container
COPY ./package.json .

# Если package-lock.json существует, копировать его в контейнер
COPY ./package-lock.json* .

# Установка зависимостей
RUN npm install

# Установка global nest cli
RUN npm install -g @nestjs/cli

# Копирование остальных файлов приложения в контейнер
COPY . .
docker
Martin Hope
Михаил Камахин
Asked: 2023-10-07 05:17:42 +0800 CST
  • 6

在 Chrome 演示中我发现了这段代码：

@supports(animation-timeline: view()) {
            @keyframes fade-in-on-enter--fade-out-on-exit {
                entry 0%  {
                    opacity: 0;
                    transform: translateY(100%);
                }
                entry 100%  {
                    opacity: 1;
                    transform: translateY(0);
                }
                exit 0% {
                    opacity: 1;
                    transform: translateY(0);
                }
                exit 100% {
                    opacity: 0;
                    transform: translateY(-100%);
                }
            }

            #list-view > ul > li {
                animation: linear fade-in-on-enter--fade-out-on-exit;
                animation-timeline: view();
            }
        }

我没有在任何地方找到任何信息entry或exit文字，谁知道它是什么？

工作示例（Chrome 117）

*,
*::before,
*::after {
  box-sizing: border-box;
}

#list-view {
  height: 100%;
  overflow-y: auto;
}

ul {
  counter-reset: index;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#list-view {
  height: 80vh;
  width: 50vw;
  margin: 0 auto;
}

li {
  height: 5em;
  border: none;
  border-bottom: 1px solid #ddd;
  counter-increment: index;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1em;
}

li .name::after {
  content: " (item #" counter(index) ")";
  font-family: monospace;
  font-size: 0.8em;
}

li .name {
    flex: 1;
}

li .avatar {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 2.5em;
    height: 2.5em;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIzMnB4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iMzJweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojNDM0MzQ1O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9Cgkuc3Qxe2ZpbGw6IzQzNDM0NTt9Cjwvc3R5bGU+PGcgaWQ9IkxheWVyXzIiLz48ZyBpZD0iTGF5ZXJfMSI+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxLDE2YzAsNC42NTk5Ny0yLjEzLDguODI5OTYtNS40Njk5NywxMS41Nzk5NkMyMi45NCwyOS43MTk5NywxOS42MiwzMSwxNiwzMSAgICBzLTYuOTQtMS4yODAwMy05LjUzMDAzLTMuNDIwMDRDMy4xMywyNC44Mjk5NiwxLDIwLjY1OTk3LDEsMTZDMSw3LjcxOTk3LDcuNzE5OTcsMSwxNiwxUzMxLDcuNzE5OTcsMzEsMTZ6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTIyLjUsMTEuNWMwLDIuNDUyNjMtMS4zNjA2Nyw1LjQwNzk5LTMuMzgwMDIsNy4wMjg2NWMtMC4wMzQ2NSwwLjAyNjAzLTAuMDY5MjksMC4wNTItMC4xMDM5OSwwLjA3ODAyICAgIGMtMC45MDEzMiwwLjcwMi0xLjkyMzk3LDEuMTI2NjYtMy4wMTU5OCwxLjEyNjY2cy0yLjExNDY3LTAuNDI0NjYtMy4wMTU5OC0xLjEyNjY2Yy0wLjAzNDctMC4wMjYwMy0wLjA2OTM1LTAuMDUyLTAuMTA0LTAuMDc4MDIgICAgQzEwLjg2MDY3LDE2LjkwNzk5LDkuNSwxMy45NTI2Myw5LjUsMTEuNUM5LjUsNy45MTE5OSwxMi40MTE5OSw1LDE2LDVTMjIuNSw3LjkxMTk5LDIyLjUsMTEuNXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjUuNTMwMDMsMjcuNTI5OTd2MC4wNDk5OUMyMi45NCwyOS43MTk5NywxOS42MiwzMSwxNiwzMXMtNi45NC0xLjI4MDAzLTkuNTMwMDMtMy40MjAwNHYtMC4wNDk5OSAgICBjMC00LjE2OTk4LDIuNjcwMDQtNy43MTk5Nyw2LjQxMDAzLTljMC4wMjk5NywwLjAyMDAyLDAuMDcwMDEsMC4wNDk5OSwwLjA5OTk4LDAuMDgwMDIgICAgYzAuOTEwMDMsMC43MDAwMSwxLjkyOTk5LDEuMTIsMy4wMjAwMiwxLjEyczIuMTA5OTktMC40MTk5OCwzLjAyMDAyLTEuMTJjMC4wMjk5Ny0wLjAzMDAzLDAuMDcwMDEtMC4wNiwwLjA5OTk4LTAuMDgwMDIgICAgQzIyLjg1OTk5LDE5LjgxLDI1LjUzMDAzLDIzLjM1OTk5LDI1LjUzMDAzLDI3LjUyOTk3eiIvPjwvZz48L2c+PC9zdmc+");
    background-size: 100%;
}

@supports(animation-timeline: view()) {
  @keyframes fade-in-on-enter--fade-out-on-exit {
    entry 0% {
      opacity: 0;
      transform: translateY(100%);
    }
    entry 100% {
      opacity: 1;
      transform: translateY(0);
    }
    exit 0% {
      opacity: 1;
      transform: translateY(0);
    }
    exit 100% {
      opacity: 0;
      transform: translateY(-100%);
    }
  }
  
  #list-view>ul>li {
    animation: linear fade-in-on-enter--fade-out-on-exit;
    animation-timeline: view();
  }
}
<div id="list-view">
  <ul>
    <li>
      <span class="avatar"></span>
      <span class="name">Adam Argyle</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Adriana Jara</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Andre Bandarra</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Alexandra White</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Ali Spivak</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Anusmita Ray</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Barry Pollard</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Bramus Van Damme</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Brendan Kenny</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Carol Rivero</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Eiji Kitamura</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Ewa Gasperowicz</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">François Beaufort</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Jack J</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Jake Archibald</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Jecelyn Yeen</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Jeremy Wagner</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Joe Medley</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Kevin Lee</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Marc Doerrenhaus</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Mariko Kosaka</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Maud Nalpas</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Matthias Rohmer</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Milica Mihajlija</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Oliver Dunk</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Patrick Kettner</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Paul Kinlan</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Pete LePage</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Philip Walton</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Rachel Andrew</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Rick Viscomi</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Robert Nyman</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Rowan Merewood</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Sam Dutton</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Sebastian Benz</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Sofia Emelianova</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Thomas Steiner</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Una Kravets</span>
    </li>
  </ul>
</div>

css
Martin Hope
Михаил Камахин
Asked: 2023-07-29 04:10:11 +0800 CST
  • 5

我的 Angular 项目中有一个 utils.ts 文件，其中：

export const testFn = function(): void { };

export const testFn1 = function(): void {
  testFn();
};

我需要测试 node.js 中的功能（而不是在浏览器中）
我编写这样的测试：

  describe('Тестирование функции testFn1', () => {

    let moduleObj: any = null;

    beforeEach(() => {
      moduleObj = { testFn, testFn1 };
    });

    it('должна выполниться без ошибок', () => {
      expect(moduleObj.testFn1).not.toThrow();
    });

    it('должна вызывать функцию testFn', () => {
      spyOn<any>(moduleObj, 'testFn');
      moduleObj.testFn1();
      expect(moduleObj.testFn).toHaveBeenCalled();
    });

  });

但是第二次测试失败了，Error: Expected spy testFn to have been called
Jasmine没有看到testFn函数调用，我做错了什么？

angular
Martin Hope
Михаил Камахин
Asked: 2022-08-06 17:43:45 +0800 CST
  • 0

我需要做一张这样的桌子

在此处输入图像描述

但结果是这样的

在此处输入图像描述

我不明白我做错了什么

.table {
  border-collapse: collapse;
}

.table td,
.table th {
  border: 2px solid black;
  padding: 10px;
}
<table class="table">

  <thead>
    <tr>
      <th colspan="3">
        Форма для отправки фотографии на сайт
      </th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <th rowspan="5">Автор фотографии</th>
      <td rowspan="2">Фамилия И.О.</td>
      <td rowspan="2">
        <input type="text" placeholder="Введите ваше имя">
      </td>
    </tr>

    <tr>
      <td rowspan="2">Пол</td>
      <td>
        <label>
          <input type="radio" name="gender" id="">
          Женский
        </label>
      </td>
    </tr>

    <tr>
      <td>
        <label>
          <input type="radio" name="gender" id="">
          Мужской
        </label>
      </td>
    </tr>

    <tr>
      <td>Страна</td>
      <td>
        <select name="country">
          <option value="Россия">Россия</option>
          <option value="США">США</option>
        </select>
      </td>
    </tr>

  </tbody>

</table>

我以为线条应该这样排列

在此处输入图像描述

html table
Martin Hope
Михаил Камахин
Asked: 2022-09-04 21:08:26 +0800 CST
  • 1

如何编写类型以便在调用函数时domUtils.create('img')获得返回的类型HTMLImageElement？

export const domUtils = {
  toArray<T>(element: T): T[] {
    return [].slice.call(element);
  },
  get(selector: string): HTMLElement {
    return document.querySelector(selector);
  },
  create(element: string): HTMLImageElement | HTMLElement {
        if (element === 'img') {
            return document.createElement(element) as HTMLImageElement;
        }
    return document.createElement(element) as HTMLElement;
  }
};

const imageNode = domUtils.create('img');

在此处输入图像描述

javascript
Martin Hope
Михаил Камахин
Asked: 2022-08-13 00:31:22 +0800 CST
  • 0

在面试中，有人问我一个问题，浏览器中的选项卡最多可以分配多少内存。你怎么知道？

const blockContainerNode = document.querySelector('.block-container');
const inputNode = document.querySelector('.input');
const btnStartNode = document.querySelector('.btn-start');
const btnEndNode = document.querySelector('.btn-end');

btnStartNode.addEventListener('click', () => {
  const inputValue = Number(inputNode.value);
  if (!isNaN(inputValue) && inputValue > 0) {
    startAnimation(blockContainerNode, inputValue);
  }
});

btnEndNode.addEventListener('click', () => {
  blockContainerNode.textContent = '';
});

function startAnimation(blockContainerNode, quantityBlocks) {
  const blockNodes = new Array(quantityBlocks).fill(0).map((item, i) => {
    const divNode = document.createElement('div');
    divNode.classList.add('block');
    divNode.textContent = i;
    divNode.style.setProperty('--index', i);
    return divNode;
  });
  document.body.style.setProperty('--maxIndex', quantityBlocks);
  blockContainerNode.textContent = '';
  blockContainerNode.append(...blockNodes);
}
.block-container {
  --maxIndex: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 40px;
}

.block {
  --index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: anime 2s calc(var(--index) * -0.5s) infinite linear alternate-reverse;
}

@keyframes anime {
  0% {
    transform: rotate(0deg) scale(1) skew(60deg, 80deg);
  }
  100% {
    transform: rotate(360deg) scale(3);
  }
}
<input class="input" type="number" value="1000" placeholder="Количество блоков">
<button class="btn-start" type="button">Начать анимацию</button>
<button class="btn-end" type="button">Удалить</button>
<div class="block-container">
</div>

javascript
Martin Hope
Михаил Камахин
Asked: 2022-07-26 18:42:55 +0800 CST
  • 5

我可以通过 css 计算模块吗？
我有这个表达式y = -34 * abs(x - 0.5) + 17 (x 从 0 变为 1)
这是这样一个函数的图表，你可以看到：https ://www.desmos.com/calculator/ 4zdruwvikn?lang= Common crawl en
我想用 CSS 计算，可以吗？

const blockNode = document.querySelector('.block');

const y = blockNode.computedStyleMap().get('transform')[0].y;

document.write(`${y.value}${y.unit}`);
.block {
  --x: 0;
  --y: calc(1px + 2px);
  transform: translate(0px, var(--y));
  
  background-color: red;
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
}
<div class="block">
</div>

css
Martin Hope
Михаил Камахин
Asked: 2022-07-26 01:35:54 +0800 CST
  • 0

我在这里寻找并尝试启用平滑滚动条。
我似乎根据文档做所有事情，但没有任何效果

const mainNode = document.querySelector('#main');

Scrollbar.init(mainNode);
body {
  margin: 0;
}

section {
  height: 50vh;
}

section:nth-child(2n) {
  background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.7.4/smooth-scrollbar.min.js"></script>

<main class="main" id="main" data-scrollbar>

  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>

</main>

javascript
Martin Hope
Михаил Камахин
Asked: 2022-07-02 03:53:06 +0800 CST
  • 3

我想通过将 svg 作为单独的文件包含在 css 中来使用 CSS 伪类 ( :hover, )。:active

我做了这样的，
svg文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="./journey-svg.css"?>
<svg 
    version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    width="800"
    height="800"
    viewBox="0 0 800 800"
> 

    <defs>
        <style>
        
            #journey {
                fill: var(--journey, black);
            }

        </style>
    </defs>

    <path id="journey" alignment-baseline="" d="M227.699 1.199H25.301c-13.234 0-24 10.766-24 24v197.602c0 13.23 10.766 24 24 24h202.398c13.235 0 24-10.77 24-24V25.199c0-13.234-10.765-24-24-24zm0 24l.008 104.98-40.543-38.078c-2.836-2.66-6.468-4.125-10.226-4.125-4.571 0-8.848 2.145-11.739 5.883l-47.73 61.805c-1.547 2.004-4.027 3.199-6.637 3.199-1.781 0-3.461-.539-4.863-1.566l-31.016-22.653c-3.09-2.254-7.093-3.5-11.269-3.5-4.758 0-9.203 1.551-12.52 4.367l-25.863 21.934V25.199h202.398zm0 0M93.301 96.398c13.676 0 24.801-11.125 24.801-24.801 0-13.671-11.125-24.796-24.801-24.796-13.676 0-24.801 11.125-24.801 24.796 0 13.676 11.125 24.801 24.801 24.801zm0 0" />
</svg>

但是我无法使用 CSS 到达那里，它看不到 CSS 变量，例如：

<style>
    :root {
        --journey: red;
    }
</style>

<object type="image/svg+xml" data="./images/journey-svg/journey-svg.svg" width="400" height="400"> </object>

但是，如果我只是将 svg 直接插入到文件中，那么一切都会正常工作：

:root {
  --journey: red;
}

#journey-svg {
  --size: 100px;
  width: var(--size);
  height: var(--size);
}

#journey-svg:hover {
  --journey: green;
}

#journey-svg:active {
  --journey: orange;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="./journey-svg.css"?>
<svg 
    version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
  width="800"
    height="800"
    viewBox="0 0 250 250"
  id="journey-svg"
> 

    <defs>
        <style>
        
            #journey {
                fill: var(--journey, black);
        transition: fill 0.2s ease-in-out;
            }

        </style>
    </defs>

    <path id="journey" alignment-baseline="" d="M227.699 1.199H25.301c-13.234 0-24 10.766-24 24v197.602c0 13.23 10.766 24 24 24h202.398c13.235 0 24-10.77 24-24V25.199c0-13.234-10.765-24-24-24zm0 24l.008 104.98-40.543-38.078c-2.836-2.66-6.468-4.125-10.226-4.125-4.571 0-8.848 2.145-11.739 5.883l-47.73 61.805c-1.547 2.004-4.027 3.199-6.637 3.199-1.781 0-3.461-.539-4.863-1.566l-31.016-22.653c-3.09-2.254-7.093-3.5-11.269-3.5-4.758 0-9.203 1.551-12.52 4.367l-25.863 21.934V25.199h202.398zm0 0M93.301 96.398c13.676 0 24.801-11.125 24.801-24.801 0-13.671-11.125-24.796-24.801-24.796-13.676 0-24.801 11.125-24.801 24.796 0 13.676 11.125 24.801 24.801 24.801zm0 0" />
</svg>

css
Martin Hope
Михаил Камахин
Asked: 2022-05-26 19:34:03 +0800 CST
  • 2

我参加了 IDO，使用这个智能合约为我的硬币打上了烙印 https://bscscan.com/address/0x4e62210aacc9a979e9f20e8d14bc01b01365dc32#code

我不明白如何调用构造函数，从哪里调用。感觉就像您可以在 JavaScript（或其他）中调用合约并将参数传递给构造函数。如果是这样，那么事实证明第一个参数可以传递给任何绝对标记。代码中没有检查 IERC20 代币是这个特定的代币，而不是其他
代币

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.0;

import "Ownable.sol";
import "IERC20.sol";
import "ERC20.sol";
import {SafeERC20} from "SafeERC20.sol";
import {SafeMath} from "SafeMath.sol";

contract A4Sale is Ownable  {

    using SafeERC20 for IERC20;
    using SafeMath for uint256;

    IERC20 private _token;
    IERC20 private _currency;

    uint256 public _cap;
    uint256 private _rate = 1;

    uint256 public startTime;
    uint256 public releaseTime;
    uint256 public claimTime;
    uint256 public endTime;

    uint256 private minDepositValue = 10 * 10 ** 18;
    uint256 private minWithdrawValue = 1 * 10 ** 18;
    uint256 private _unitsTotal = 0;

    mapping(address => uint256) public _deposits;

    event Deposit(address indexed, uint256 indexed, uint256 indexed);
    event Withdraw(address indexed, uint256 indexed, uint256 indexed);
    event TokenWithdrowed(address indexed, uint256 indexed);


    constructor(
        IERC20 token,
        IERC20 currency,
        uint256 cap,
        uint256 _startTime,
        uint256 _releaseTime,
        uint256 _claimTime,
        uint256 _endTime ) public
    {
        _token = token;
        _currency = currency;
        _cap = cap;

        startTime = _startTime;
        releaseTime = _releaseTime;
        claimTime = _claimTime;
        endTime = _endTime;
    }

    function rate() view public returns (uint256) {
        return _rate;
    }

    function total() view public returns (uint256) {
        return _unitsTotal;
    }

    // investor token balance 
    function balanceOf(address investor) view public returns (uint256) {
        return _deposits[investor];
    }

    function deposit( uint256 value ) public {
        _deposit(value);
    }

    function withdraw( uint256 value ) public {
        _withdraw(value);
    }

    function withdrawTokens() public {
        _withdrawTokens();
    }

    function withdrawIDO( uint256 value ) onlyOwner public {
        require(claimTime <= block.timestamp, "IDO is active");
        
        _unitsTotal = _unitsTotal.sub(value);
        IERC20(_currency).transfer(msg.sender, value);
    }

    function _deposit( uint256 value ) internal
    {
        require(startTime <= block.timestamp &&  releaseTime > block.timestamp, "IDO is stopped");
        require(value >= minDepositValue, "Not enough value");

        _deposits[msg.sender] = _deposits[msg.sender].add(value);
        _unitsTotal = _unitsTotal.add(value);

        _rate = _unitsTotal.div(_cap);

        IERC20(_currency).transferFrom(msg.sender, address(this), value);

        emit Deposit(msg.sender, value, _rate);
    }

    function _withdraw( uint256 value ) internal
    {
        require(releaseTime <= block.timestamp && claimTime > block.timestamp, "No time for withdraw");
        require(value <= _deposits[msg.sender] && value > minWithdrawValue, "Error withdraw value");

        _deposits[msg.sender] = _deposits[msg.sender].sub(value);
        _unitsTotal = _unitsTotal.sub(value);
        _rate = _unitsTotal.div(_cap);

        IERC20(_currency).transfer(msg.sender, value);

        emit Withdraw(msg.sender, value, _rate);
    }

    function _withdrawTokens() internal
    {
        require(claimTime <= block.timestamp && endTime > block.timestamp, "No time for claime");
        require(_deposits[msg.sender] > 0, "Zero tokens");

        uint256 tokens = _deposits[msg.sender].div(_rate);
        _deposits[msg.sender] = 0;

        _token.transfer(msg.sender, tokens);
        
        emit TokenWithdrowed(msg.sender, tokens);
    }

    
}
blockchain
Martin Hope
Михаил Камахин
Asked: 2022-04-21 20:16:50 +0800 CST
  • 1

我想监听.list元素上的悬停和悬停事件。
但事实证明，当我将鼠标悬停在嵌套元素上时，悬停有效，而当我将鼠标悬停在列表中的空白位置时，悬停有效。
这种行为不适合我，我该如何摆脱它？

const list = document.querySelector('.list');

list.addEventListener('mouseover', (e) => {
  e.stopPropagation();
  console.log('over');
});

list.addEventListener('mouseout', (e) => {
  e.stopPropagation();
  console.log('out');
});
.list {
  background-color: black;
  color: white;
  padding: 15px;
  font-family: sans-serif;
}
<div class="list">

  <div class="list__item">
    <span class="list__item-text">текст</span>
  </div>
  
  <div class="list__item">
    <span class="list__item-text">текст</span>
  </div>
  
  <div class="list__item">
    <span class="list__item-text">текст</span>
  </div>
  
</div>

javascript
Martin Hope
Михаил Камахин
Asked: 2022-03-25 18:13:04 +0800 CST
  • 1

我有一个从 i1 到 i2 的线段。
我需要学习如何绕着这个线段转一圈。
如果从 0 到 10 是一个段，我站在索引 2 处并移动 -3，那么我将在索引 10 处结束
如果我移动 -14，那么我将在索引 10 处结束
在此处输入图像描述

我也可以向右移动。

/**
 * Функция для сдвига индекса
 * @param {number} length - Длина элементов
 * @param {number} index - Индекс текущего элемента
 * @param {number} shift - Сдвиг
 */
function shiftDigit(length, index, shift) {
  const indexSumShift = index + shift;
  if (indexSumShift < 0) {
    return length + indexSumShift;
  }
  return (index + shift) % length;
}

console.log(shiftDigit(11, 3, -5));

我的代码没有多大意义，因为我很困惑

UPD：我认为用什么值指示段索引开始和结束位置会更正确：

/**
 * Функция для сдвига индекса
 * @param {number} start - Начало отрезка
 * @param {number} end - Конец отрезка
 * @param {number} index - Индекс текущего элемента
 * @param {number} shift - Сдвиг
 */
function shiftDigit(start, end, index, shift) {

}

console.log(shiftDigit(0, 10, 3, -15));

javascript
Martin Hope
Михаил Камахин
Asked: 2022-04-03 20:54:38 +0800 CST
  • 2

我想旋转圆，使圆.progressbar__thumb上的线从不同的位置移动。但是出了点问题。告诉我怎么右转？

const progressbarThumb = document.querySelector('.progressbar__thumb');
const progressbarPercent = document.querySelector('.progressbar__percent > tspan');
const progressbarText = document.querySelector('.progressbar__info > tspan');
let frameLoop = null;

function onCompleteGsap() {
  cancelAnimationFrame(frameLoop);
}

gsap.to(progressbarThumb, 5, {
  '--percent': 50,
  onComplete: onCompleteGsap,
  ease: 'linear'
});

function loop() {
  const percent = gsap.getProperty(progressbarThumb, '--percent');

  if (percent > 99) {
    progressbarText.textContent = 'Закончили?';
  } else if (percent > 60) {
    progressbarText.textContent = 'Разгоняемся!';
  } else if (percent > 40) {
    progressbarText.textContent = 'Погнали!';
  }
  progressbarPercent.textContent = Math.round(percent);
  frameLoop = requestAnimationFrame(loop);
}

frameLoop = requestAnimationFrame(loop);
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.progressbar {
  max-width: 150px;
  font-size: 10px;
  --color: rgb(0, 186, 16);
  --percent: 0; /* процент, насколько заполнен круг */
  --PI: 3.141592;
  --r: 30;
  --strokeWidth: 2;
  --total: calc( var(--PI) * var(--r));
}

.progressbar circle {
  r: var(--r);
}

.progressbar text {
  fill: var(--color);
}

.progressbar__percent {
  font-size: 16px;
}

.progressbar__track {
  fill: transparent;
  stroke: #ededed;
  stroke-width: var(--strokeWidth);
}

.progressbar__thumb {
  fill: transparent;
  --strokeDasharray: calc(2 * var(--total) * var(--percent) / 100) calc(2 * var(--total));
  stroke-linecap: round;
  stroke-dasharray: var(--strokeDasharray);
  stroke: var(--color);
  stroke-width: var(--strokeWidth);
  
  transform-origin: center;
  transform: rotate(90deg);
}
<svg class="progressbar" viewBox="0 0 62 80">
    <circle class="progressbar__track" cx="31" cy="31"></circle>
    <circle class="progressbar__thumb" cx="31" cy="31"></circle>
    <text x="32" y="33" class="progressbar__percent" text-anchor="middle" dominant-baseline="middle"><tspan>0</tspan>%</text>
    <text x="32" y="73" class="progressbar__info" text-anchor="middle" dominant-baseline="middle"><tspan>Загрузочка ...</tspan></text>
</svg>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

javascript
Martin Hope
Михаил Камахин
Asked: 2022-04-03 16:57:17 +0800 CST
  • 2

我在 CSS 中有一个动画，可以改变 CSS 变量。

我想通过 JavaScript 跟踪更改，CSS переменных并根据值执行一些操作（您可以纯粹在 JS 中执行动画，但我对此很感兴趣）。如果有人有任何想法，请告诉我

*,
*::before,
*::after {
  box-sizing: border-box;
}

@property --x {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --y {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --r {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --g {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --b {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  background-color: rgb(var(--r), var(--g), var(--b));
  animation: ballAnimate 2s infinite alternate ease-in-out;
}

.ball {
  --size: 10vmin;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: var(--size);
  background-color: rgb(var(--r), var(--g), var(--b));
  filter: invert(100%);
  border-radius: 50%;
  transform: translate(calc(var(--x) * 1vmin), calc(var(--y) * 1vmin));
  animation: ballAnimate 2s infinite alternate ease-in-out;
}

@keyframes ballAnimate {
  0% {
    --x: 0;
    --y: 0;
  }
  25% {
    --y: 20;
    
    --r: 100;
    --g: 100;
    --b: 30;
  }
  50% {
    --x: 30;
  }
  75% {
    --y: 50;
    
    --r: 255;
    --g: 0;
    --b: 255;
  }
  100% {
    --x: 200;
    --y: 80;
    
    --r: 0;
    --g: 255;
    --b: 250;
  }
}
<div class="ball"></div>

javascript
Martin Hope
Михаил Камахин
Asked: 2022-02-10 23:53:47 +0800 CST
  • 0

我做了一个类RandomNumber，当它被初始化时，它被赋予一个数字数组作为输入。
这个数组存储在构造函数中

constructor(numbers) {
  this.numbers = numbers.slice();
}

我想在类nextNumber中创建一个函数，当调用时，总是给出下一个数字，这与前一个不同
。例如：0,1,0,1,0,1,0 将是如果一个数组已向班级提供了输入[0, 1]
但我的代码无法正常工作。出于某种原因，它1从不重复，并且经常为 0（并且数字根本不应该重复）

在此处输入图像描述

class RandomNumber {

  constructor(numbers) {
    this.numbers = numbers.slice();
  }

  random(numbers) { // генерация рандомного числа на основе длины массива
    const randomIdx = Math.floor(Math.random() * numbers.length);
    const randomNumber = numbers[randomIdx];
    return {num: randomNumber, idx: randomIdx};
  };

  nextNumber() {
    const numbers = this.numbers.slice();
    let randomNumber = this.random(numbers);

    if (this.lastRdnNumber && this.lastRdnNumber.num === randomNumber.num) {
      // this.lastRdnNumber cуществует и прошлое число равняется текущему сгенерированному
      numbers.splice(this.lastRdnNumber.idx, 1); // вырезать число из массива, которое уже было
      randomNumber = this.random(numbers);
    }
  
    this.lastRdnNumber = randomNumber;
    return randomNumber.num;
  }
}

const numbers = [1, 0];
const randomNumber = new RandomNumber(numbers);

for (let i = 0; i < 30; i++) {
  console.log(randomNumber.nextNumber());
}

javascript
Martin Hope
Михаил Камахин
Asked: 2022-01-31 22:24:23 +0800 CST
  • 1

我有一个ThemeRadioJavaScript 课程。
初始化类的实例时

const themeRadio = new ThemeRadio('.radio-theme');
console.log(themeRadio);

而当你输出到控制台时，你可以看到字段matchMediaDarkListener，你怎么能方便地摆脱它呢？
要检查收音机是否默认，您需要更改应用程序的主题，这可以在 Windows 中完成（选择默认应用程序模式）。

在此处输入图像描述 

class ThemeRadio {
  constructor(selectorRadios) {
    const nodeListBool = NodeList.prototype.isPrototypeOf(selectorRadios);
    this.themeRadiosDOM = nodeListBool ? selectorRadios : document.querySelectorAll(selectorRadios);
    this.matchMediaDark = window.matchMedia('(prefers-color-scheme: dark)');

    this.addEventsListenerRadio(this.themeRadiosDOM, 'input', (event) => {
      const target = event.target;
      const value = target.value;

      // localStorage.setItem('theme', JSON.stringify(value));
      this.choosingDesiredTheme(value);
    });

    const localStorageExist = this.initRadioValueFromLocalStorage(this.themeRadiosDOM);
    
    if (!localStorageExist) {
      const theme = this.getRadioValue(this.themeRadiosDOM);
      // localStorage.setItem('theme', JSON.stringify(theme));
      this.choosingDesiredTheme(theme);
    }


  }

  addEventsListenerRadio(domElems, eventName, listenerFunc) {
    for (let i = 0; i < domElems.length; i++) {
      const item = domElems[i];
      item.addEventListener(eventName, listenerFunc);
    }
  }

  addTheme(themeName, excludeClasses = ['dark-theme', 'light-theme']) {
    const classesDOM = Array.from(document.documentElement.classList);
  
    for (const className of classesDOM) {
      const findClassName = excludeClasses.find(excludeClass => className === excludeClass);
  
      if (findClassName) {
        document.documentElement.classList.remove(findClassName);
      }
    }
  
    document.documentElement.classList.add(themeName);
  }

  choosingDesiredTheme(theme) {
    if (theme !== 'default-theme') {
      this.matchMediaDark.removeEventListener('change', this.matchMediaDarkListener);
      this.addTheme(theme);
    } else if (theme === 'default-theme') {
      const themeDefault = this.getDefaultTheme();
      this.matchMediaDark.addEventListener('change', this.matchMediaDarkListener);
      this.addTheme(themeDefault);
    }
  }

  getDefaultTheme() {
    return this.matchMediaDark.matches ? 'dark-theme' : 'light-theme';
  }

  matchMediaDarkListener = (event) => {
    const darkActive = event.matches;
    if (darkActive) {
      this.addTheme('dark-theme');
    } else {
      this.addTheme('light-theme');
    }
  }

  initRadioValueFromLocalStorage(radioDomElems) {
    // const radioArrElems = Array.from(radioDomElems);
  
    // const theme = JSON.parse(localStorage.getItem('theme'));
  
    // if (theme) {
    //   const findRadio = radioArrElems.find(radio => radio.value === theme);
    //   if (findRadio) {
    //     findRadio.checked = true; 
    //   }
    //   this.choosingDesiredTheme(theme);
    //   return true;
    // }
    return false;
  }

  getRadioValue(domElems) {
    const arrElems = Array.from(domElems);
    const activeRadio = arrElems.find(elem => elem.checked);
    return activeRadio.value;
  }
}

const themeRadio = new ThemeRadio('.radio-theme');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  --transition-timing-function: linear;
  --transition-duration: 0.2s;
  --header-bg-color: rgb(250, 250, 251);
  --header-color: inherit;
  --main-bg-color: rgb(132, 239, 255);
  --main-color: inherit;
  --footer-bg-color: rgb(249, 249, 255);
  --footer-color: inherit;
}

.dark-theme {
  --white: rgb(231, 231, 231);
  --header-bg-color: rgb(0, 0, 0);
  --header-color: var(--white);
  --main-bg-color: rgb(37, 82, 88);
  --main-color: var(--white);
  --footer-bg-color: rgb(66, 66, 66);
  --footer-color: var(--white);
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

img {
  display: block;
  max-width: 100%;
}

p {
  margin: 10px 0;
}

.container {
  display: block;
  width: 100%;
  max-width: 800px;
  padding: 0 10px;
  margin: 0 auto;
}

.header {
  background-color: var(--header-bg-color);
  color: var(--header-color);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: background-color, color;
  padding: 10px 0;
}

.main {
  flex: 1;
  padding: 40px 0;
  color: var(--main-color);
  background-color: var(--main-bg-color);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: background-color, color;
}

.footer {
  padding: 40px 0;
  background-color: var(--footer-bg-color);
  color: var(--footer-color);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: background-color, color;
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  --width: 50px;
  min-width: var(--width);
  max-width: var(--width);
}

.form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.input-group-radio {
  cursor: pointer;
}

.input-group-radio input[type=radio],
.input-group-radio label {
  cursor: inherit;
}

.input-group-radio label {
  padding-left: 5px;
}

.input-group {
  display: flex;
  align-items: center;
  user-select: none;
}

.as-console-wrapper, .as-console {
  height: 0;
  overflow: hidden !important;
  border: none !important;
}
<header class="header">
  <div class="container">
    <div class="header__container">
      <div class="header__logo">
        <img src="https://picsum.photos/50" alt="">
      </div>
      <form class="checkbox-theme form" id="checkbox-theme">

        <div class="input-group input-group-radio">
          <input type="radio" id="default-theme" class="radio radio-theme" name="theme" value="default-theme" checked>
          <label for="default-theme">По умолчанию</label>
        </div>

        <div class="input-group input-group-radio">
          <input type="radio" id="light-theme" class="radio radio-theme" name="theme" value="light-theme">
          <label for="light-theme">Светлая тема</label>
        </div>

        <div class="input-group input-group-radio">
          <input type="radio" id="dark-theme" class="radio radio-theme" name="theme" value="dark-theme">
          <label for="dark-theme">Тёмная тема</label>
        </div>

      </form>
    </div>
  </div>
</header>

<main class="main">
  <div class="container">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum unde quas quo ratione accusamus enim voluptatem beatae, cupiditate maiores facilis voluptatum eveniet neque doloremque dicta aperiam corporis vel illo accusantium.
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, nisi perspiciatis labore sed ad alias porro magnam recusandae facere amet similique, repudiandae beatae minima quia inventore, rerum praesentium totam expedita?
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, nisi perspiciatis labore sed ad alias porro magnam recusandae facere amet similique, repudiandae beatae minima quia inventore, rerum praesentium totam expedita?
    </p>
  </div>
</main>

<footer class="footer">
  <div class="container">
    <div class="footer__container">
      Это футер
    </div>
  </div>
</footer>

javascript
Martin Hope
Михаил Камахин
Asked: 2022-01-25 23:16:41 +0800 CST
  • 0

告诉我，谁使用过 GraphQL，我想从SpaceX API提出这样的请求：

{
  ships(find: {name: "", home_port: "'Fort Lauderdale' || 'Port of Los Angeles'"}) {
    name
    home_port
    type
    id
  }
}

有必要找到拥有一个或另一个港口的所有船只。但||它不起作用，只有一条简单的线路起作用，一个端口。有谁知道在 GraphQL 中一次这样做的方法？没有 JavaScript

graphql
Martin Hope
Михаил Камахин
Asked: 2022-01-05 22:47:02 +0800 CST
  • 1

在 Quiz 类中，我有一个创建 DOM 元素的 createFieldsRadio 函数。
我正在挂起单击事件，将鼠标指向/移动到那里。
第一次点击

if (clickCounter === 1) {
  fieldRadio.classList.add('active');
  arrFields.forEach(item => {
    item.removeEventListener('mouseover', mouseOverFieldRadio);
    item.removeEventListener('mouseout', mouseOutFieldRadio);
  });
}

然后我尝试遍历页面上的 DOM 元素数组并删除它们的事件侦听器。
但由于某种原因，它们没有被删除。

class Quiz {
  constructor(options) {
    this.formDOM = document.querySelector(`#${options.nameForm}`);
    const radioS = Array.from(this.formDOM.querySelectorAll(`[name=${options.nameInputRadio}]`));
    this.radioS = this.cloneRadios(radioS);
    this.deleteRadios(radioS);
    this.fieldsRadio = this.createFieldsRadio(this.formDOM, this.radioS);
  }

  cloneRadios(radiosDom) {
    return radiosDom.map(item => {
      const newItem = item.cloneNode(true);
      return item.cloneNode(true);
    })
  }

  deleteRadios(radiosDom) {
    for (let i = radiosDom.length - 1; i > -1; i--) {
      radiosDom[i].remove();
      radiosDom.splice(i, 1);
    }
  }

  createFieldsRadio(formDOM, radiosDom) {
    const arrFields = [];
    let clickCounter = 0;

    for (let i = 0; i < radiosDom.length; i++) {
      const fieldRadio = document.createElement('div');

      const mouseOverFieldRadio = (e) => {
        fieldRadio.classList.add('hover');
      }
  
      const mouseOutFieldRadio = (e) => {
        fieldRadio.classList.remove('hover');
      }

      fieldRadio.classList.add('fieldRadio');
      fieldRadio.innerHTML = `
        <div class="fieldRadio__text">${radiosDom[i].value}</div>
        <div class="fieldRadio__voting"></div>
      `;
      fieldRadio.addEventListener('click', (e) => {
        clickCounter++;
        if (clickCounter === 1) {
          fieldRadio.classList.add('active');
          arrFields.forEach(item => {
            item.removeEventListener('mouseover', mouseOverFieldRadio);
            item.removeEventListener('mouseout', mouseOutFieldRadio);
          });
        }
      });

      fieldRadio.addEventListener('mouseover', mouseOverFieldRadio);
      fieldRadio.addEventListener('mouseout', mouseOutFieldRadio);
      arrFields.push(fieldRadio);
      formDOM.append(fieldRadio);
    }
    return arrFields.slice();
  }

  getStatistics() { // тут получение данных из бд
    return {
      "Интроверт": 3,
      "Экстраверт": 4,
      "Не знаю": 2
    };
  }
}

const newQuiz = new Quiz({
  nameForm: 'whoAreYouForm',
  nameInputRadio: 'whoAreYou'
});
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  /* margin: 0;
  padding: 0; */
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

h2 {
  font-weight: normal;
}

p {
  line-height: 1.6;
}

main {
  padding: 40px 0;
}

.container {
  display: block;
  width: 100%;
  padding: 0 10px;
  max-width: 1000px;
  margin: 0 auto;
}

.code {
  color: #242729;
  background-color: #e4e6e8;
  padding: 2px 4px;
  border-radius: 3px;
}

.form {
  padding: 15px;
  box-shadow: inset 0 0 0 1px #dce1e6;
  border-radius: 8px;
  max-width: 300px;
}

.form > * + * {
  margin-top: 10px;
}

.form__header {
  line-height: normal;
  margin: 0 0 15px 0;
}

.fieldRadio {
  background-color: #e5ebf1;
  padding: 6px 75px 8px 10px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s linear;
}

.fieldRadio.active {
  background-color: #c5d0db !important;
}

.fieldRadio__text {

}

.fieldRadio__voting {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  /* background-color: red; */
}

.fieldRadio.hover {
  background-color: #d3d9de;
}
<form class="form" id="whoAreYouForm">
  <p class="form__header">Кто ты?</p>
  <input name="whoAreYou" type="radio" value="Интроверт">
  <input name="whoAreYou" type="radio" value="Экстраверт">
  <input name="whoAreYou" type="radio" value="Не знаю">
</form>

javascript