javascript - 水平对齐映射列表(vanilla js)

Question

screen shot of app images and code

我在使用 CSS 水平对齐映射列表时遇到问题。我想让每天的天气看起来像左边的那个。这些列表是在 DOM、Vanilla JS 中创建的。 将所有映射列表包装在一起。我怎样才能像下面所附的图片那样每天包装它们？

This is the result code I expected to have

请帮帮我。提前感谢您的帮助。

(function () {
    
    const GOOGLE_MAPS_API_URL = 'https://maps.googleapis.com/maps/api/geocode/json';
    const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/';
    const DARKSKY_API_URL = 'https://api.darksky.net/forecast/';
    const WEATHER_MAP_API_URL = 'http://api.openweathermap.org/data/2.5/';
    

    
    const GOOGLE_MAPS_API_KEY = 'GOOGLE_MAPS_API_KEY';
    const DARKSKY_API_KEY = 'DARKSKY_API_KEY';
    const WEATHER_MAP_API_KEY = 'WEATHER_MAP_API_KEY';
    
    
    
    /* --- Get Coodrdinates For City --- */
    function getCoordinatesForCity(cityName) {

        const url = `${GOOGLE_MAPS_API_URL}?address=${cityName}&key=${GOOGLE_MAPS_API_KEY}`;

        return (
            fetch(url)
            .then(response => response.json())
            .then(data => {
                const {
                    geometry,
                    address_components
                } = data.results[0]

                return {
                    cityName: address_components[0].long_name,
                    latitude: geometry.location.lat,
                    longitude: geometry.location.lng
                };
            })
        );
    }


    /* --- Get Weather Data --- */
    function getWeather(cityInfo) {
    
        const {
            cityName,
            latitude,
            longitude
        } = cityInfo
        
        const url = `${CORS_PROXY}${DARKSKY_API_URL}${DARKSKY_API_KEY}/${latitude},${longitude}?units=si&exclude=minutely,hourly,alerts,flags`;

        return (
            fetch(url)
            .then(response => response.json())
            .then(data => {
                return {
                    cityName: cityName,
                    weather: data.currently,
                    daily: data.daily.data
                };
            })
        );
    }
    
    
    const app = document.querySelector('#app');
    
    const cityForm = app.querySelector('.city-form');
    const cityInput = cityForm.querySelector('.city-input');
    
    const conHeader = app.querySelector('.contents-header');
    const currentSummary = app.querySelector('.current-summary');
    const currentRight = app.querySelector('.current-right');
    const currentLeft = app.querySelector('.current-left');
    const dailyList = app.querySelector('.daily-list');
    
    
    /* --- Display Current Weather Icon --- */ 
    function getCurrentIcon(result) {
    
        const { icon } = result.weather;
        
        const wIcon = document.createElement('li');
        wIcon.innerHTML = '<i></i>';
        wIcon.setAttribute('id', 'c-icon');
        currentSummary.appendChild(wIcon);
        
        if(icon ==='clear-day') {
            return wIcon.setAttribute('class', 'wi wi-day-sunny');
        }
        else if(icon === 'clear-night') {
            return wIcon.setAttribute('class', 'wi wi-night-clear');
        }
        else if(icon === 'rain') {
            return wIcon.setAttribute('class', 'wi wi-rain');  
        }
        else if(icon === 'snow') {
            return wIcon.setAttribute('class', 'wi wi-snow'); 
        }
        else if(icon === 'sleet') {
            return wIcon.setAttribute('class', 'wi wi-sleet');  
        }
        else if(icon === 'wind') {
            return wIcon.setAttribute('class', 'wi wi-windy');  
        }
        else if(icon === 'fog') {
            return wIcon.setAttribute('class', 'wi wi-fog');  
        }
        else if(icon === 'cloudy') {
            return wIcon.setAttribute('class', 'wi wi-cloudy');  
        }
        else if(icon === 'partly-cloudy-day') {
            return wIcon.setAttribute('class', 'wi wi-day-cloudy');
        }
        else if(icon === 'partly-cloudy-night') {
            return wIcon.setAttribute('class', 'wi wi-night-partly-cloudy');
        }
        else if(icon === 'hail') {
            return wIcon.setAttribute('class', 'wi wi-hail');  
        }
        else if(icon === 'thunderstorm') {
            return wIcon.setAttribute('class', 'wi wi-thunderstorm');  
        }
        else if(icon === 'tornado') {
            return wIcon.setAttribute('class', 'wi wi-tornado');  
        }
    }
    
    
    /* --- Display Current Weather Data --- */
    function displayCurrentWeather(result) {
        const {
            apparentTemperature,
            pressure,
            humidity,
            summary,
            temperature,
            uvIndex,
            windSpeed,
            visibility
        } = result.weather;
        
        //convert wind speed unit, m/s -> km/h
        const convertedWindSpeed = Math.round(windSpeed * 3.6);
        
        
        
        // <div class="contents-header"></div>
        const wCity = document.createElement('H2');
        wCity.appendChild(document.createTextNode(result.cityName));
        
        const wSummary = document.createElement('li');
        wSummary.appendChild(document.createTextNode(summary));
        
        conHeader.appendChild(wCity);
        conHeader.appendChild(wSummary);


        // <div class="current-summary"></div>
        const wTemp = document.createElement('li');
        wTemp.appendChild(document.createTextNode(temperature + ' °C'));
        wTemp.setAttribute('class', 'w-temperature');
        
        currentSummary.appendChild(wTemp);
        
        
        // <div class="current-list"></div>
        const wApparentTemp = document.createElement('li');
        wApparentTemp.innerHTML = '<span class="current-span">FEELS LIKE</span> <br>' + apparentTemperature + ' °';
        
        const wHumidity = document.createElement('li'); 
        wHumidity.innerHTML = '<span class="current-span">HUMIDITY</span> <br>' + humidity + '%';
        
        const wWind = document.createElement('li');
        wWind.innerHTML = '<span class="current-span">WIND</span> <br>' + convertedWindSpeed + ' Km/h';

        const wUv = document.createElement('li');
        wUv.innerHTML = '<span class="current-span">UV INDEX</span> <br>' + uvIndex + ' of 10';
        
        const wPressure = document.createElement('li');
        wPressure.innerHTML = '<span class="current-span">PRESSURE</span> <br>' + pressure + ' hPa';
        
        const wVisibility = document.createElement('li');
        wVisibility.innerHTML = '<span class="current-span">VISIBILITY</span> <br>' + visibility + ' Km';

        currentLeft.appendChild(wApparentTemp);
        currentLeft.appendChild(wHumidity);
        currentLeft.appendChild(wWind);
        currentRight.appendChild(wUv);
        currentRight.appendChild(wPressure);
        currentRight.appendChild(wVisibility);
        
        
        // weather list border line
        document.getElementById('current-list').style.borderTop = "1px solid #333";
        document.getElementById('current-list').style.borderBottom = "1px solid #333";

        

    }
    
    
    /* --- Display Dates --- */    
    function getDayNames(unixTime) {
        
        const timeStamp = unixTime
        const d = new Date(timeStamp * 1000)
        const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saterday', 'Sunday']
        
        const dayName = days[d.getDay()]
        
        // To get 'Mon', 'Tue'..
        //const dayName = d.toString().split(' ')[0];
        
        const date = document.createElement('li');
        date.appendChild(document.createTextNode(dayName));
        
        dailyList.appendChild(date);
    }
    
    
    /* --- Display Daily Weather Icon --- */
    function getDailyIcon(icon) {
    
        const dIcon = document.createElement('li');
        dIcon.innerHTML = '<i></i>';
        dIcon.setAttribute('id', 'd-icon');
        dailyList.appendChild(dIcon);
    
        if(icon ==='clear-day') {
            return dIcon.setAttribute('class', 'wi wi-day-sunny'); 
        }
        else if(icon === 'clear-night') {
            return dIcon.setAttribute('class', 'wi wi-night-clear'); 
        }
        else if(icon === 'rain') {
            return dIcon.setAttribute('class', 'wi wi-rain');  
        }
        else if(icon === 'snow') {
            return dIcon.setAttribute('class', 'wi wi-snow');  
        }
        else if(icon === 'sleet') {
            return dIcon.setAttribute('class', 'wi wi-sleet');  
        }
        else if(icon === 'wind') {
            return dIcon.setAttribute('class', 'wi wi-windy');  
        }
        else if(icon === 'fog') {
            return dIcon.setAttribute('class', 'wi wi-fog');  
        }
        else if(icon === 'cloudy') {
            return dIcon.setAttribute('class', 'wi wi-cloudy');  
        }
        else if(icon === 'partly-cloudy-day') {
            return dIcon.setAttribute('class', 'wi wi-day-cloudy');
        }
        else if(icon === 'partly-cloudy-night') {
            return dIcon.setAttribute('class', 'wi wi-day-cloudy')   
        }
        else if(icon === 'hail') {
            return dIcon.setAttribute('class', 'wi wi-hail');  
        }
        else if(icon === 'thunderstorm') {
            return dIcon.setAttribute('class', 'wi wi-thunderstorm');  
        }
        else if(icon === 'tornado') {
            return dIcon.setAttribute('class', 'wi wi-tornado');  
        }
    }
    
   
    /* --- Display Daily Weather Data --- */
    function displayDailySummary(result) {
       
        const dailyWeather = result.daily
        .map( data => {
            return {
                time: data.time,
                icon: data.icon,
                tempMax: data.apparentTemperatureMax,
                tempMin: data.apparentTemperatureMin 
            }
        })
        .forEach( data => {
        
            getDayNames(data.time);
            getDailyIcon(data.icon);
            
            // <div class="daily-list"></div>
            const maxTemp = document.createElement('li');
            maxTemp.appendChild(document.createTextNode( data.tempMax + ' °'));

            const minTemp = document.createElement('li');
            minTemp.appendChild(document.createTextNode(data.tempMin + ' °'));

            dailyList.appendChild(maxTemp);
            dailyList.appendChild(minTemp);
        })
    }
    
    
    /* --- Get Background Image by Temperature --- */
    function getBackground(result) {
       
        const { temperature } = result.weather;
        
        const backgroundImg = document.getElementById('section-weather');
        
        if (temperature > 20) {
            return backgroundImg.style.backgroundImage = "url('resources/css/img/clear-sky.png')";
        }
        if (temperature > 0) {
            return backgroundImg.style.backgroundImage = "url('resources/css/img/cloud.png')";
        }
        if (temperature <= 0) {
            return backgroundImg.style.backgroundImage = "url('resources/css/img/snow.png')";
        }
       
    }
    
    
    /* --- Get Users Position --- */
    function getUserPosition() {
        return new Promise(function(resolve, reject) {
            navigator.geolocation.getCurrentPosition(resolve, reject);
        });
    }
    
    
    /* --- Get Users City Name --- */
    function getUserCityName(position) {
        
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;

        //Used another weather open source API to get the proper cityName
        const url = `${WEATHER_MAP_API_URL}weather?lat=`+lat+`&lon=`+lng+`&appid=${WEATHER_MAP_API_KEY}`

        return (
            fetch(url)
            .then(response => response.json())
            .then(data => {
                return {
                    cityName: data.name,
                    latitude: lat,
                    longitude: lng
                };
            })
            .catch(error => console.log("Something went wrong!"))
        ); 
    }
    
    
    /* --- Confirm Geo Location Service With Users --- */
    function geolocationService() {
        
        const answer = confirm("You would like to share your location?")
        
        if(answer) {
            getUserPosition()
                .then(getUserCityName)
                .then(getWeather)
                .then(displayWeather)
                .catch(error => console.log("Something went wrong!"))
        } 
        else {
            // do nothing
        }
    }
    
    
    /* --- Call Alert Box on Page Load to Confirm Geo Location Service --- */
    geolocationService();
    
    
    /* --- Call Display Weather Functions --- */
    function displayWeather(result) {
    
        cityInput.value = ''; // clear the input box
            
        conHeader.innerHTML = ''; // clear the weather contents for new search
        currentSummary.innerHTML = '';
        currentRight.innerHTML = '';
        currentLeft.innerHTML = '';
        dailyList.innerHTML = '';
        
        const promises = [
            getCurrentIcon(result),
            displayCurrentWeather(result),
            displayDailySummary(result),
            getBackground(result)
        ]
        
        Promise.all(promises);      
    }


    /* --- Search EventListener --- */
    cityForm.addEventListener('submit', function (e) {
        e.preventDefault(); // prevent the form from submitting
        
        const city = cityInput.value;
        
        if(!city) {
            alert("Please enter a city name")
        }
        else {
            getCoordinatesForCity(city)
                .then(getWeather)
                .then(displayWeather)
                .catch(error => console.log("Something went wrong!"))
        }  
    }); 

})();
// wrapping the code in an IIFE to prevent it from polluting the global scope

