This is the 23rd day of my participation in the August More Text Challenge.More challenges in August

Now that we’ve done most of the work in the first two articles, we’ll write the page styles and interactions. Get this project right.

A series of

  • Develop an online page to detect the percentage of code blocks in articles (part 1)
  • Develop an online page to detect the percentage of code blocks in articles (part 2)

Qc2168.github. IO /article- INF…

The page layout

Input card style

Set the Flex layout in the body tag so that the element is centered. And set the background color to gray, and give a container component inside, using mX-Auto,

<body class="bg-gray-300 flex justify-center items-center">
    <div id="container" class="container mx-auto flex flex-nowrap">
    </div>
</body>
Copy the code

Create a card in the body tag, which uses a lot of tailwind’s style classes, and if you’re new to this type of framework, you might find it a bit more complicated. Consult the Tailwind documentation

<div id="article" class="flex-grow h-auto rounded-lg shadow-sm bg-white overflow-hidden p-10 mr-2 relative">
  <img src="./gitHub.png" class="top-4 right-4 absolute w-8 h-8" alt=""/>
  <p class="font-mono text-3xl font-bold tracking-wider leading-tight text-center mb-5 uppercase">
    article
  </p>
  <div contenteditable="plaintext-only" placeholder="Write something ..." id="inp-content"
       class="max-h-full break-all text-justify bg-gray-50 border-2 hover:bg-gray-100 border-gray-200 ease-out block transition-all duration-700 h-20 max-h-96 py-3 px-4 overflow-hidden font-mono cursor-auto rounded-xl"
       style="outline:none;"></div>
</div>
Copy the code

Set the width and height of the HTML and body tags to 100% in index. SCSS so that the card is centered in the middle. You can also add w-full and H-full classes to HTML and body tags to change the width and height of elements.

html.body{
  width: 100%;
  height: 100%;
}
Copy the code

Placeholder in inpit; display the value of the placeholder defined in inp-Content when the input box is empty.

#inp-content[placeholder]:empty:before {
  content: attr(placeholder);
  color: # 555;
}
Copy the code

When the inp-content gets focus, the inp-content and its parent elements are stretched to a certain height.

focus:h-96 focus:border-indigo-400
Copy the code

Add the following code to tailwind.config.js in the project root directory. Turn on the Focus variant for height.

variants: {
  extend: {
    height: ['focus'],}},Copy the code

Article analysis card

The result card on the right shows the word count analysis of the article.

It has the same effect as the article card on the left, but the contents are different.

  <div id="resultBox"
       class="overflow-hidden w-2/6 flex-none rounded-lg transition-all duration-700 shadow-sm py-10 bg-white flex flex-col items-center">
    <p class="font-mono text-3xl font-bold tracking-wider leading-tight text-center mb-5 uppercase">
      result
    </p>
  </div>
Copy the code

Remove the w-2/6 and replace it with W-0, which means setting the width to 0. We will control the card width dynamically in typescript later.

The pie chart on the right was drawn using ECharts (related documentation), which we installed first.

ECharts

Install ECharts

Run the following command on the terminal to install ECharts.

yarn add echarts 
Copy the code
Encapsulation ECharts

Create an rchart.ts file in Pages/Index to encapsulate the pie chart.

Import and register the components required for the pie chart.

import {
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import {
  PieChart, PieSeriesOption,
} from 'echarts/charts';
import {
  CanvasRenderer,
} from 'echarts/renderers';

use(
  [TooltipComponent, LegendComponent, PieChart, CanvasRenderer],
);
Copy the code

Write an RChart class that needs to pass in a DOM element to draw a pie chart.

export class RChart {
	private chartInstance : echarts.ECharts;
	
	constructor(dom:HTMLElement) {
 	 this.chartInstance = echarts.init(dom); }}Copy the code

Add the renderChart method for rendering ICONS that need to pass in the data corresponding to the article to render the pie chart. Is an array type parameter.

export type dataType = {
  value: number.name: string
}
type ECOption = echarts.ComposeOption<PieSeriesOption>;
export class RChart {
    / /... Ignore some code
	public renderChart=(data:dataType[]):void= > {
    const option: ECOption = {
      tooltip: {
        trigger: 'item',},legend: {
        top: '5%'.left: 'center',},series: [{name: 'proportion'.type: 'pie'.radius: ['40%'.'70%'].avoidLabelOverlap: false.itemStyle: {
            borderRadius: 12.borderColor: '#fff'.borderWidth: 2,},label: {
            show: false.position: 'center'.formatter: '{d}%',},emphasis: {
            scale: true.scaleSize: 5.label: {
              show: true.fontSize: '18'.fontWeight: 'bold',}},labelLine: {
            show: false,
          },
          data,
        },
      ],
    };
    this.chartInstance.setOption(option); }}Copy the code

Create a pie chart rendering area in the resultBox element and specify the width and height with an inline style.

<div id="resultChart" class="hidden" style="width: 20rem; height: 25rem;"></div>
Copy the code

jQuery

Install the jQuery

On the terminal, run the following command to install jquery.

yarn add jQuery @types/jquery
Copy the code

Configure the webpack.config.ts file and use ProvidePlugin to expose $so that you can use $directly in your project.

import { ProvidePlugin } from 'webpack';
plugins: [
  new ProvidePlugin({
    $: 'jquery'.jQuery: 'jquery',})],Copy the code

Introduce the CheckArticle and RChart classes we wrote earlier in index.ts.

import CheckArticle from './CheckArticle';
import {
  dataType, RChart,
} from './RChart';
Copy the code

The dynamic interaction

Train of thought/steps
  • instantiationCheckArticle,RChartClass,RChartClass needs to pass in the renderedDOMThe element
  • Listen for input field keyboard events
    • Gets the input box elementCheckArticleClasschangeContentMethod changes the content of the article in the class.
    • Call classmatchShortCode,matchLongCodeMethod to get the length of the code and code block. Convert these two data into the object format required for the pie chart.
    • callRChartIn the classrenderChartMethod to render the pie chart
    • Checks whether the current input box element has elements
      • Current Content: Displays article analysis cards
      • Current Content: Hide article analysis card
= > {$(($)// Get the input box element
  const inpContent = $('#inp-content');
  const CA = new CheckArticle(' ');
  const RC = new RChart(document.getElementById('resultChart')!);
  inpContent.on('keyup'.() = > {
    // Get the contents of the input box
    const content: string = inpContent.html();
    CA.changeContent(content);
	// Generate data
    const data: dataType[] = [
      {
        value: CA.matchShortCode(),
        name: 'Code length'}, {value: CA.matchLongCode(),
        name: 'Block length'}, {value: CA.articleCount - CA.matchLongCode() - CA.matchShortCode(),
        name: 'text',}];// Determine the contents of the current input box
    // Whether to display analysis result cards
    if (content) {
      RC.renderChart(data);
      / / add the result
      $('#resultBox')
        .removeClass('w-0')
        .addClass('w-2/6');
      $('#resultChart')
        .removeClass('hidden');
      $('#inp-content')
        .addClass('h-96');
    } else{$('#inp-content')
        .removeClass('h-96');
      $('#resultChart')
        .addClass('hidden');
      $('#resultBox')
        .removeClass('w-2/6')
        .addClass('w-0'); }}); });Copy the code

Here, our page has been developed!