随机网络构建

by Ayo Isaiah

通过Ayo Isaiah

构建随机报价机 (Building a Random Quote Machine)

I really wasn’t entirely satisfied with my first attempt at building a Random Quote Generator on Free Code Camp. It was ugly, and the quotes were too long, so I didn’t bother to implement the “tweet” functionality. It just didn’t make any sense to do that.

我对首次在Free Code Camp上构建随机报价生成器的尝试并不完全满意。 这很丑陋，引号太长，所以我不必费心实现“ tweet”功能。 这样做没有任何意义。

So after I finished with the Pomodoro Clock Project, I felt a strong desire to revisit my Random Quote Machine and start over with a different approach.

因此，在完成Pomodoro Clock Project之后 ，我强烈希望重新访问我的随机报价机，并从另一种方法开始。

I wanted a more interesting design, with a few animations. I also had this idea of putting the quotes into different categories, so that users can view quotes from their favorite categories.

我想要一个更有趣的设计，并带有一些动画。 我也有将报价分为不同类别的想法，以便用户可以查看自己喜欢的类别中的报价。

My exams were over, so I had enough time on my hands to finish it off.

我的考试结束了，所以我手上有足够的时间完成考试。

逻辑 (Logic)

I settled on eight categories for the quotes and collected 25 quotes for each one. Each category was an array of objects with quote and author properties, so that I could retrieve each one easily.

我将报价分为八个类别，每个类别都收集了25个报价。 每个类别都是带有引号和作者属性的对象数组，因此我可以轻松检索每个类别。

Then I made a function to put the quotes in the HTML once the next quote button is clicked and a similar function for the “previous quote” button.

然后，我创建了一个函数，一旦单击了下一个引号按钮，便将引号放入HTML中，并为“上一个引号”按钮提供了类似的功能。

If you look at the code you will see that the quotes aren’t generated randomly at all, but instead they iterate from the first to the last and back again. That’s an intentional design choice I made.

如果看一下代码，您会发现引号根本不是随机生成的，而是从第一个到最后一个，然后再返回一次。 这是我故意设计的选择。

设计 (Design)

What annoyed me the most about that first attempt was not even really how it worked, but how it looked. So the design was what I concentrated on for the most part on this project.

第一次尝试让我最烦恼的不是它的工作原理，而是它的外观。 因此，设计是我大部分时间专注于该项目的内容。

The first thing I did was to list out all the things I wanted my app to do and how I wanted it to look. I’ve learnt over time that the best way to approach anything is to break it down into simple actionable steps so that is what I did here using Workflowy.

我要做的第一件事是列出我希望应用程序执行的所有操作以及其外观。 随着时间的推移，我了解到，解决任何问题的最佳方法是将其分解为简单的可操作步骤，这就是我在这里使用Workflowy所做的事情。

I’ve always used Skeleton CSS boilerplate whenever I want to make a grid based layout so I continued with it for this one also.

每当我想进行基于网格的布局时，我总是使用Skeleton CSS样板，因此我也继续使用它。

This time though, I used the Sass version which made it easy to change a few variables and customise it a bit without touching the original files.

不过，这次，我使用了Sass版本 ，该版本可以轻松更改一些变量并对其进行一些自定义，而无需接触原始文件。

Once that was in place, I commenced work on the design of the landing page. In my mind’s eye, I wanted a 2x4 grid with cards for each section and a headline at top. That was easy enough.

到位后，我便开始着陆页的设计工作。 在我眼中，我想要一个2x4的网格，每个部分都有卡片，顶部有一个标题。 那很容易。

Bam! I had my grid in place. The next thing was to figure out how I was going to style the quotes page and use animations to switch between both pages.

am！ 我的网格到位了。 接下来的事情是弄清楚我将如何为报价页面设置样式并使用动画在两个页面之间切换。

The quotes page took me a bit more time to finish. I had a navigation bar at the top for switching between sections and box in the middle where the quotes would be displayed. The buttons to show the quotes were at the bottom.

报价页面花了我更多时间来完成。 我在顶部有一个导航栏，用于在显示报价的中间部分和框之间进行切换。 显示报价的按钮在底部。

An idea that popped into my head at this point was to change the background image as the user moves between sections. The background image was to correspond with the featured image in the cards on the home page.