/* ---------------------------------------- */

/* BASIC SETUP */

/* ---------------------------------------- */


html {
    min-height: 100%;
    position: relative;
}

* {
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-size: 16px;
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
    text-rendering: optimizeLegibility;
    background: #fff;
    height: 100%;
    color: #252839;
}


/* ---------------------------------------- */

/* HEADER */

/* ---------------------------------------- */


header {
    background: #333;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

h1 {
    color: #fff;
    font-size: 2.0em;
    padding: 5px;
    background: #f2b632;
}

.h1-span {
    font-size: .6em;
}


/*- SOCIAL ICONS -*/

.social-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 9px;
    padding-bottom: 7px;
    list-style: none;
}

.social-links li {
    margin-right: 10px; 
}

.icon-portfolio,
.icon-linkedin,
.icon-github {
    font-size: 1.7em;
    color: #fff;
    text-align: center;
    -webkit-transition: color .2s;
    transition: color .2s;
}

.icon-portfolio {
    margin-right: .1em;
}

.icon-portfolio:hover {
    color: #dd4b39;
}

.icon-linkedin:hover {
    color: #007bb5;
}

.icon-github:hover {
    color: #fae596;
}


/* ---------------------------------------- */

/* SECTION */

/* ---------------------------------------- */

#section-weather {
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
}

