30 Days Of JavaScript

Day 24: Banish Boredom

Lesson 1: Banish Boredom: 1

We are going to change how we set up our code to make this more realistic.

Create a new folder called banish-Boredom
Inside there make 3 files, index.html, style.css and main.js.

This will make it easier to organize our code.

In your style.css file add this:

1body {
2  font-family: "Open Sans", "Helvetica Neue", sans-serif;
3}
4
5#container {
6  width: 800px;
7  margin: auto;
8}
9
10.center {
11  text-align: center;
12}
13
14ul {
15  font-size: 20px;
16  line-height: 35px;
17  padding: 0;
18}
19
20form {
21  font-size: 18px;
22}
23
24#bored-button {
25  border-radius: 8px;
26  padding: 30px;
27  font-size: 30px;
28  border: none;
29  color: white;
30  background-color: orange;
31  cursor: pointer;
32}
33
34input {
35  padding: 5px;
36  border-radius: 5px;
37  border: 1px solid gray;
38}
39
40li {
41  list-style-type: none;
42}
43
44#red-text {
45  color: red;
46}
47
48#blue-text {
49  color: blue;
50}
51
52.title-large {
53  font-size: 48px;
54  font-weight: bold;
55}
56
57.title-small {
58  font-size: 24px;
59  font-weight: bold;
60}
61
62.hidden {
63  display: none;
64}
65
66.warning {
67  color: orangered;
68}
69
70.card {
71  padding: 16px 48px;
72  margin: 48px auto;
73  border: 1px solid #ddd;
74  box-shadow: 4px 10px 44px -22px rgba(133, 133, 133, 1);
75  border-radius: 8px;
76  max-width: 60%;
77}
78
79.flex-row {
80  display: flex;
81  flex-direction: row;
82  justify-content: space-between;
83}
84
85.flex-buttons {
86  margin-top: 16px;
87  display: flex;
88  flex-direction: row;
89  justify-content: space-around;
90}
91
92#like-button {
93  border-radius: 8px;
94  padding: 12px;
95  font-size: 24px;
96  border: none;
97  color: white;
98  background-color: #4cbb17;
99  cursor: pointer;
100}
101
102#nope-button {
103  border-radius: 8px;
104  padding: 12px;
105  font-size: 24px;
106  border: none;
107  color: white;
108  background-color: #ff5733;
109  cursor: pointer;
110}
111
112.delete-button {
113  margin-top: 16px;
114  padding: 8px;
115  border: 1px solid #aaa;
116  border-radius: 8px;
117  background-color: white;
118  cursor: pointer;
119}
120
121#type {
122  text-transform: capitalize;
123}
124
125#placeholder-card {
126  display: none;
127}

In your main.js add this:

1console.log("hello");

Then in your index.html add this:

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Document</title>
8
9    <link rel="stylesheet" href="style.css" />
10  </head>
11  <body>
12    <div id="container" class="center">
13      <h1>Bored?</h1>
14      <h2>Tap banish boredom</h2>
15
16      <button id="bored-button">BORED</button>
17
18      <div class="card" id="primary-card">
19        <h2 id="activity">Play basketball with a group of friends</h3>
20        <div class="flex-row">
21          <div class="item">Type: <span id="type">Social</span></div>
22          <div class="item">People: <span id="participants">5</span></div>
23          <div class="item">Price: <span id="price">0</span></div>
24          <div class="item" id="link-container"><a id="link" href="">Link</a></div>
25        </div>
26        <div class="flex-buttons">
27          <button id="like-button">Love it</button>
28          <button id="nope-button">Nope</button>
29        </div>
30      </div>
31
32      <div id="list">
33        <h2>Saved Activities</h2>
34        <div class="card">
35          <h2 id="activity">Meditate for five minutes</h3>
36          <div class="flex-row">
37            <div class="item">Type: Relaxation</div>
38            <div class="item">People: 1</div>
39            <div class="item">Price: 0</div>
40            <div class="link">Link: Link</div>
41          </div>
42          <button class="delete-button">Delete</button>
43        </div>
44      </div>
45        <div class="card">
46          <h2 id="activity">Learn calligraphy</h3>
47          <div class="flex-row">
48            <div class="item">Type: Education</div>
49            <div class="item">People: 1</div>
50            <div class="item">Price: 0.1</div>
51            <div class="link">Link: Link</div>
52          </div>
53          <button class="delete-button">Delete</button>
54        </div>
55      </div>
56    </div>
57  </body>
58  <script src="main.js"></script>
59</html>

Notice the <link rel="stylesheet" href="style.css" /> to pull in our CSS file and the <script src="main.js"></script> to pull in the JavaScript. If you refresh the page and check the console you will see "hello" printed.

All the HTML tags that we need to add events to already have ids on them and we have some placeholder data. So we can now jump in to the code.

30 Days Of JavaScript

Day 24: Banish Boredom

Lesson 1: Banish Boredom: 1

Outline

Go Pro?