此时出现在我脑海中的一个想法是，当用户在各部分之间移动时，更改背景图像。 背景图像应与主页上卡片中的特色图像相对应。

I also wanted the change to be smooth with subtle animations so I used the CSS transition property for this purpose and it did work well on Chrome but I couldn’t get it to work on Firefox (if anyone know how to fix this, please let me know).

我还希望更改能够在平滑的动画效果下保持平滑，因此我为此使用了CSS transition属性，它在Chrome上效果很好，但在Firefox上却无法使用(如果有人知道如何解决此问题，请让我知道)。

Once I had both layouts sorted, it was time to link the two pages with an animation. My first thought was to use CSS animations but I didn’t get anywhere so I sought out jQuery animations instead. After some experimenting, I found what I wanted. The slideUp() andslideDown() functions were perfect for what I needed.

对两种布局进行排序后，就该将两个页面与动画链接起来了。 我最初的想法是使用CSS动画，但是我什么也没做，所以我改用了jQuery动画。 经过一些试验，我找到了想要的东西。 slideUp()和slideDown()函数非常适合我需要的功能。

Basically, once you click on any of the sections on the homepage, the quotes page will slide into view and you can view quotes from the different sections. Similarly, when you click the home button on the navigation bar, the page slides down to reveal the homepage.

基本上，一旦您单击主页上的任何部分，报价页面就会滑入视图，您可以查看不同部分的报价。 同样，当您单击导航栏上的主页按钮时，页面会向下滑动以显示主页。

So that was that.

就是这样。

All I did from that point was to replace the placeholder images with real images and use some Google fonts to spruce things up. Lastly, I did the tweet button.

从那时起，我所做的就是将占位符图像替换为真实图像，并使用一些Google字体来修饰内容。 最后，我做了推特按钮。

You can view the final version on CodePen.

您可以在CodePen上查看最终版本 。

得到教训 (Lessons Learned)

In the course of working on this project I learned a few valuable lessons:

在进行该项目的过程中，我吸取了一些宝贵的经验教训：

• In some cases, using background images can give you more control and more flexibility with images of different height because you can set background-size: cover and it won’t overflow the container. In addition, you can create some cool hover effects like I did with the featured images on the landing page. I didn’t always know this but someone on the CodeNewbie Slack group pointed this out to me.

  在某些情况下，使用背景图像可以为您提供不同高度的图像的更多控制权和更大的灵活性，因为您可以设置background-size：cover，并且不会溢出容器。 此外，您可以创建一些很酷的悬停效果，就像我对目标网页上的精选图片所做的那样。 我并不总是知道这一点，但是CodeNewbie Slack小组的某人向我指出了这一点。

• I also learnt how to break down my Sass files into partials and import them into the main stylesheet. This helps for organisation and makes fixing things easy. I have a working architecture I’m using and it’s not perfect but I’ll improve on that over time.
  我还学习了如何将Sass文件分解为局部文件并将其导入主样式表。 这有助于组织工作，并使修复工作变得容易。 我有一个正在使用的工作架构，虽然它并不完美，但随着时间的推移我会对此进行改进。

I’ll love to hear your thoughts on my approach and what things I could improve on so a comment or two will be greatly appreciated.

我很想听听您对我的方法的想法以及我可以改进的地方，因此，不胜感激。

接下来 (Next up)

I’ll be working on the “Show the Local Weather” project this weekend and I hope to have it done by Sunday. This will be my first real experience with using an API and I hope I get it right quickly enough.

我将在本周末进行“ 显示当地天气 ”项目，希望在周日之前完成。 这将是我第一次使用API​​的真实经验，我希望我能尽快完成。

I will write a similar post on that project next week so keep an eye out for that one.

下周我将在该项目上写一篇类似的文章，因此请密切注意该项目。

If you want to reach out or connect with me, you can find me on Twitter or email me.

如果您想联系我或与我联系，可以在Twitter上找到我或给我发送电子邮件 。

A version of this post was published on my personal blog

这篇文章的一个版本发布在我的个人博客上

翻译自: https://www.freecodecamp.org/news/building-a-random-quote-machine-project-6e8d10430f4a/

随机网络构建