Javascript Turorial App - Random Wikipedia App

Javascript Turorial App - Ứng dụng Random Wikipedia App

File index.html

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
		<title>Wikipedia Random</title>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f4f4f8;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    min-height: 100vh;
    transition: all 0.3s;
    position: relative;
}

a, button {
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px;
    transition: all 0.3s;
}

.search-corner {
    width: 60%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding-top: 15%;
    .search-box {
        position: relative;
        input {
            width: 100%;
            border: none;
            font-family: 'Raleway';
            font-weight: 300;
            font-size: 24px;
            padding: 10px 30px;
            border-radius: 30px;
            outline: none;
            box-shadow: 1px 3px 24px 3px #c4d5ef;
            transition: box-shadow 0.3s;
            &:focus {
                box-shadow: 1px 3px 40px 5px #c4d5ef;
            }
        }
        button {
            position: absolute;
            right: 0;
            top: 0;
            border: none;
            outline: none;
            background-color: #FF681D;
            font-family: 'Raleway';
            font-size: 24px;
            font-weight: 500;
            text-align: center;
            color: #fff;
            &:hover {
                background-color: darken(#FF681D, 10%);
            }
        }
    }
    &>p {
        padding-top: 30px;
        a {
            border: 1px solid #FF681D;
            color: #FF681D;
            font-weight: 500;
            margin: 20px 0 50px;
            &:hover {
                background-color: #FF681D;
                color: #fff;
                box-shadow: 1px 3px 20px 1px #ff8c54;
                transform: scale(1.1);
            }
        }
    }
    .search-result > div {
        background-color: #fff;
        padding: 10px 20px;
        margin: 30px 10px;
        border-radius: 6px;
        transition: all 0.3s;
        text-align: left;
        a {
            padding-left: 0;
            font-size: 18px;
            font-weight: 700;
            &:hover{
                color: #FF681D;
            }
        }
        &>p {
            font-size: 15px;
            font-weight: 500;
        }
        &:hover {
            box-shadow: 1px 3px 40px 5px #c4d5ef;
        }
    }
}

footer {
    .love {
        padding-top: 30px;
        font-weight: 500;
        font-size: 14px;
        text-align: center;
        a {
            padding: 0 0 20px;
            &:hover{
                color: #FF681D;
            }
        }
        .material-icons {
            color: #FF681D;
            font-size: 16px;
            animation: heartbeat 3s infinite;
        }
    }
    .notice {
        width: 70%;
        margin: 0 auto;
        border: 2px solid #c4d5ef;
        border-radius: 8px;
        padding: 8px;
        text-align: center;
        font-size: 14px;
    }
}

// *****************Media Queries for Responsive Layout

@media (max-width: 576px) {
    .search-corner {
        width: 80%;
        padding-top: 30%;
        .search-box {
            input, button {
                font-size: 18px;
            }
        }
        p > a {
            font-size: 14px;
        }
    }

    footer {
        font-size: 12px;
    }
}

@media (max-width: 321px) {
    .search-corner {
        width: 90%;
        p > a {
            font-size: 12px;
        }
    }
}


//Alternate layout using CSS Grid for the browsers that supports it.
@supports (display: grid) {
    body {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 1fr auto;
    }

    .search-corner {
        grid-column: 2;
        align-self: center;
        justify-self: center;
        width: 90%;
        padding-top: 0;
    }

    footer {
        grid-column: 2;
        align-self: end;
        justify-self: center;
        .notice {
            display: none;
        }
    }

    @media (max-width: 921px) {
        body {
            grid-template-columns: 0.2fr 1fr 0.2fr;
        }
    }

    @media (max-width: 576px) {
        body {
            grid-template-columns: 0 1fr 0;
        }
    }
}


/*Beating heart animation keyframe*/
@keyframes heartbeat {
    0% {
        transform: scale(1.0);
    }
    5% {
        transform: scale(1.3);
    }
    10% {
        transform: scale(1.1);
    }
    20% {
        transform: scale(1.5);
    }
    30% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.0);
    }
}
</style>
	</head>
	<body>
		<div id="container">
			<div class="search-corner">
  <div class="search-box">
    <form action="#" id="search" autocomplete="off">
      <input type="text" id="query" name="" placeholder="Search Wikipedia">
      <button type="submit">Search</button>
    </form>
  </div>
  <p>Or, <br> <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Read A Random Article</a></p>

  <div class="search-results">
    <h2 class="query-title"></h2>
    <div class="search-result r0"></div>
    <div class="search-result r1"></div>
    <div class="search-result r2"></div>
    <div class="search-result r3"></div>
    <div class="search-result r4"></div>
    <div class="search-result r5"></div>
    <div class="search-result r6"></div>
    <div class="search-result r7"></div>
    <div class="search-result r8"></div>
    <div class="search-result r9"></div>
  </div>

</div>

<footer>
  <p class="notice"><strong>Notice:</strong> Your browser doesn't support CSS Grid. Use a browser that supports it (E.g. Chrome, Mozilla etc) for best view.</p>
  <p class="love">Made with <i class="material-icons">favorite</i> by <a href="https://twitter.com/faahim01" target="_blank">Fahim</a></p>
</footer>
		</div>
		<script src="script.js"></script>
	</body>
</html>

File script.js

$(document).ready(function() {

	function fetchQuery() {

		$("#search").submit( function() {
			//Fetching the value from input element
			var searchQuery = document.getElementById('query').value;
			var wikiAPICall = "https://en.wikipedia.org/w/api.php?format=json&action=opensearch&search="+searchQuery;
			$.ajax({
				url: wikiAPICall,
				type: "GET",
				dataType: "jsonp",
				success: function(wikiData) {
					//Removing existing results
					$(".wow").remove();

					$(".search-corner").css("padding-top", "50px");

					//Checking weather any result found or not and showing the message
					if (wikiData[1][0] == undefined) {
						$(".query-title").text("No result found for '"+searchQuery+"' ????");
					} else {
						$(".query-title").text("Search results for '"+searchQuery+"'");
					}

					//Inserting search results into UI
					for (i=0; i<wikiData[1].length; i++) {
						$(".r"+i).html("<div class='wow fadeInUp'><a href='"+wikiData[3][i]+"' target='_blank'><p>"
							+wikiData[1][i]+"</p></a><p>"+wikiData[2][i]+"</p></div>");
					}
				}
			})
			event.preventDefault();
		});

	}
  
  //Calling the function.
	fetchQuery();
  new WOW().init();

});

Javascript Turorial App - Random Wikipedia App

Javascript Turorial App - Ứng dụng Random Wikipedia App

Các bài học liên quan

Đóng góp ý kiến của bạn về bài học để admin liên hệ hoặc giúp nhé

Dịch vụ chúng tôi cung cấp

Blogs Kiến thức

CÔNG TY THIẾT KẾ WEBSITE CHUYÊN NGHIỆP

CÔNG TY THIẾT KẾ WEBEXTRASITE.COM