I. Project Introduction

This is the first [Byte Youth Training Camp] – into the front end of the big work, now open source on Github -lucky- Fairys – Lucky – Draw

  • 🎬 to achieve the lottery front page, with JS simulation of the lottery process;
  • 📍 can manually set up the prize pool, the probability of winning each prize, the starting number of ore and the number of ore spent in each draw;
  • 🎰 after the completion of the lottery, given the winning results, multiple lottery, display the winning list;

In fact, is the imitation of digging gold lottery procedures, but its application scenarios in addition to the application of C terminal users of the lottery, but also for B terminal business personnel configuration.

Two, involving technology & knowledge points

What is the knowledge involved in this project?

Generally speaking, the language used is distributed in JS, HTML and SCSS.

What I found most appealing was probably the fact that I deployed with a light service for byte development. 👉 Light Service -5 minutes to quickly build applications

Why choose this technique over others?

To expand on the big picture:

1. Why SCSS instead of traditional CSS development?

2. Why use JavaScript and not others?

3. Why deploy with light services?

First, why SCSS instead of traditional CSS development? For personal use, SCSS (it’s actually called SASS, but the filename suffix is. SCSS) is very convenient for typesetting management. Traditional CSS code looks like this:

main .luckyGridView .container .gift img {
  width: 64px;
}

main .luckyGridView .container .luckyDraw {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

main .luckyGridView .container .luckyDraw:active {
  transform: scale(0.98);
}
Copy the code

The code for SCSS looks like this:

main {
    .luckyGridView {
        .container {
            .gift {
                img {
                    width: 64px;
                }
            }
            .luckyDraw {
                display: flex;
                justify-content: center;
                align-content: center;
                flex-wrap: wrap;
                
                &:active {
                    transform: scale(0.98);
                }
            }
        }
    }
}
Copy the code

The nested structure of SCSS may seem complicated at first glance, but in practice it is very convenient. For example, if I want to add a new class or tag, I can determine its location by finding its upper level and determining whether it is a sibling or subclass element.

Combined with the Live Sass Compiler plug-in on VSCode, it can transform CSS files for you, so you are essentially using CSS files, but Sass was used in development.

A CSS file compiled by SCSS looks like this:

In this project, I only used the advantages of SASS briefly. For more advantages, you can check its official website.

Second, why use JavaScript instead of something else?

Because it is not a complex function and does not involve user data management, it is particularly convenient to use JS development and it is a test of basic skills. React or Vue will be considered in the later stage.

Finally, why deploy with light services?

The advantage of choosing light service is really very big! I can launch my website without buying a server, design tables and interfaces without choosing a database, and don’t have to learn NodeJS (which I’ll have to learn later…). You can use JS on the server. However, it is still in the optimization stage, which is the direct reason WHY I use JavaScript to ensure the most stable deployment.

Third, the practice process

What is the idea of building this project?

For example, I created a class called Gifts for all the prize-pool-related functions and wrote them in it. The DB connected to the background was also classified according to the table name. I put all these files in the modules folder.

All that is left is the generic methods common.js and writing the main logic to call those methods in the index.js file.

Because the home page is managed by roles, the Player role and creator role (so named for fun), its main methods are also divided into two categories.

What are the problems encountered in practice? How is it solved?

How to upload an image using url.createObjecturl or FileReader?

After the practical comparison of the two schemes, the final use is FileReader, which transforms the binary content of the picture into Base64 and uploads it to the back end with the ordinary Post method.

What is the final result? How can improvements be optimized?

The end result is a display of the image data stored in the background, since the SVG file I saved is very small, so I didn’t optimize it. What about JPG,PNG? Later I will optimize and upgrade accordingly.

Fourth, summary thinking

What details of this project are you most proud of?

1. Binary code using 7 is an advantage over 111

In this way, any number and 7 ampersand will be in the range [0,7], which is very suitable for simulating the process of a nine-grid lottery.

2. Refine the date format conversion into a very elegant general method that can be reused directly in future projects.

const formatterMap = {
    YYYY: (date) = > date.getFullYear(),
    MM: (date) = > date.getMonth() + 1.DD: (date) = > date.getDate(),
    HH: (date) = > date.getHours(),
    mm: (date) = > date.getMinutes(),
    ss: (date) = > date.getSeconds(),
}

// Change the time format
export const dateFormatter = (date, str) = > {
    Object.keys(formatterMap).forEach((format) = > {
        str = str.replaceAll(format, formatterMap[format](date));
    });
    return str;
}

Copy the code
// External call
import { dateFormatter } from ".. /common.js"; .const dateFormattedStr = dateFormatter(
    date,
    "YYYY year MM month DD day HH MM minute ss second"
);
li.innerText = ` obtained${value}.${dateFormattedStr}`;
Copy the code

3. Send the request once with promise.all

class Images {...const tasks = this.file.map(
(file, i) = > new Promise((resolve) = > {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) = > {
        this.urls[i] = e.target.result; resolve(); }}));await Promise.all(tasks);
return this.urls;
}

Copy the code

4. In terms of user experience, I used loading animation effect because I had to wait for background data to be sent when entering the page

The larger the percentage value, the more the “veil” of the drawing picture can be revealed.

Others want to supplement

What room does this project have for improvement in the future?

1. You can continue to improve the login page. For example, you can log in with your account and password and manage permissions.

2. Do not use the simple alert box when clicking the lottery to get the result, because this will be the same as reporting an error, resulting in poor user experience;

3. Send requests can be optimized and the number of send requests should be as small as possible;

4. Preview the image directly using input[type=’file’], should actually hide it, use an explicit A tag to call it, this is convenient to better design beautiful CSS style, directly on the input[type=’file’] CSS style is too limited.

What are the advantages or disadvantages of my solution compared with other students’ solutions?

Advantage: Use light service

Downside: No popular frameworks are used

5. Reference

Stevenjoezhang/live2d – widgets – held lovely kanban musume home (ノ ≧ ∇ ≦) ノ | live2d widgets for web platform

bradtraversy/50projects50days/blurry-loading-50+ mini web projects using HTML, CSS & JS

75Team /raffle- Strange dance company annual meeting live lucky draw procedures