/* --- SEARCH BOX --- */

.city-form {
    padding: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.city-input {
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    height: 1.6em;
    width: auto;
    color: #6d6a6a;
    -webkit-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 0;
    border: 1px solid #6d6a6a;
}

.btn {
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    height: 1.6em;
    width: auto;
    background: #f2b632;
    border: 1px solid #f2b632;
    color: #6d6a6a;
    -webkit-transition: background .2s;
    -webkit-transition: background .2s, border .2s;
    transition: background .2s, border .2s;

}

.btn:hover,
.btn:active {
    background: #e6cf8b;
    border: 1px solid #e6cf8b;

}

*:focus { outline: none; }


/* --- CONTENTS --- */

.contents-header {
    list-style: none;
    text-align: center;
    padding-bottom: 30px;
}

h2 {
    text-align: center;
    font-size: 2em;
    font-weight: 200;
}

.current-summary {
    list-style: none;
    padding-left: 0;
    padding-bottom: 32px;
    text-align: center;
}

.current-summary li {
    padding-bottom: 8px;
}

#c-icon {
    font-size: 3.3em;
    color: #252839;
    padding-bottom: 12px;
} 

#d-icon {
    font-size: 1.7em;
    color: #252839;
} 

.w-temperature {
    font-size: 3.0em;
    font-weight: 200;
}

