Mengatur button menggunakan jQuery
Nama : Bimantara Tito Wahyudi
NRP : 5025201227
Kelas : PWEB B
NRP : 5025201227
Kelas : PWEB B
Pada materi ini, kami belajar tentang jQuery selector, event, manipulasi html, dll. yang sangat berguna dalam kebutuhan membangun website. Berikut adalah halaman web yang telah saya buat:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MinPlus Button</title> | |
| <link rel="stylesheet" href="index.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Imagine if we could write our own fate as easy as we write js with jQuery</h1> | |
| <div class="card"> | |
| <button id="btn1">-</button> | |
| <div class="count-container"> | |
| <h2 id="count">0</h2> | |
| </div> | |
| <button id="btn2">+</button> | |
| </div> | |
| <h1>Wouldn't it be amazing?</h1> | |
| </div> | |
| <script> | |
| $(document).ready(function() { | |
| var count = 0; | |
| $('#btn1').on('click', function() { | |
| if(count > 0) | |
| $('h2').html(--count); | |
| }); | |
| $('#btn2').on('click', function() { | |
| if(count < 10) | |
| $('h2').html(++count); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Fonts */ | |
| @font-face { | |
| font-family: 'open_sansregular'; | |
| src: url('opensans-regular-webfont.woff2') format('woff2'), | |
| url('opensans-regular-webfont.woff') format('woff'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| /* CSS Reset */ | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| font-style: normal; | |
| vertical-align: baseline; | |
| } | |
| /* HTML5 display-role reset for older browsers */ | |
| article, aside, details, figcaption, figure, | |
| footer, header, hgroup, menu, nav, section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| blockquote, q { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| /* Custom CSS */ | |
| * { | |
| font-family: sans-serif; | |
| } | |
| body { | |
| background-color: lightgrey; | |
| } | |
| h1 { | |
| font-size: large; | |
| margin-bottom: 2em; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| } | |
| .card { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 2em; | |
| } | |
| .count-container { | |
| display: flex; | |
| height: 50px; | |
| width: 150px; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: whitesmoke; | |
| border: 1px solid gray; | |
| } | |
| button { | |
| height: 52px; | |
| width: 52px; | |
| font-size: 25px; | |
| font-weight: bolder; | |
| border: 1px solid gray; | |
| } | |
| button:hover { | |
| cursor: pointer; | |
| } | |
| #btn1 { | |
| background-color: rgb(255, 78, 78); | |
| border-radius: 10px 0 0 10px; | |
| } | |
| #btn1:hover { | |
| background-color: rgb(255, 112, 112); | |
| } | |
| #btn2 { | |
| background-color: lightgreen; | |
| border-radius: 0 10px 10px 0; | |
| } | |
| #btn2:hover { | |
| background-color: rgb(180, 232, 180); | |
| } |
Link
Comments
Post a Comment