Вы когда-нибудь задумывались, может ли создать веб-страницу так же просто, как ввести несколько подсказок? Что ж, я здесь, чтобы сказать вам, что с помощью ChatGPT это возможно! Благодаря своим обширным знаниям и творчеству ChatGPT может помочь вам создать полнофункциональную веб-страницу всего за несколько подсказок. И не беспокойтесь, если вы не являетесь экспертом в области кодирования, потому что ChatGPT поможет вам на каждом этапе пути. Привет, меня зовут Салман (программист/предприниматель/блогер). Спасибо, что посетили мое небольшое пространство на Medium. Итак, давайте погрузимся в захватывающий мир веб-разработки с ChatGPT и посмотрим, какие приключения мы можем создать вместе!

Итак, во-первых, я попросил ChatGPT создать веб-страницу, показывающую погоду.

И понятно, это не то, что я просил.

Затем я сказал ChatGPT создать его с помощью HTML, CSS и Javascript, а затем он дал код для следующего:

Откройте LiveServer и посмотрите демонстрацию:

Без CSS это выглядит не так хорошо.

Приведенный выше код — это CSS и Javascript для нашего приложения Weather.

Я вставил все, и теперь пришло время для демонстрации

Вот так выглядит конечный продукт. Я не доволен стилем, но ты в порядке

Стиль в порядке, но ключевым моментом здесь является функциональность, из-за которой этот код выдает мне ошибку, а затем я обнаружил, что не редактировал КЛЮЧ API в коде. (замените строку «YOUR_API_KEY» на свой собственный API, к которому вы получите доступ с веб-сайта openweathermap.org)

А затем я добавил некоторые элементы javascript, чтобы выглядеть круче, и функцию значков.

Вот так выглядит конец. Надеюсь, вам понравится :)

Полный код:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Weather App</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="weather">
      <h2>Weather App</h2>  
      <input type="text" id="search" placeholder="Enter city name" />
      <button id="btn">Search</button>
      <div id="result"></div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS

/* Set claymorphism color variables */
:root {
  --light-clay: #e0e5ec;
  --dark-clay: #b1b9c4;
  --primary-color: #d6a5c6;
  --secondary-color: #6b5b95;
}

/* Apply background gradient */
body {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
}

/* Style the search input */
#search {
  padding: 10px;
  border: none;
  border-radius: 20px;
  background-color: var(--light-clay);
  box-shadow: inset 8px 8px 16px #b1b9c4, inset -8px -8px 16px #e0e5ec;
  transition: all 0.2s ease-in-out;
  color: var(--secondary-color);
  font-weight: bold;
}

#search:focus {
  outline: none;
  box-shadow: inset 8px 8px 16px #b1b9c4, inset -8px -8px 16px #e0e5ec,
    0 0 10px var(--dark-clay);
}

/* Style the search button */
#btn {
  background-color: var(--secondary-color);
  color: var(--light-clay);
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-transform: uppercase;
  box-shadow: 8px 8px 16px #b1b9c4, -8px -8px 16px #e0e5ec;
}

#btn:hover {
  background-color: var(--primary-color);
  box-shadow: inset 8px 8px 16px #b1b9c4, inset -8px -8px 16px #e0e5ec;
}

/* Style the result container */
#result {
  background-color: var(--light-clay);
  box-shadow: 8px 8px 16px #b1b9c4, -8px -8px 16px #e0e5ec;
  border-radius: 20px;
  margin-top: 20px;
  padding: 20px;
  color: var(--secondary-color);
  font-weight: bold;
}

/* Add loading spinner */
#result.loading::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--dark-clay);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

JavaScript

const btn = document.getElementById("btn");
const search = document.getElementById("search");
const result = document.getElementById("result");

btn.addEventListener("click", () => {
  const apiKey = "7b4b79e91ee31124bbd8255314c3268c";
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${search.value}&appid=${apiKey}`;

  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      const { name } = data;
      const { country } = data.sys;
      const { temp } = data.main;
      const { description, icon } = data.weather[0];
      const celsius = Math.round(temp - 273.15);

      result.innerHTML += `
      <div>${name}, ${country}</div>
      <div>${celsius} °C</div>
      <div>${description}</div>
        <img src="http://openweathermap.org/img/w/${icon}.png" />
  `;
    })
    .catch(() => {
      result.innerHTML = "Oops! Something went wrong. Please try again.";
    });
});

search.addEventListener("keyup", (event) => {
  if (event.keyCode === 13) {
    event.preventDefault();
    btn.click();
  }
});

Спасибо, что были здесь со мной. Подпишитесь на Salman cz, чтобы не пропустить подобный контент.