#current-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-around;
    font-size: 1.2em;
}

.current-left,
.current-right {
    list-style: none;
    word-spacing: 1px;
    letter-spacing: 1px;
    padding-left: 0;
    padding: 15px;
}

.current-span { 
    font-size: .6em;
    font-weight: ;
    color: #6d6a6a;
}

.daily-list {
    list-style: none;
    padding: 30px;
}

.daily-list li {
    
}


/* ---------------------------------------- */

/* FOOTER */

/* ---------------------------------------- */

footer {
    background: #333;
}

h3 {
    font-size: .9em;
    color: #fff;
    text-align: center;
    padding: 13px;
}

.h3-span {
    color: #f2b632;
}

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Weather App</title>
    <!-- any <link> tags that are not our own CSS appear before our own CSS so that our CSS will be more specific with respect to the cascade -->
    <!-- viewport: to set the effective width to the same as the screen width -->
    <!-- viewport: to disable pinch-zoom, add <maximum-scale=1.0> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="description" content="Local weather application.">

    <link rel="normalize" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="vendors/css/weather-icons.min.css">
    <link type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:200i,300,300i,400" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="resources/css/style.css">
    <link rel="stylesheet" type="text/css" href="resources/css/queries.css">

</head>

<body>

    <div id="app">

        <header>
            <h1>hJ <span class="h1-span">weather</span></h1>
            <ul class="social-links">
                <li>
                    <a href="" target="_blank"><i class="ion-ios-briefcase-outline icon-portfolio" title="portfolio"></i></a></li>
                <li>
                    <a href="https://www.linkedin.com/in/jin827/" target="_blank"><i class="ion-social-linkedin-outline icon-linkedin" title="linkedin"></i></a></li>
                <li>
                    <a href="https://github.com/Jin827/weather-app" target="_blank"><i class="ion-social-github-outline icon-github" title="github"></i></a></li>
            </ul>
        </header>
        
        <section id="section-weather">
            <!-- SEARCH BOX -->
            <div class="search-box">
                <form class="city-form">
                    <input type="text" class="city-input" placeholder="Search for location">
                    <button class="btn">search</button>
                    <!--                    <i class="fa fa-search fa-2x" aria-hidden="true"></i>-->
                </form>
            </div>

            <!-- CONTENTS -->

            <div class="contents-box">

                <!-- the content diplayed here is generated by DOM operations :) -->
                <div class="contents-header">

                </div>
                <div>
                    <ul class="current-summary">

                    </ul>
                </div>
                <div id="current-list">
                    <ul class="current-left">

                    </ul>
                    <ul class="current-right">

                    </ul>    
                </div>
                <div>
                    <ul class="daily-list">

                    </ul>
                </div>
            </div>
        </section>
        
        <!-- FOOTER -->
        <footer>
            <h3> Responsive CSS Flex-box <span class="h3-span">Hyojin Lee</span></h3>
        </footer>

    </div>
    
    <script type="text/javascript" src="resources/app.js"></script>
</body>

</html>

Answer 1

我用 calc(100%/4) 和 flex wrap, space-around 解决了问题。