<div class="container-fluid">

  <section class="main">

    <section class="inputs">
      <input type="text" placeholder="Şehir ismi giriniz..." id="cityinput">
      <input type="submit" value="Göster" id="add">

    <section class="display">
      <div class="wrapper">
        <h2 id="cityoutput"></h2>
        <p id="description"></p>
        <p id="temp"></p>
        <p id="wind"></p>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
body {
  background: #448aff;

/* background */
.container-fluid {
  width: 380px;
  margin: 0 auto;
  padding: 10px;

.inputs {
  padding: 2rem 0 2rem 0;
  text-align: center;
  justify-content: center;
  background: white;

.inputs input[type="text"] {
  height: 3.5rem;
  width: 20rem;
  background: #212121;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 10px;
  border: none;
  background-color: transparent;
  border: 2px solid #c2c2c2;
  border-radius: 2px;
  margin-right: 4px;
.inputs input[type="submit"] {
  height: 3.2rem;
  width: 6.5rem;
  background: #0a67ca;
  font-weight: bold;
  color: white;
  font-size: 1.2rem;
  margin-top: 20px;
  border: none;
  border-radius: 2px;

/* display */
.display {
  text-align: center;
  width: 100%;
  color: #16a864;
.wrapper {
  margin: 0 9rem;
  background-color: white;
  min-height: 200px;
  margin: 10px auto;
  border-radius: 2px;

.wrapper h2 {
  padding: 5px 0;
  text-align: center;
  background: #0548b5;
  color: white;
  font-family: sans-serif;
.wrapper p {
  margin: 20px 50px;
  margin-right: 20px;
  text-align: left;
  color: #04214c;
  font-size: 23px;

.wrapper h2 span {
  font-size: 21px;
  color: #9beefb;
.wrapper p span {
  color: #90006e;
  font-size: 20px;
//Now we need to determine the constant of one of the id functions. Because no html function can be used directly in JavaScript.
var inputval = document.querySelector("#cityinput");
var btn = document.querySelector("#add");
var city = document.querySelector("#cityoutput");
var descrip = document.querySelector("#description");
var temp = document.querySelector("#temp");
var wind = document.querySelector("#wind");

inputval.addEventListener("keyup", function (event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    // Trigger the button element with a click

apik = "3045dd712ffe6e702e3245525ac7fa38";

//kelvin to celcious. 1 Kelvin is equal to -272.15 Celsius.

function convertion(val) {
  return (val - 273).toFixed(2);
//Now we have to collect all the information with the help of fetch method

btn.addEventListener("click", function () {
  //This is the api link from where all the information will be collected

    "https://api.openweathermap.org/data/2.5/weather?q=" +
      inputval.value +
      "&appid=" +
    .then((res) => res.json())

    //.then(data => console.log(data))

    .then((data) => {
      //Now you need to collect the necessary information with the API link. Now I will collect that information and store it in different constants.

      var nameval = data["name"];
      var descrip = data["weather"]["0"]["description"];
      var tempature = data["main"]["temp"];
      var wndspd = data["wind"]["speed"];
      //Now with the help of innerHTML you have to make arrangements to display all the information in the webpage.
      city.innerHTML = `<span>${nameval}<span> hava durumu`;
      temp.innerHTML = `Sıcaklık: <span>${convertion(tempature)} C</span>`;
      description.innerHTML = `Durum: <span>${descrip}<span>`;
      wind.innerHTML = `Rüzgar hızı: <span>${wndspd} km/h<span>`;

    //Now the condition must be added that what if you do not input anything in the input box.
    .catch((err) => alert("Girdiğiniz şehir bulunamadı."));
//If you click on the submit button without inputting anything in the input box or typing the wrong city name then the above text can be seen.

External CSS

  1. https://codepen.io/wolkanca/pen/wvgOPWb.css

External JavaScript

  1. https://codepen.io/wolkanca/pen/wvgOPWb.js