Simple Weather App#

1
.top-banner {
2
  color: var(--text_light);
3
}
4

5
.heading {
6
  font-weight: bold;
7
  font-size: 4rem;
8
  letter-spacing: 0.02em;
9
  padding: 0 0 30px 0;
10
}
11

12
.top-banner form {
13
  position: relative;
14
  display: flex;
15
  align-items: center;
16
}
17

18
.top-banner form input {
19
  font-size: 2rem;
20
  height: 40px;
21
  padding: 5px 5px 10px;
22
  border-bottom: 1px solid;
23
}
24

25
.top-banner form input::placeholder {
26
  color: currentColor;
27
}
28

29
.top-banner form button {
30
  font-size: 1rem;
31
  font-weight: bold;
32
  letter-spacing: 0.1em;
33
  padding: 15px 20px;
34
  margin-left: 15px;
35
  border-radius: 5px;
36
  background: var(--red);
37
  transition: background 0.3s ease-in-out;
38
}
39

40
.top-banner form button:hover {
41
  background: var(--darkred);
42
}
43

44
.top-banner form .msg {
45
  position: absolute;
46
  bottom: -40px;
47
  left: 0;
48
  max-width: 450px;
49
  min-height: 40px;
50
}
51

52
/* 小屏适配（≤700px） */
53
@media screen and (max-width: 700px) {
54
  .top-banner form {
55
    flex-direction: column;
56
  }
57
  .top-banner form input,
58
  .top-banner form button {
59
    width: 100%;
60
  }
61
  .top-banner form button {
62
    margin: 20px 0 0 0;
63
  }
64
  .top-banner form .msg {
65
    position: static;
66
    max-width: none;
67
    min-height: 0;
68
    margin-top: 10px;
69
  }
70
}

1
.ajax-section {
2
  margin: 50px 0 20px;
3
}
4

5
.ajax-section .cities {
6
  display: grid;
7
  grid-gap: 32px 20px;
8
  grid-template-columns: repeat(4, 1fr);
9
}
10

11
/* 响应式适配 */
12
@media screen and (max-width: 1000px) {
13
  .ajax-section .cities {
14
    grid-template-columns: repeat(3, 1fr);
15
  }
16
}
17
@media screen and (max-width: 700px) {
18
  .ajax-section .cities {
19
    grid-template-columns: repeat(2, 1fr);
20
  }
21
}
22
@media screen and (max-width: 500px) {
23
  .ajax-section .cities {
24
    grid-template-columns: repeat(1, 1fr);
25
  }
26
}
27

28
/* 城市卡片样式 */
29
.ajax-section .city {
30
  position: relative;
31
  padding: 40px 10%;
32
  border-radius: 20px;
33
  background: var(--text_light);
34
  color: var(--text_med);
35
}
36

37
.ajax-section .city::after {
38
  content: '';
39
  width: 90%;
40
  height: 50px;
41
  position: absolute;
42
  bottom: -12px;
43
  left: 5%;
44
  z-index: -1;
45
  opacity: 0.3;
46
  border-radius: 20px;
47
  background: var(--text_light);
48
}
49

50
.ajax-section figcaption {
51
  margin-top: 10px;
52
  text-transform: uppercase;
53
  letter-spacing: 0.05em;
54
}
55

56
.ajax-section .city-temp {
57
  font-size: 5rem;
58
  font-weight: bold;
59
  margin-top: 10px;
60
  color: var(--text_dark);
61
}
62

63
.ajax-section .city sup {
64
  font-size: 0.5em;
65
}
66

67
.ajax-section .city-name sup {
68
  padding: 0.2em 0.6em;
69
  border-radius: 30px;
70
  color: var(--text_light);
71
  background: var(--orange);
72
}
73

74
.ajax-section .city-icon {
75
  margin-top: 10px;
76
  width: 100px;
77
  height: 100px;
78
}

1
// 替换原有icon构造代码
2
const icon = `https://自定义图标地址/${weather[0]["icon"]}.svg`;

1
form.addEventListener("submit", e => {
2
  e.preventDefault();
3
  const inputVal = input.value;
4

5
  // 重复请求校验逻辑
6
  const listItems = list.querySelectorAll(".ajax-section .city");
7
  const listItemsArray = Array.from(listItems);
8
  if (listItemsArray.length > 0) {
9
    const filteredArray = listItemsArray.filter(el => {
10
      let content = "";
11
      if (inputVal.includes(",")) {
12
        if (inputVal.split(",")[1].length > 2) {
13
          inputVal = inputVal.split(",")[0];
14
          content = el.querySelector(".city-name span").textContent.toLowerCase();
15
        } else {
16
          content = el.querySelector(".city-name").dataset.name.toLowerCase();
17
        }
18
      } else {
19
        content = el.querySelector(".city-name span").textContent.toLowerCase();
20
      }
21
      return content == inputVal.toLowerCase();
22
    });
23

24
    if (filteredArray.length > 0) {
25
      msg.textContent = `You already know the weather for ${filteredArray[0].querySelector(".city-name span").textContent} ...otherwise be more specific by providing the country code as well 😉`;
26
      form.reset();
27
      input.focus();
28
      return; // 终止后续API请求
29
    }
30
  }
31

32
  // 以下为原有API请求和渲染代码...
33
});